Alert dialog
A dialog that interrupts to confirm an action that cannot be undone.
In Brand expressive
See it live
Start Storybook to see it live:
npm run storybookWhen to use it
In Brand expressive: The confirm after Button secondary, when something cannot be got back. Not when the visitor can join or add back later.
- Use it when: Deleting, cancelling or overwriting something people cannot get back, when undo is not possible.
- Not when: Anything that can be undone (offer undo instead), or a form or task (use a dialog).
Instead:
- Dialog: A focused task, not a confirmation.
- Toast: Undo after the fact, when the action can be reversed.
How Brand expressive uses it
Delete or remove
Use Button secondary, then confirm with Button danger
Not Button primary
Confirm before destroying data.
A confirmation question
Use Plain. No jokes when something is lost.
Not Playful copy
Loss is never the moment for a joke. Example: “Remove this from your list? You can add it back later.”
Words
- Headlines are short and bold. Three to six words.
- Verbs that move: Join, Try, Go.
- Playful in headlines, plain in errors.
- Use: Join, Drop, Go, Love. Avoid: Synergy, Leverage, Kindly.
The labels components use, from the voice tokens:
content.action.commit: Gocontent.action.cancel: Not nowcontent.action.destroy: Removecontent.action.retry: Try againcontent.action.empty-action: Explore the drop
See Voice and tone for the whole voice.
Accessibility and keyboard
| Keyboard | What happens | Not |
|---|---|---|
| undefined | Escape cancels, the same as the safe choice. | undefined |
| undefined | Tab stays inside until people choose. | undefined |
Test before you ship:
- It is an alertdialog with a title and a description that names the consequence. undefined
- Focus starts on the safe choice, never on the destructive one. undefined
Use it in code
npx open-ds add alert-dialog
The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.
Tokens it reads
Alert dialog reads 17 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Alert dialog's tokens to change Alert dialog alone.
Changes with theme
Brand expressive decides what changes when you switch theme. Here a switch changes colors only, so the marked rows differ between light and dark; everything else holds steady.
| Part | Its token and the semantic it aliases | Value |
|---|---|---|
| Shared | ||
| Transition panels duration | component.transition.panels-durationmotion.duration.panelsvar(--transition-panels-duration) | duration.moderate:200ms |
| Overlay | ||
| Fill Changes with theme | component.alert-dialog.overlay.backgroundcolor.surface.scrimvar(--alert-dialog-overlay-background) | Lightblack.light.scrim:#0000008CDarkblack.dark.scrim:#000000B3 |
| Content | ||
| Gap | component.alert-dialog.content.gapspace.gap.groupvar(--alert-dialog-content-gap) | space.40:2.5rem |
| Corner | component.alert-dialog.content.radiusradius.containervar(--alert-dialog-content-radius) | radius.24:1.5rem |
| Fill Changes with theme | component.alert-dialog.content.backgroundcolor.surface.canvasvar(--alert-dialog-content-background) | Lighttaupe.light.50:#FFF8F3Darktaupe.dark.0:#120B09 |
| Padding | component.alert-dialog.content.paddingcomponent-spacing-map.x6var(--alert-dialog-content-padding) | space.48:3rem |
| Shadow Changes with theme | component.alert-dialog.content.shadowelevation.overlayvar(--alert-dialog-content-shadow) | Lightshadow.overlayDarkshadow.overlay-dark |
| Header | ||
| Gap | component.alert-dialog.header.gapcomponent-spacing-map.x2var(--alert-dialog-header-gap) | space.8:0.5rem |
| Gap x | component.alert-dialog.header.gap-xspace.gap.sectionvar(--alert-dialog-header-gap-x) | space.64:4rem |
| Footer | ||
| Gap | component.alert-dialog.footer.gapspace.gap.defaultvar(--alert-dialog-footer-gap) | space.16:1rem |
| Title | ||
| Text size | component.alert-dialog.title.font-sizetype.heading.font-sizevar(--alert-dialog-title-font-size) | font.size.28:1.75rem |
| Weight | component.alert-dialog.title.font-weighttype.title.font-weightvar(--alert-dialog-title-font-weight) | font.weight.800:800 |
| Description | ||
| Text size | component.alert-dialog.description.font-sizetype.body.font-sizevar(--alert-dialog-description-font-size) | font.size.17:1.0625rem |
| Text Changes with theme | component.alert-dialog.description.labelcolor.text.mutedvar(--alert-dialog-description-label) | Lighttaupe.light.600:#6B544ADarktaupe.dark.400:#B5988A |
| Media | ||
| Corner | component.alert-dialog.media.radiusradius.controlvar(--alert-dialog-media-radius) | radius.999:9999px |
| Fill Changes with theme | component.alert-dialog.media.backgroundcolor.surface.sunkenvar(--alert-dialog-media-background) | Lighttaupe.light.100:#FCEFE6Darktaupe.dark.100:#33241F |
| Size | component.alert-dialog.media.sizesize.control.defaultvar(--alert-dialog-media-size) | size.52:3.25rem |
| From the system | ||
| Edge Changes with theme | color.border.default straight from the system, through --border | Lighttaupe.light.200 · #F2DCCFDarktaupe.dark.100 · #33241F |