Confirm Modal

Confirm Modal allows people to confirm an important decision.

1
import { ConfirmModal, useConfirmModal } from '@cerberus/react'

Usage

Non-destructive

Destructive

Customization

For customizing the Confirm Modal, we recommend extending the confirmModal slot recipe provided by the @cerberus/panda-preset package in your config.

API

export type ShowConfirmModalOptions =
  | NonDestructiveConfirmModalOptions
  | DestructiveConfirmOptions

export interface ConfirmModalProviderValue {
  show: (options: ShowConfirmModalOptions) => Promise<boolean>
}

define function ConfirmModal(props: PropsWithChildren<{}>): ReactNode

Show 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. For non-destructive modals only, can be a ReactNode.
actionText		The text for the action button.
cancelText		The text for the cancel button.

1
import { ConfirmModal, useConfirmModal } from '@cerberus/react'

Usage

Non-destructive

Destructive

Customization

For customizing the Confirm Modal, we recommend extending the confirmModal slot recipe provided by the @cerberus/panda-preset package in your config.

API

export type ShowConfirmModalOptions =
  | NonDestructiveConfirmModalOptions
  | DestructiveConfirmOptions

export interface ConfirmModalProviderValue {
  show: (options: ShowConfirmModalOptions) => Promise<boolean>
}

define function ConfirmModal(props: PropsWithChildren<{}>): ReactNode

Show 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. For non-destructive modals only, can be a ReactNode.
actionText		The text for the action button.
cancelText		The text for the cancel button.

1
import { ConfirmModal, useConfirmModal } from '@cerberus/react'

Usage

Non-destructive

Destructive

Customization

For customizing the Confirm Modal, we recommend extending the confirmModal slot recipe provided by the @cerberus/panda-preset package in your config.

API

export type ShowConfirmModalOptions =
  | NonDestructiveConfirmModalOptions
  | DestructiveConfirmOptions

export interface ConfirmModalProviderValue {
  show: (options: ShowConfirmModalOptions) => Promise<boolean>
}

define function ConfirmModal(props: PropsWithChildren<{}>): ReactNode

Show 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. For non-destructive modals only, can be a ReactNode.
actionText		The text for the action button.
cancelText		The text for the cancel button.

1
import { ConfirmModal, useConfirmModal } from '@cerberus/react'

Usage

Non-destructive

Destructive

Customization

For customizing the Confirm Modal, we recommend extending the confirmModal slot recipe provided by the @cerberus/panda-preset package in your config.

API

export type ShowConfirmModalOptions =
  | NonDestructiveConfirmModalOptions
  | DestructiveConfirmOptions

export interface ConfirmModalProviderValue {
  show: (options: ShowConfirmModalOptions) => Promise<boolean>
}

define function ConfirmModal(props: PropsWithChildren<{}>): ReactNode

Show 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. For non-destructive modals only, can be a ReactNode.
actionText		The text for the action button.
cancelText		The text for the cancel button.