Definition: A modal is a popup dialogue that temporarily interrupts the main workflow until a specific action performs.

When to use

Use a modal to display important alerts or notifications that require immediate attention from the user. It is suitable for:

  • Action confirmation prompts
  • Error confirmations
  • Critical actions (e.g. deleting an item. Use the modal to confirm the action and prevent accidental data loss.)


  1. Informative icon
  2. Text
  3. Close button
  4. Modal
  5. Button controls







  1. Info
  2. Success
  3. Warning
  4. Error
  5. Dialogue upload file
  6. Dialogue upload file with combogrid
  7. Dialogue attachment
  8. Dialogue with illustration
  9. Dialogue with image slider






Where to use

✅ Confirmation dialogues

✅ Forms

✅ Guide workflow such as onboarding

✅ Settings & configurations

✅ Error handling