Dialog
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Dialog } from "@corew500/ui/dialog"
<Dialog>Content</Dialog>CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | enum | — | Whether the dialog is currently open. |
| defaultOpen | enum | false | Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead. |
| modal | enum | true | Determines if the dialog enters a modal state when open. - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed. - `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled. |
| onOpenChange | (open: boolean, eventDetails: DialogRootChangeEventDetails) => void | — | Event handler called when the dialog is opened or closed. |
| onOpenChangeComplete | (open: boolean) => void | — | Event handler called after any animations complete when the dialog is opened or closed. |
| disablePointerDismissal | enum | false | Determines whether the dialog should close on outside clicks. |
| actionsRef | RefObject<DialogRootActions> | — | A ref to imperative actions. - `unmount`: When specified, the dialog will not be unmounted when closed. Instead, the `unmount` function must be called to unmount the dialog manually. Useful when the dialog's animation is controlled by an external library. - `close`: Closes the dialog imperatively when called. |
| handle | DialogHandle<unknown> | — | A handle to associate the dialog with a trigger. If specified, allows external triggers to control the dialog's open state. Can be created with the Dialog.createHandle() method. |
| triggerId | string | — | ID of the trigger that the dialog is associated with. This is useful in conjunction with the `open` prop to create a controlled dialog. There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set). |
| defaultTriggerId | string | — | ID of the trigger that the dialog is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog. |
Accessibility
Keyboard Navigation
- Escape key closes the dialog
Focus Management
- - Focus is trapped within the dialog when open
- Focus returns to trigger element on close
Additional
- DialogTitle provides accessible name (required)
- DialogDescription provides accessible description
- Background content is inert when dialog is open
Localization
Translatable Content
- - Pass translated strings to DialogTitle and DialogDescription
- Close button has sr-only "Close" text (localize via children override)
- DialogFooter close button text should be localized