The Dialog component is a modal that can be used to display content in a controlled manner.
import { Dialog, DialogTrigger, DialogHeading, DialogDescription, DialogCloseTrigger, DialogCloseIconTrigger,} from '@cerberus/react'To use the Dialog component, wrap it in a DialogProvider and use the DialogTrigger component to open the dialog. The Dialog component is a controlled component that can be used to display content in a modal.
In order to display the DatePicker calendar in the correct layer, you need to add the withModal prop to the DatePickerCalendar component.
The Dialog component supports different sizes. You can set the size prop to xs to lg, or full.
You can utilize the primitive components or the css prop to customize the dialog.
| Component | Description |
|---|---|
| DialogProvider | The main state context for the dialog. |
| DialogTrigger | The trigger element that opens the dialog. |
| DialogBackdrop | The backdrop that covers the page when the dialog is open. |
| DialogPositioner | The container that positions the dialog content. |
| DialogContent | The content that is shown within the dialog. |
| DialogHeading | The heading title of the dialog. |
| DialogDescription | The description of the dialog. |
| DialogCloseTrigger | The trigger element that closes the dialog. |
| DialogCloseIconTrigger | The trigger element that closes the dialog with an "x" icon. |
The Dialog component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| size | sm | This size of the Dialog. |
The Dialog component also accepts all the props of the DialogContent primitive props
The DialogParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The DialogRoot primitive and context provider for the family. |
| Trigger | The DialogTrigger trigger element that opens the dialog. |
| Backdrop | The DialogBackdrop that covers the page when the dialog is open. |
| Positioner | The DialogPositioner and container that positions the dialog content. |
| Content | The DialogContent that is shown within the dialog. |
| Heading | The DialogHeading which is the heading of the dialog. |
| Description | The DialogDescription and description of the dialog. |
| CloseTrigger | The DialogCloseTrigger trigger element that closes the dialog. |
On this page