ConfirmDialog

Open in Playground

A confirm / cancel dialog built on Modal. onConfirm runs the action and onClose dismisses it. While busy the confirm button shows a spinner (with busyLabel) and Escape, the backdrop and close are ignored. Use tone="danger" for destructive actions; error shows a message inside the dialog.

Typed confirmation and width. confirmDisabled keeps the confirm button off until the user has done what you ask (type a phrase, tick a box), maxWidth takes a Tailwind max-w-* class for a wider dialog, and confirmVariant restyles the confirm button.

Props

  • openboolean

    Whether the dialog is shown.

  • onClose() => void

    Called when cancelled or dismissed.

  • onConfirm() => void

    Called when the confirm button is pressed.

  • titleReactNode

    Header title.

  • tone'default' | 'danger'
    Default: 'default'

    Use "danger" for destructive actions.

  • busyboolean
    Default: false

    Shows a spinner on the confirm button and ignores dismissal.

  • confirmLabelstring
    Default: 'Confirm'

    Confirm button text.

  • busyLabelstring

    Confirm button text while busy.

  • cancelLabelstring
    Default: 'Cancel'

    Cancel button text.

  • confirmDisabledboolean
    Default: false

    Disables the confirm button, e.g. until the user types a phrase.

  • confirmVariantButtonVariant

    Style of the confirm button; defaults to "danger" for the danger tone, otherwise "default".

  • maxWidthstring
    Default: 'max-w-md'

    Tailwind max-width class for the dialog.

  • errorstring

    Error message shown in the dialog.

  • childrenReactNode

    Content.