Dialogs
Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. They appear in front of app content to provide critical information or ask for a decision.
Live Preview
Confirm Action
Are you sure you want to remove this item from your cart? This action cannot be undone.
Order Confirmed
Your order has been placed successfully. You will receive a confirmation email shortly.
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| borderRadius | string | 28px | 12px | 12px |
| backgroundColor | color | #ECE6F0 | #FFFFFF | #FFFFFF |
| elevation (shadow) | shadow | 0 8px 12px rgba(0,0,0,0.15) | 0 10px 15px rgba(0,0,0,0.1) | 0 10px 15px rgba(0,0,0,0.1) |
| padding | string | 24px | 24px | 24px |
| minWidth | string | 280px | 280px | 280px |
| maxWidth | string | 560px | 560px | 560px |
| scrimColor | color | rgba(0,0,0,0.32) | rgba(0,0,0,0.5) | rgba(0,0,0,0.5) |
| titleFontFamily | string | Roboto | Larken, Playfair Display | Merriweather |
Dialog Types
- Basic Dialog - Simple dialogs with title, description, and action buttons
- Alert Dialog - Urgent interruptions requiring acknowledgment
- Confirmation Dialog - Asks user to confirm an action before proceeding
- Full-screen Dialog - Complex tasks requiring full attention on mobile
Usage Guidelines
- Use dialogs sparingly as they interrupt the user flow
- Keep content brief and focused on a single task
- Always provide a clear way to dismiss the dialog
- Use descriptive button labels instead of generic "OK" or "Cancel"
- Dialogs should be dismissible by tapping the scrim or pressing escape