DangerZone

A destructive action, fenced off and optionally typed to confirm.

import { DangerZone } from '@textui/widgets';

<DangerZone
  description="Deletes the namespace and everything in it."
  actionLabel="Delete namespace"
  confirmText="billing"
  onAction={() => {}}
/>

Props

| Prop | Type | Default | | | — | — | — | — | | title | string | i18n.t('textui.dangerZone.title', undefined, 'Danger zone') | | | description | string | | | | actionLabel | string | required | | | onAction | () => void | | | | confirmText | string | | Require typing this exact text before the action is enabled. |

Plus everything on BoxProps.

confirmText is the part worth using: the action stays disabled until the reader types that exact string. For anything irreversible that is a better guard than a confirmation dialog, which people dismiss by reflex.

Put it last. A destructive action among ordinary fields is one mis-aimed keystroke from happening.

See also

• Editing keys and selection - the keys, the selection and the clipboard
• Dialog - confirming something less final
• FormActions - the ordinary submit row