Text Confirm Dialog

Text Confirm Dialog adds a deliberate “speed bump” before a highly destructive action by requiring the user to type an exact confirmation string before the confirm action is enabled. It wraps the Shadcn Dialog component and is intended for actions that must not be triggered accidentally.

Use Text Confirm Dialog for irreversible operations such as deleting buckets, projects, or other critical resources where an explicit signal of user intent is required beyond a button click.

For non-destructive or less critical confirmations, use Alert Dialog or Confirmation Modal instead. See Modality for guidance on choosing the appropriate dialog pattern.

Usage

'use client'

import { useState } from 'react'
import { Button } from 'ui'
import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'

export default function TextConfirmDialogDemo() {
  const [visible, setVisible] = useState(false)
  const bucketName = 'profile-pictures'

  return (
    <>
      <Button type="danger" onClick={() => setVisible(true)}>
        Show Text Confirm Dialog
      </Button>

      <TextConfirmModal
        visible={visible}
        size="small"
        variant="destructive"
        title="Delete bucket"
        confirmPlaceholder={bucketName}
        confirmString={bucketName}
        confirmLabel="Delete bucket"
        onConfirm={() => setVisible(false)}
        onCancel={() => setVisible(false)}
      >
      </TextConfirmModal>
    </>
  )
}

Props

• confirmString: The exact string the user must type to enable the confirm action (leading/trailing whitespace is trimmed)
• confirmPlaceholder: Placeholder text shown in the confirmation input
• variant: Visual intent of the dialog (default, destructive, or warning)
• Other standard modal props inherited from the underlying Dialog component

Examples

Cancel button

Children

Size