CTA Modal
Call to action modals are used to provide similar action options at once.
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.
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.
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.
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.