Confirm Modal
Confirm Modal allows people to confirm an important decision.
- Use confirm modals to make sure users act on information
- Two types: destructive and non-destructive.
- Should be dedicated to completing a single task
- Commonly used to confirm high-risk actions like deleting progress or data
Example
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Non-destructive Usage
Use sparingly
Confirm modals 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).
Destructive Usage
On this page
import { ConfirmModal, useConfirmModal } from '@cerberus/react'Usage
Non-destructive
Destructive
Customization
For customizing the Confirm Modal, we recommend extending the confirmModal slot recipe provided by the @cerberus/panda-preset package in your config.
API
export type ShowConfirmModalOptions = | NonDestructiveConfirmModalOptions | DestructiveConfirmOptions
export interface ConfirmModalProviderValue { show: (options: ShowConfirmModalOptions) => Promise<boolean>}
define function ConfirmModal(props: PropsWithChildren<{}>): ReactNodeShow Method Options
The show method accepts the following options:
| Name | Default | Description |
|---|---|---|
| kind | non-destructive | The variant used to theme the modal. |
| heading | The heading of the modal. | |
| description | The description of the modal. For non-destructive modals only, can be a ReactNode. | |
| actionText | The text for the action button. | |
| cancelText | The text for the cancel button. |
On this page
Use Cases
- Users should be able to:
- Open and close a modal
- Provide and submit other inputs if the modal is interactive, such as a text field or selectable list
- Keep focus within the modal until it is closed
Interaction & Style
Modals 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, modals 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