Dialog

A modal dialog overlay for confirmations, forms, or important content. Built on the native <dialog> element.

Preview

Click the buttons below to open dialogs of different sizes.

Dialog Title (sm)

This is a sm dialog. Click the close button, press Escape, or click the backdrop to dismiss it.

Dialog Title (md)

This is a md dialog. Click the close button, press Escape, or click the backdrop to dismiss it.

Dialog Title (lg)

This is a lg dialog. Click the close button, press Escape, or click the backdrop to dismiss it.

Sizes

The size prop controls the width of the dialog panel on desktop.

Size	Description
sm	Small (400px)
md	Medium (560px)
lg	Large (720px)
fullscreen	Full viewport

Mobile variant

mobileVariant controls how the dialog renders on touch / narrow viewports. The default is a centered modal, but action-driven content (confirmations, single-step forms) feels more native as a bottom sheet, and complex flows (multi-step wizards, filters) read better fullscreen.

mobileVariant	Mobile rendering	Use for
modal (default)	Centered overlay, same as desktop	Generic confirmations
sheet	Bottom sheet with drag-to-dismiss	Action lists, quick forms
fullscreen	Full-viewport panel with safe-area padding	Multi-step flows, large forms

<Dialog open={open} onClose={close} mobileVariant="sheet">
  <Dialog.Title onClose={close}>Delete project?</Dialog.Title>
  <Dialog.Content>This action cannot be undone.</Dialog.Content>
  <Dialog.Actions>
    <Button variant="ghost" onClick={close}>Cancel</Button>
    <Button variant="danger" onClick={confirmDelete}>Delete</Button>
  </Dialog.Actions>
</Dialog>

Mobile considerations

• Dialog panel uses .tui-glass (Tier 3 surface) — translucent + backdrop-blur on capable browsers, falling back to opaque --tui-bg-subtle on older Android WebView.
• mobileVariant="fullscreen" automatically respects iOS safe areas (notch + home indicator) via env(safe-area-inset-*).
• Backdrop tap dismiss can be disabled with closeOnBackdrop={false} — recommended for destructive confirmations to prevent accidental dismissal.

Dialog Props

Prop	Type	Default	Description
open*	boolean	-	Whether the dialog is open
onClose*	() => void	-	Callback when the dialog should close
size	'sm' | 'md' | 'lg' | 'fullscreen'	'md'	Desktop size preset
mobileVariant	'modal' | 'sheet' | 'fullscreen'	'modal'	Mobile rendering strategy
closeOnBackdrop	boolean	true	Close when backdrop is clicked
closeOnEscape	boolean	true	Close when Escape key is pressed
children	ReactNode	-	Dialog content

Dialog.Title Props

Prop	Type	Default	Description
showClose	boolean	true	Show close button
onClose	() => void	-	Close handler called when close button is clicked
children	ReactNode	-	Title text

Dialog.Content Props

Prop	Type	Default	Description
children	ReactNode	-	Body content

Dialog.Actions Props

Prop	Type	Default	Description
children	ReactNode	-	Action buttons