Skip to content

DangerZone

The last card on a detail or settings page, and the only home of destructive actions.

FeedbackServer-rendered

Examples

Remove a server

Each row says what happens and holds one danger button (usually a DialogTrigger for a ConfirmDialog).

Light

Danger zone

  • Remove Linear

    Agents lose its 24 tools at once. Its sign-in is revoked and its settings are deleted.

Dark

Danger zone

  • Remove Linear

    Agents lose its 24 tools at once. Its sign-in is revoked and its settings are deleted.

Example
<DangerZone
  rows={[{
    title: 'Remove Linear',
    description: 'Agents lose its 24 tools at once. Its sign-in is revoked and its settings are deleted.',
    action: <DialogTrigger target="remove-server" variant="danger">Remove server</DialogTrigger>,
  }]}
/>

Usage

Usage
import { DangerZone } from '@switchboard/ui'

<DangerZone rows={[{ title, description, action }]} />  // or <Card tone="danger">

Props

Every component also takes mix, for css() and mixins applied after its own style.

DangerZone

DangerZone props
PropTypeDefaultDescription
rows*{ title; description?; action: RemixNode }[]–One destructive action per row.
titleRemixNode'Danger zone'Card heading (h2).

Also accepts every <section> attribute. Card also takes tone="danger" directly.

Accessibility

  • The heading and the button text name the action; the danger tint is never the only signal.
  • Confirm with a ConfirmDialog (role="alertdialog"), typing the name for irreversible actions.

Guidance

Do

  • Put it last on the page.
  • Say the consequence in the description.

Don’t

  • Put destructive actions in row menus as well.
  • Use it for reversible actions (disable, pause).