• Docs
  • Blog

    • 0.25.1

    • light

      dark

      system

      Switch mode

    • Cerberus

      Acheron

      Elysium

    Get Started
    Components
    Styling
    Theming

    Concepts

    OverviewCompositionTesting

    Layout

    Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridLink OverlayScrollableStackWrap

    Components

    AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

    Utilities

    Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFrameHighlightJSON Tree ViewLocaleLocal StoragePortalPresenceShowsplitPropsTheme

    Confirm Modal

    The Confirm Modal component provides a way to confirm actions with users, ensuring they are aware of the consequences before proceeding.

    • npm
    • source
    • recipe
    • Ark
    import { ConfirmModal, useConfirmModal } from '@cerberus/react'

    Usage

    Non-destructive

    Copy
    some-feature.tsx
    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>
      )
    }
    some-page.tsx
    function SomePage() {
      return(
        <ConfirmModal>
          <SomeFeature />
        </ConfirmModal>
      )
    }

    Destructive

    Copy
    some-page.tsx
    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

    Copy
    some-feature.tsx
    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>
      )
    }
    some-page.tsx
    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:

    NameDefaultDescription
    kindnon-destructiveThe variant used to theme the modal.
    headingThe heading of the modal.
    descriptionThe description of the modal. For non-destructive modals only, can be a ReactNode.
    actionTextThe text for the action button.
    cancelTextThe text for the cancel button.

    On this page

    • Edit this page on Github
    Cerberus Design System | Docs