Import
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.
Note
CTAModal is considered a dialog template. This means it's a pre-configured layout that is not fully customizable by nature. If you want to fully customize the modal, use the Dialog instead.
With Links
To use links instead of buttons, pass your link components to the createCTAModalActions function.
With Content
To use a custom content component, pass your custom component to the content prop of the show method.
Primitives
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 and accepts the same
props as the Dialog component.
Show Method Options
The show method accepts the following options:
| Name | Default | Description |
|---|---|---|
heading | void | The heading of the modal. |
description | `void`` | 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.