The Confirm Modal component provides a way to confirm actions with users, ensuring they are aware of the consequences before proceeding.
import { ConfirmModal, useConfirmModal } from '@cerberus/react'For customizing the Confirm Modal, we recommend extending the confirmModal slot recipe provided by the @cerberus/panda-preset package in your config.
export type ShowConfirmModalOptions = | NonDestructiveConfirmModalOptions | DestructiveConfirmOptions
export interface ConfirmModalProviderValue { show: (options: ShowConfirmModalOptions) => Promise<boolean>}
define function ConfirmModal(props: PropsWithChildren<{}>): ReactNodeThe 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. For non-destructive modals only, can be a ReactNode. | |
| actionText | The text for the action button. | |
| cancelText | The text for the cancel button. |
On this page