Dialog

Dialogs provide important prompts in a user flow.

1
import {
2
  Dialog,
3
  DialogTrigger,
4
  DialogHeading,
5
  DialogDescription,
6
  DialogCloseTrigger,
7
  DialogCloseIconTrigger,
8
} from '@cerberus/react'

Usage

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.

With DatePicker

In order to display the DatePicker calendar in the correct layer, you need to add the withModal prop to the DatePickerCalendar component.

Sizes

The Dialog component supports different sizes. You can set the size prop to xs to lg, or full.

Primitives

You can utilize the primitive components 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.

API

Props

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

Parts

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.

1
import {
2
  Dialog,
3
  DialogTrigger,
4
  DialogHeading,
5
  DialogDescription,
6
  DialogCloseTrigger,
7
  DialogCloseIconTrigger,
8
} from '@cerberus/react'

Usage

With DatePicker

In order to display the DatePicker calendar in the correct layer, you need to add the withModal prop to the DatePickerCalendar component.

Sizes

The Dialog component supports different sizes. You can set the size prop to xs to lg, or full.

Primitives

You can utilize the primitive components 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.

API

Props

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

Parts

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.

1
import {
2
  Dialog,
3
  DialogTrigger,
4
  DialogHeading,
5
  DialogDescription,
6
  DialogCloseTrigger,
7
  DialogCloseIconTrigger,
8
} from '@cerberus/react'

Usage

With DatePicker

In order to display the DatePicker calendar in the correct layer, you need to add the withModal prop to the DatePickerCalendar component.

Sizes

The Dialog component supports different sizes. You can set the size prop to xs to lg, or full.

Primitives

You can utilize the primitive components 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.

API

Props

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

Parts

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.

1
import {
2
  Dialog,
3
  DialogTrigger,
4
  DialogHeading,
5
  DialogDescription,
6
  DialogCloseTrigger,
7
  DialogCloseIconTrigger,
8
} from '@cerberus/react'

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.

API

Props

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

Parts

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.