Danger Zone

Preview

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

Multiple actions

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

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

Heading only

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

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

API

The default slot holds the destructive action(s) or content — typically one or more esa-button elements with color="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.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.