Modal

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

 

 

 

 

 

Variations

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