Dialog
A modal with trigger, sections and close control.
A unique id is required. Use Dialog.Trigger, Content, Header, Body, Footer, and Close. On mobile the dialog opens as a bottom sheet that can be swiped down. The backdrop is dark in both themes. For confirming an action, use the ready-made ConfirmDialog.
Live example
Example controls
Usage
import { Dialog } from '@prosazhin/pbcomponents';
<Dialog id='example'>
<Dialog.Trigger>Open</Dialog.Trigger>
<Dialog.Content>
<Dialog.Header>Title</Dialog.Header>
<Dialog.Body>Content</Dialog.Body>
<Dialog.Footer>
<Dialog.Close>Close</Dialog.Close>
</Dialog.Footer>
</Dialog.Content>
</Dialog>;Component API
Compound parts: Dialog.Trigger, Dialog.Content, Dialog.Header, Dialog.Body, Dialog.Footer, Dialog.Close.
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
id | string | Unique dialog identifier. | — |
open | boolean | Controlled dialog visibility. | — |
backdrop | boolean | Backdrop behind the dialog. | true |
animationDuration | number | Animation duration in milliseconds. | 400 |
defaultOpen | boolean | Initial visibility when uncontrolled. | false |
onOpenChange | (open: boolean, id?: string) => void | Called when visibility changes. | — |
onClose | (open: boolean, id?: string) => void | Called after closing. | — |
children | ReactNode | Component content. | — |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.