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
- Maximum of 2 actions
- Should be dedicated to completing a task
- Commonly used as an alternative to the Action Menu
Example
With links for actions
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
- External links should display an "External Link" icon
- Internal links should display an "Arrow Right" icon
Action Example
Links Example
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, createCTAModalActions } from '@cerberus/react'Usage
To use the CTAModal, wrap your component with the CTAModal provider and use the useCTAModal hook to access the show method.
To create your actions, use the createCTAModalActions function.
With Links
To use links instead of buttons, pass your link components to the createCTAModalActions function.
Customization
The CTAModal is an abstraction of the Dialog primitives and does not provide any additional customization. To build your own CTAModal, use the Dialog components.
API
The CTAModal component is an abstraction of the Dialog primitives and does not accept any props.
Show 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. Requires the use of createCTAModalActions utility. |
Utilities
The createCTAModalActions utility accepts an array of objects with the following properties or ReactNodes:
Action
| Name | Default | Description |
|---|---|---|
| text | '' | The text of the action. |
| handleClick | undefined | The click handler of the action. |
Link
Pass your Array of link components to the createCTAModalActions function.
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