Overlays

Dialog

A modal window requiring user decision before proceeding.

Design question

How does a dialog present in a full-vertical interface without disorienting the user?

Default

The content reads vertically — title, body, and actions as columns flowing right-to-left. The dialog still scales up from center (not from a trigger), which reads as a layer above the page rather than a continuation of the reading flow.

tsx
1function Dialog({ open, onClose, title, description, actions }) {
if (!open) return null
return (
  <div
    role="dialog"
    aria-modal="true"
    aria-labelledby="dialog-title"
    aria-describedby="dialog-desc"

Guidance

✓Animate with scale-up from center — avoids reading-axis conflict
✓Keep dialogs to a maximum of 2 actions
✓Trap focus inside the dialog until dismissed

Don't

✗Animate dialogs from the reading direction edges
✗Use dialogs for non-critical information (use Toast instead)
✗Place vertical text inside a dialog — it reads like content, not a decision interface

Accessibility

role='dialog', aria-modal, aria-labelledby, aria-describedby. Focus trapped. Escape closes. Focus returns to trigger.

Open Question

Should a dialog's action buttons be arranged horizontally (conventional) or vertically (matching the layout) in a fully vertical interface?

← PreviousSheet Next →Marker

1	function Dialog({ open, onClose, title, description, actions }) {
2	if (!open) return null
3	return (
4	<div
5	role="dialog"
6	aria-modal="true"
7	aria-labelledby="dialog-title"
8	aria-describedby="dialog-desc"