Overlays
Dialog
It rises out of the scrim, traps Tab inside the panel, and hands focus back where it came from on close. Modality is the price: everything behind it stops, so a dialog has to earn the interruption with a decision that genuinely cannot wait. Escape and a click on the scrim both close it, because a modal with one exit reads as a trap.
npx shadcn@latest add @minflow/dialogWhere to use it
- Confirmations with consequences: delete, archive, revoke, publish.
- A short form that would lose its context on a page of its own.
- Never for detail or reference material; a sheet keeps the page behind it visible, which is usually what the reader actually needs.
Variations
Confirmation
The main reason a dialog exists. Name the consequence in the body and the action on the button, so the reader never has to hold 'yes to what' in their head.
Short form
One or two fields that belong to the surface behind them. Anything longer wants a page, because a growing modal starts scrolling and loses its focus.
Message only
When there is nothing to decide and the reader only has to acknowledge. Use it sparingly, since a message with no decision rarely earns modality.