Text Confirm Dialog

Docs

Text Confirm Dialog

A modal dialog that adds a deliberate confirmation step for highly destructive actions.

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.

'use client'
 
import { useState } from 'react'
import { Button } from 'ui'
import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
export 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"
        loading={false}
        onConfirm={() => setVisible(false)}
        onCancel={() => setVisible(false)}
      >
        <p className="text-sm">
          Your bucket <span className="font-medium text-foreground">{bucketName}</span> and all of
          its contents will be permanently deleted. This action cannot be undone.
        </p>
      </TextConfirmModal>
    </>
  )
}

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)}
      >
        {/* Optional body content */}
      </TextConfirmModal>
    </>
  )
}

Props

confirmString: The exact string the user must type to enable the confirm action
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

Text Confirm Dialog

Usage

Props

Examples

Cancel button

Children

Size