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

The ConfirmModal component is a controlled abstraction of the Dialog.

Destructive

To show a destructive confirm modal, set the kind prop in the options to 'destructive'.

No Avatar

To change the visibility of the avatar, set showAvatar to false in the options.

Primitives

The layers of the ConfirmModal which can be used to create a fully custom solution are the same as the Dialog.

Data Attributes

The primitives additionally use the same data attributes as the Dialog.

API

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
`showAvatar`	`true`	Whether to show the avatar in the modal.
`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

Loading...

Loading...

Loading...

Loading...

'use client'

import { HStack } from '@/styled-system/jsx'
import {
  Button,
  ConfirmModal,
  Show,
  Text,
  useConfirmModal,
} from '@cerberus/react'
import { useSignal } from '@cerberus/signals'
import Link from 'next/link'

export function BasicDemo() {
  return (
    <ConfirmModal>
      <NonDestructiveFeature />
    </ConfirmModal>
  )
}

function NonDestructiveFeature() {
  const confirm = useConfirmModal()
  const [consent, setConsent] = useSignal<boolean | null>(null)

  const handleClick = 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. <Link href="#">Learn more</Link>.
        </>
      ),
      actionText: 'Yes, add payment method',
      cancelText: 'No, cancel',
    })
    setConsent(userConsent)
  }

  return (
    <HStack gap="md">
      <HStack gap="md">
        <Button onClick={handleClick}>Confirm</Button>
      </HStack>

      <Show when={consent !== null}>
        <Text as="small" textStyle="label-sm">
          User consent:{' '}
          <Text as="span" fontSize="xs" textStyle="mono-xs">
            {JSON.stringify(consent)}
          </Text>
        </Text>
      </Show>
    </HStack>
  )
}

'use client'

import { HStack } from '@/styled-system/jsx'
import {
  Button,
  ConfirmModal,
  Show,
  Text,
  useConfirmModal,
} from '@cerberus/react'
import { useSignal } from '@cerberus/signals'

export function DestructiveDemo() {
  return (
    <ConfirmModal>
      <DestructiveFeature />
    </ConfirmModal>
  )
}

function DestructiveFeature() {
  const confirm = useConfirmModal()
  const [consent, setConsent] = useSignal<boolean | null>(null)

  const handleClick = async () => {
    const userConsent = await confirm.show({
      kind: 'destructive',
      heading: 'Remove payment method?',
      description: 'This is a permanent action and cannot be undone.',
      actionText: 'Yes, delete',
      cancelText: 'Cancel',
    })
    setConsent(userConsent)
  }

  return (
    <HStack gap="md">
      <HStack gap="md">
        <Button palette="danger" onClick={handleClick}>
          Remove
        </Button>
      </HStack>

      <Show when={consent !== null}>
        <Text as="small" textStyle="label-sm">
          User consent:{' '}
          <Text as="span" fontSize="xs" textStyle="mono-xs">
            {JSON.stringify(consent)}
          </Text>
        </Text>
      </Show>
    </HStack>
  )
}

'use client'

import { HStack } from '@/styled-system/jsx'
import {
  Button,
  ConfirmModal,
  Show,
  Text,
  useConfirmModal,
} from '@cerberus/react'
import { useSignal } from '@cerberus/signals'
import Link from 'next/link'

export function NoAvatarDemo() {
  return (
    <ConfirmModal>
      <Feature />
    </ConfirmModal>
  )
}

function Feature() {
  const confirm = useConfirmModal()
  const [consent, setConsent] = useSignal<boolean | null>(null)

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

  return (
    <HStack gap="md">
      <HStack gap="md">
        <Button onClick={handleClick}>Confirm</Button>
      </HStack>

      <Show when={consent !== null}>
        <Text as="small" textStyle="label-sm">
          User consent:{' '}
          <Text as="span" fontSize="xs" textStyle="mono-xs">
            {JSON.stringify(consent)}
          </Text>
        </Text>
      </Show>
    </HStack>
  )
}