Settings
Danger zone
The destructive action panel, with an optional type-to-confirm gate before it will fire.
Available
Ports as-is
Examples
Rendered live from the maintained Storybook story. Lantern stores only the story id and embeds Storybook rather than duplicating the component or its demo.
Danger zone
Rendered live from Storybook
Storybook must be running for this to load — bun run start:storybook from the monorepo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.
Props
The component's public API, read from its TypeScript source. Descriptions come from TSDoc on the prop, so this table cannot drift from the component.
| Prop | Type | Default | Description |
|---|---|---|---|
title | React.ReactNode | "Danger zone" | Block heading. Defaults to "Danger zone"; integration panes title it after the action ("Disconnect Google Analytics 4"). |
description* | React.ReactNode | — | What the action destroys, and whether it is reversible. |
actionLabel* | React.ReactNode | — | Label on the destructive button — "Delete space", "Disconnect". |
onAction | () => void | — | Fired on the button when unconfirmed, or on the dialog's confirm when `requireConfirmation`. |
spacing | "sm" | "md" | "sm" | Gap under the description: `sm` = `mb-3` (integration/disconnect panes), `md` = `mb-4` (space deletion). |
actionClassName | string | — | Extra classes on the destructive button — GA4 and the other analytics panes use `h-9 text-xs`. |
className | string | — | Undocumented — add TSDoc to the prop in the library. |
requireConfirmation | boolean | false | Route the action through an AlertDialog confirmation step. |
confirmTitle | React.ReactNode | — | Dialog heading. Falls back to `actionLabel`. |
confirmDescription | React.ReactNode | — | Dialog body copy. Falls back to `description`. |
confirmPhrase | string | — | Type-to-confirm phrase (the space name, on space deletion). When set, the dialog's confirm button stays disabled until the field matches exactly. |
confirmPhraseLabel | React.ReactNode | — | Prompt above the type-to-confirm field. |
confirmPhrasePlaceholder | string | "Type to confirm" | Undocumented — add TSDoc to the prop in the library. |
initialConfirmText | string | "" | Seeds the type-to-confirm field so the enabled dialog is a static story. |
confirmActionLabel | React.ReactNode | "Delete" | Undocumented — add TSDoc to the prop in the library. |
confirmCancelLabel | React.ReactNode | "Cancel" | Undocumented — add TSDoc to the prop in the library. |
defaultConfirmOpen | boolean | false | Uncontrolled open state for the confirmation dialog — use for open-on-mount stories. |
confirmOpen | boolean | — | Controlled open state. Supply with `onConfirmOpenChange`. |
onConfirmOpenChange | (open: boolean) => void | — | Undocumented — add TSDoc to the prop in the library. |
Reference
Transcribed from the component audit. If this disagrees with the source, the source is right.
- Source
src/components/settings/DangerZone.tsx- Portability
- Copies across unchanged — only the utils import path moves.
- Variants
spacing: sm | mdrequireConfirmation on/off- States to cover
plain actionconfirmation dialogphrase not yet matchedphrase matched- Notes
- The type-to-confirm gate is now a component rather than a pattern repeated per screen — see the Patterns shortlist.