'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Components · Dialog
Dialog
Modal surface with backdrop, title, description, and actions.
Anatomy
- 1
.dialog-backdropScrim behind modal content. - 2
.dialog-positionerViewport-level content positioning layer. - 3
.dialog-contentModal content surface. - 4
.dialog-titleDialog headline. - 5
.dialog-descriptionSupporting dialog copy. - 6
.dialog-actionsPrimary and secondary action layout. - 7
.dialog-close-triggerDismisses the dialog.
Publish theme?
Create a version your team can install.
Compositions
The component in context, beside others. Open the code to see the file verbatim.
Theme “Ocean blue”
Delete theme?
This cannot be undone.
When to use
Use a dialog for a focused decision that must be resolved before the person returns to the underlying task.
Interaction states →