Concepts
OverviewCompositionTestingLayout
Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridLink OverlayScrollableStackWrapComponents
AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltipUtilities
Feature FlagsForLocal StoragePortalShowsplitPropsThemePrompt Modal
The Prompt Modal is used to prompt the user for input, such as a passkey or confirmation for destructive actions.
import { PromptModal, usePromptModal } from '@cerberus/react'Usage
Non-destructive
Destructive
Customization
For customizing the Prompt Modal, we recommend extending the confirmModal slot recipe provided by the @cerberus/panda-preset package in your config.
API
export interface PromptModalProviderValue { show: (options: PromptModalOptions) => Promise<string>}
define function PromptModal(props: PropsWithChildren<{}>): ReactNodeShow Method Options
The show method accepts the following options:
| Name | Default | Description |
|---|---|---|
| kind | non-destructive | The variant used to theme the modal. |
| heading | The heading of the modal. | |
| description | The description of the modal. | |
| key | A string key to test the user input against. | |
| actionText | The text for the action button. | |
| cancelText | The text for the cancel button. |
On this page