Dialog
Modal surface with focus management and dismissal behavior.
Add it to your project
Eject the complete dialog group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject dialogbash
npx toucan eject dialogapp.tsx
import { Dialog } from '@/components/toucan/dialog';Use when
A focused task or decision must temporarily interrupt the page.
Avoid when
The content can be completed inline or navigated to as a full page.
Example
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Dialog
Dialog
Props type: DialogProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
closeOnBackdropClick | boolean | true | No | Close when the user activates the backdrop. |
closeOnEscape | boolean | true | No | Close when the user presses Escape. |
onClose | () => void | — | Required | Called when the component requests to close. |
open | boolean | — | Required | Controlled open state. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
DialogProps
Accessibility
- Traps focus while open, closes on Escape, restores focus, and marks background content inert.
- Provide aria-label or aria-labelledby.
Token families
dialogbackdropfocus