Component · Overlay · 30
Dialog
Dialog = a centred overlay that asks one question and offers two named actions; Escape always cancels.
Delete 12 prompts?
They move to trash for 30 days, then disappear for good.
What is a Dialog?
A dialog asks for a decision before work continues. Name the question, the two actions, and what happens on Esc.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Confirms an irreversible or harmful action (delete, remove). Usually red.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- The dimmed layer behind a modal that blocks the page.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- Confirms an irreversible or harmful action (delete, remove). Usually red.
- Say this state explicitly in the prompt.
Anatomy
These are the parts to name in your prompt.
- 01 Scrim
- 02 Surface
- 03 Title
- 04 Message
- 05 Actions
When to use
- Confirming destructive actions — delete, revoke, overwrite
- Asking the user to name something before continuing
- Blocking decisions the page cannot make on their behalf
Avoid when
- The content is long or scrollable — use Drawer or Modal
- The decision is routine — just do it and offer undo
- Two dialogs can stack on each other
Name the action in the button — “Delete 12 files” beats “Confirm” when the stakes are real.
See also
Create a dialog component.
STYLE
- 320px surface, 16px radius, 20px padding, centered over a #1D1D1F 40% scrim
- title 16px 600, message 13px #6E6E73, 8px apart
- two actions bottom-right: cancel plain, confirm #0071E3 pill
- destructive confirm swaps to #FF3B30
STATES
- default, destructive, busy with a spinner in the confirm button
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui