Components / Overlays
Dialog
A modal surface with managed focus, dismissal, and accessible title and description.
Available in @kape/react
Interactive example
Use keyboard and pointer input to exercise the public behavior.
Installation and usage
Import the owned Kape primitives and the component stylesheet once.
Dialog imports
import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose } from "@kape/react";
import "@kape/react/styles.css";Props
| Prop | Type | Purpose |
|---|---|---|
open / defaultOpen | boolean | Controlled or initial state |
onOpenChange | (open) => void | State change callback |
modal | boolean | Whether outside content is inert |
Accessibility
Semantics, focus, naming, disabled states, and announcements are preserved by the Kape wrapper and covered by component tests. Supply meaningful visible labels and descriptions.
Keyboard
- Tab
- Moves within the open dialog.
- Shift + Tab
- Moves backward within the focus trap.
- Escape
- Closes and restores trigger focus.
Composition and limitations
Compose the exported parts directly; styling implementation details and the underlying headless library are not public API.