CTA Modal
Call to action modals are used to provide similar action options at once.
- Use CTA modals to make sure users act on information
- Maxium of 2 actions
- Should be dedicated to completing a task
- Commonly used as an alternative to the Action Menu
Example
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Use sparingly
CTA Modals should be used sparingly, and only for important decisions or actions.
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 { CTAModal, useCTAModal } from '@cerberus/react'Usage
Customization
The CTAModal is an abstraction of the Modal family. You can customize the modal by using the Modal component directly.
API
export interface ShowCTAModalOptions { heading: string description?: string icon?: ReactNode actions: { text: string onClick: Required<ButtonHTMLAttributes<HTMLButtonElement>['onClick']> }[]}
export interface CTAModalProviderValue { show: (options: ShowCTAModalOptions) => void}
define function CTAModal(props: PropsWithChildren<{}>): ReactNodeShow Method Options
The show method accepts the following options:
| Name | Default | Description |
|---|---|---|
| heading | '' | The heading of the modal. |
| description | '' | The description of the modal. |
| icon | undefined | The icon to display in the modal. |
| actions | [] | The actions to display in the modal. Max of 2 allowed. |
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