Dialogs interrupt users with urgent information or required decisions. They appear in front of all content and require interaction before dismissal.
Variants
Remove this user?
This action cannot be undone. They will be permanently removed from this agency.
Cancel
Remove
Changes saved
Your design changes have been saved successfully to the cloud.
Done
Archive document?
This document will be moved to archive. You can restore it at any time from the archived files section.
Cancel
Archive
Specs
| Property | Value | Token |
|---|---|---|
| Width | 360–420px | dialog.width |
| Border radius | 16px | dialog.radius |
| Border | 1px solid #E5E7EB | color.border |
| Shadow | 0 20px 50px rgba(0,0,0,0.12) | dialog.shadow |
| Padding | 24px | dialog.padding |
| Icon circle size | 48×48px / rounded-full | — |
| Icon circle — destructive | rgba(239,68,68,0.10) bg · #EF4444 icon | — |
| Icon circle — success | rgba(166,20,195,0.08) bg · #A614C3 icon | — |
| Icon circle — warning | rgba(245,158,11,0.10) bg · #F59E0B icon | — |
| Title | 16px / Bold 700 / #111827 | type.heading-sm |
| Body | 12px / Regular / #6B7280 / line-height 1.6 | type.body-sm |
| Cancel button | border 1px solid #D1D5DB · transparent bg · 12px / Medium | — |
| Destructive button | #EF4444 solid fill · white text · 12px / Semibold | — |
| Primary button | gradient fill · white text · 12px / Semibold | color.primary-gradient |
| Button padding | 7px 16px · border-radius 8px | — |