Prototype Library

Danger Zone

A bordered section that corrals one or more destructive actions behind clear danger-colored chrome — a tinted background, danger border, and danger-colored heading — so a misclick is harder to make by accident.

Inherited .astro import EsaDangerZone from '@esa/ecology/esa-danger-zone.astro';

Preview

Danger Zone

Deleting this project also removes its annotations and history. This cannot be undone.

<EsaDangerZone description="Deleting this project also removes its annotations and history. This cannot be undone.">
  <EsaButton variant="danger">Delete project</EsaButton>
</EsaDangerZone>

Multiple actions

Project any number of destructive actions into the default slot — they wrap on a shared gap.

Irreversible actions

These operations cannot be undone.

<EsaDangerZone heading="Irreversible actions" description="These operations cannot be undone.">
  <EsaButton variant="danger" appearance="outline">Archive</EsaButton>
  <EsaButton variant="danger">Delete</EsaButton>
</EsaDangerZone>

Heading only

The description is optional — omit it for a compact zone.

Danger Zone

<EsaDangerZone>
  <EsaButton variant="danger">Revoke access</EsaButton>
</EsaDangerZone>

API

PropTypeDefaultDescription
heading string 'Danger Zone' Section heading, rendered in danger color and wired to the group via aria-labelledby.
description string — Optional supporting copy explaining the consequence of the actions.

The default slot holds the destructive action(s) or content — typically one or more esa-button elements with variant="danger".

Accessibility

  • Renders a <section role="group"> labelled by its heading via aria-labelledby, so assistive tech announces the grouping and its name.
  • The heading is a real <h3> — keep the document outline in mind and override the level in your own markup if the surrounding context needs it.
  • Danger emphasis is conveyed by a tinted background, full border, and heading color — never by color alone for meaning; the heading text itself names the intent.
  • Pair each destructive action with a confirmation step (e.g. a confirm dialog) so the zone is the warning and the dialog is the gate.