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
Basic Usage
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.
Customization
You can utilize the primitive components to customize the accordion.
| 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
Sizes
The Dialog component takes a size prop that can be used to set the width of the dialog. The default size is md.
interface DialogProps { size?: 'sm' | 'md' | 'lg' | 'full'}Dialog Title
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