Overlays

Dialog

A focused task on top of the page. AlertDialog confirms something that can't be undone.

Ant Design: Modal

import { DialogTrigger, DialogModal, Dialog, AlertDialog } from '@alea/ui';

Examples

A title, a description, content and a footer. Escape and the X close it.

Confirms what can't be undone. Escape and outside clicks don't close it by accident.

sm, md (default), lg and full.

Show 5 React Aria props

The dialog content: title, text, body and footer. Put it inside DialogModal.

Prop	Type	Default	Description
`description`	`ReactNode`	-	Text under the title.
`footer`	`ReactNode \| ((opts: { close: () => void; }) => ReactNode)`	-	Buttons at the bottom, e.g. Cancel and Save. Receives close.
`hideClose`	`boolean`	-	Hides the X button.
`title`	`ReactNode`	-	The title (required for screen readers unless aria-label is set).

Show 7 React Aria props

The modal layer: dims the page, traps focus, closes on Escape (and outside click when isDismissable).

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "full"`	`'md'`	sm 400, md 520, lg 720, full.

A confirm dialog (role alertdialog): Escape and outside click don't dismiss it by accident.

Prop	Type	Default	Description
`title`required	`ReactNode`	-	The question, e.g. "Delete this file?".
`cancelLabel`	`ReactNode`	`'Cancel'`	The cancel button text. Default "Cancel".
`confirmLabel`	`ReactNode`	`'Confirm'`	The confirm button text.
`defaultOpen`	`boolean`	-	Open on first render (uncontrolled).
`isOpen`	`boolean`	-	Open state (controlled).
`onConfirm`	`(() => unknown)`	-	Runs on confirm; the dialog closes after it (awaits a promise).
`onOpenChange`	`((open: boolean) => void)`	-	Called when it opens or closes.
`tone`	`"danger" \| "default"`	`'default'`	danger turns the confirm button red.

Focus moves into the dialog and stays there; it goes back to the trigger on close.
The page behind is hidden from screen readers.
Escape closes a Dialog; an AlertDialog needs a choice.

Key	Does
`Tab`	Cycles inside the dialog
`Escape`	Closes (not AlertDialog)

Don't

Dialog with Size and slots for body and footer.