Dialog
Dialogs provide important prompts in a user flow.
- Use dialogs to make sure users act on information
- Should be dedicated to completing a single task
- Can also display information relevant to the task
- Commonly used in high-risk actions like deleting progress
Examples
Dialog Title
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Custom Modal Usage
Dialog Title
Use sparingly
Dialogs should be used sparingly, and only for important decisions or actions that cannot be undone. They should not be used for trivial actions or actions that can be easily undone.
For most actions, a simple Notification message is sufficient to inform the user of the result of their action (or allow them to "undo" it).
On this page
import { Dialog, DialogTrigger, DialogHeading, DialogDescription, DialogCloseTrigger, DialogCloseIconTrigger,} 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.
Dialog Title
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.
Dialog Title
Dialog Title
Dialog Title
Dialog Title
Dialog Title
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. |
C3rB3RuS R00lz!
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. |
On this page
Use Cases
- Users should be able to:
- Open and close a dialog
- Provide and submit other inputs if the dialog is interactive, such as a text field or selectable list
- Keep focus within the dialog until it is closed
Interaction & Style
Dialogs are purposefully interruptive. This means they appear in front of app content and disrupt the flow of content for users who may, for example, be using a screen reader to navigate the page.
As such, dialogs should be used sparingly and only to provide critical information. Less critical information should be presented in a non-blocking way within the flow of app content.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on the next interactive element contained in the modal, or the first element if focus is currently on the last element |
| Shift + Tab | Focus lands on the previous interactive element contained in the modal, or the last element if focus is currently on the first element |
| Space / Enter | Triggers or commits the action of the focused element |
| Esc | Closes the modal and returns focus to the element that triggered the modal |
On this page