Overlays · §5.20

Dialog

Short tasks and confirmations.

Theme
Contrast
Language
Motion
Text size

Code

<Dialog><DialogTrigger render={<Button />}>…</DialogTrigger><DialogContent>…</DialogContent></Dialog>

Accessibility

  • Focus moves in and returns to the trigger; Escape closes.
  • Selects and menus inside paint above it.

Usage

Do

  • The title is a question; the body states the consequence.

Don't

  • No dialogs for information that fits inline.

Platforms

Web
apps/web/components/ui/dialog.tsx
iOS
SwiftUI .sheet / .alert
Android
Compose AlertDialog