# DangerZone

> The last section of a settings page, holding the actions that cannot be undone.

```ts
import { DangerZone } from "@sdxc/ui/app";
```

Renders the section: a heading over a card with a danger border whose rows are
DangerZone.Actions.

## Examples

```tsx
<DangerZone title="Danger zone">
	<DangerZone.Action id="delete-team" title="Delete team" buttonLabel="Delete team"
		consequences={["14 monitors stop checking", "Status pages go offline"]}
		confirm={{ title: "Delete team?", confirmLabel: "Delete team", cancelLabel: "Cancel", form: { action: "/team/delete" } }} />
</DangerZone>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `title` | `RemixNode` | The section's heading, such as "Danger zone". |
| `description?` | `RemixNode` |  |

Also accepts everything in `Omit<TagProps<"section">, "title">`.


### DangerZone.Action

Renders one irreversible action: its title, description and consequence list, then a danger button that opens its Confirm, under the text or at the row's end as `actionPlacement` says.

| Prop | Type | Description |
| --- | --- | --- |
| `id` | `string` | The confirm dialog's `id`, which the row's button opens. |
| `title` | `RemixNode` | What the action does, such as "Delete team". |
| `description?` | `RemixNode` |  |
| `consequences?` | `ReadonlyArray<RemixNode>` | What is lost, one item each: "14 monitors stop checking", "Invoices stay in Billing". |
| `actionPlacement?` | `ActionPlacement` | Where the button sits on a wide card: under the text, for a row that lists its consequences, or at the row's end on the title's line, for a short one. A narrow card always puts it under the text. |
| `buttonLabel` | `RemixNode` | The row's button text; name the action, such as "Delete team". |
| `confirm` | `Omit<Confirm.Props, "id">` | The confirmation the button opens. Name the item in the title and description and the action on the confirm button; add `typeToConfirm` for the biggest deletions. |

Also accepts everything in `Omit<TagProps<"div">, "title">`.