Concepts
OverviewCompositionTestingLayout
Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridLink OverlayScrollableStackWrapComponents
AccordionAdmonitionAvatarButtonCheckboxComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsProgressPrompt ModalRadioRatingSelectSwitchTableTabsTagTextTextareaToggleTooltipUtilities
Feature FlagsForLocal StoragePortalShowsplitPropsTheme1import { 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