Confirm Modal

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'

Usage

Non-destructive

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

function SomeFeature() {
  const confirm = useConfirmModal()

  const handleClick = useCallback(async () => {
    const userConsent = await confirm.show({
      heading: 'Add new payment method?',
      description: (
        <>
          This will add a new payment method to your account to be billed for
          future purchases.{' '}
          <a
            className={css({
              textStyle: 'link',
            })}
            href="#"
          >
            Learn more
          </a>
          .
        </>
      ),
      actionText: 'Yes, add payment method',
      cancelText: NOPE,
    })
    setConsent(userConsent)
  }, [confirm])

  return (
    <Button onClick={handleConfirm}>Confirm</Button>
  )
}

function SomePage() {
  return(
    <ConfirmModal>
      <SomeFeature />
    </ConfirmModal>
  )
}

Destructive

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

function SomeFeature() {
  const confirm = useConfirmModal()

  const handleConfirm = useCallback(async () => {
    const consent = await confirm.show({
      kind: 'destructive',
      heading: 'Remove payment method?',
      description: 'This is a permanent action and cannot be undone.',
      actionText: 'Yes, delete',
      cancelText: 'No, cancel',
    })
    // do something with consent
  }, [])

  return (
    <Button palette="danger" onClick={handleConfirm}>Delete card</Button>
  )
}

function SomePage() {
  return(
    <ConfirmModal>
      <SomeFeature />
    </ConfirmModal>
  )
}

No Avatar

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

function SomeFeature() {
  const confirm = useConfirmModal()

  const handleClick = useCallback(async () => {
    const userConsent = await confirm.show({
      heading: 'Add new payment method?',
      description: (
        <>
          This will add a new payment method to your account to be billed for
          future purchases.{' '}
          <a
            className={css({
              textStyle: 'link',
            })}
            href="#"
          >
            Learn more
          </a>
          .
        </>
      ),
      actionText: 'Yes, add payment method',
      cancelText: NOPE,
      showAvatar: false,
    })
    setConsent(userConsent)
  }, [confirm])

  return (
    <Button onClick={handleConfirm}>Confirm</Button>
  )
}

function SomePage() {
  return(
    <ConfirmModal>
      <SomeFeature />
    </ConfirmModal>
  )
}

Primitives

The ConfirmModal is an abstraction of the Dialog primitives and does not provide any additional customization. To build your own ConfirmModal, use the Dialog components.

API

export type ShowConfirmModalOptions =
  | NonDestructiveConfirmModalOptions
  | DestructiveConfirmOptions

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

define function ConfirmModal(props: PropsWithChildren<DialogRootProps>): ReactNode

ConfirmModal

The ConfirmModal component is an abstraction of the Dialog and accepts the same props as the Dialog component.

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.

On this page

Edit this page on Github

Usage

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

function SomeFeature() {
  const confirm = useConfirmModal()

  const handleClick = useCallback(async () => {
    const userConsent = await confirm.show({
      heading: 'Add new payment method?',
      description: (
        <>
          This will add a new payment method to your account to be billed for
          future purchases.{' '}
          <a
            className={css({
              textStyle: 'link',
            })}
            href="#"
          >
            Learn more
          </a>
          .
        </>
      ),
      actionText: 'Yes, add payment method',
      cancelText: NOPE,
    })
    setConsent(userConsent)
  }, [confirm])

  return (
    <Button onClick={handleConfirm}>Confirm</Button>
  )
}

function SomePage() {
  return(
    <ConfirmModal>
      <SomeFeature />
    </ConfirmModal>
  )
}

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

function SomeFeature() {
  const confirm = useConfirmModal()

  const handleConfirm = useCallback(async () => {
    const consent = await confirm.show({
      kind: 'destructive',
      heading: 'Remove payment method?',
      description: 'This is a permanent action and cannot be undone.',
      actionText: 'Yes, delete',
      cancelText: 'No, cancel',
    })
    // do something with consent
  }, [])

  return (
    <Button palette="danger" onClick={handleConfirm}>Delete card</Button>
  )
}

function SomePage() {
  return(
    <ConfirmModal>
      <SomeFeature />
    </ConfirmModal>
  )
}

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

function SomeFeature() {
  const confirm = useConfirmModal()

  const handleClick = useCallback(async () => {
    const userConsent = await confirm.show({
      heading: 'Add new payment method?',
      description: (
        <>
          This will add a new payment method to your account to be billed for
          future purchases.{' '}
          <a
            className={css({
              textStyle: 'link',
            })}
            href="#"
          >
            Learn more
          </a>
          .
        </>
      ),
      actionText: 'Yes, add payment method',
      cancelText: NOPE,
      showAvatar: false,
    })
    setConsent(userConsent)
  }, [confirm])

  return (
    <Button onClick={handleConfirm}>Confirm</Button>
  )
}

function SomePage() {
  return(
    <ConfirmModal>
      <SomeFeature />
    </ConfirmModal>
  )
}

API

export type ShowConfirmModalOptions =
  | NonDestructiveConfirmModalOptions
  | DestructiveConfirmOptions

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

define function ConfirmModal(props: PropsWithChildren<DialogRootProps>): ReactNode

The ConfirmModal component is an abstraction of the Dialog and accepts the same props as the Dialog component.

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.