Delete with a confirmation

Delete workspace

Permanently deletes this workspace, including flows, contacts, visitors, messages and API keys. This cannot be undone.

Show code

<KbDangerZone title="Delete workspace" description="...">
  <KbButton variant="danger">Delete workspace…</KbButton>
</KbDangerZone>

When to use

Use it once per page, last, for an action that destroys data.
Say what will be lost. Ask for a second click before the danger button acts.
Do not use it for Cancel or for reversible changes. Red means destruction only.

Clear rules

Removes every page rule. You can add them again.

DoName the action and what it removes.

Warning

Careful.

Don'tUse vague words or a button that does not say what it does.

Import

import { KbDangerZone } from "@/components/ui/KbDangerZone";

<KbDangerZone title="Delete workspace" description="Deletes flows, contacts and keys. This cannot be undone.">
  <KbButton variant="danger">Delete workspace</KbButton>
</KbDangerZone>

Props

KbDangerZone
Prop	Type	Default	What it does
`title`	`string`	None	The action, in verb and noun.
`description`	`ReactNode`	None	What will be lost.
`children`	`ReactNode`	None	The danger button, or the confirm and cancel pair.

Renders a labelled section so it is reachable by landmark.
Red is paired with the title and description words, never colour alone.
The danger button keeps the shared focus ring.