Overlays
Dialog
A modal dialog with focus trapping, Escape dismissal, and focus return.
Installation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add dialogWrites components/ui/dialog.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import {
Dialog,
DialogTrigger,
DialogClose,
DialogPortal,
DialogOverlay,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
} from "@/components/ui/dialog";API reference
Props and composition points for Dialog. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
open / defaultOpen / onOpenChange | boolean / boolean / (open: boolean) => void | None | Controlled or uncontrolled visibility. |
modal | boolean | true | Locks background interaction and traps focus while open. |
showCloseButton | boolean | true | On DialogContent, renders the top-right close control. |
DialogTitle / DialogDescription | component | None | Title is required for the accessible name. Description supplies the accessible description. |
Dependencies: radix-ui, @tabler/icons-react, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- Radix traps focus, sets aria-modal, locks page scroll, closes on Escape, and returns focus to the trigger.
- Always render DialogTitle. Hide it visually if the design has no title, but never omit the accessible name.
- The overlay click closes the dialog. Destructive flows should still require an explicit action in the footer.
- The close button is 32px with a visible focus ring and a screen-reader label.
Keyboard
| Key | Action |
|---|---|
| Escape | Close the dialog and return focus to the trigger. |
| TaborShift+Tab | Cycle focus inside the dialog. |
| Enter | Activate the focused control. |
Used in production
The Aback products whose interfaces shaped this component.