DangerZone

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

Danger zone

Transfer ownership

Make another admin the owner of Acme Ops. You stay on as an admin.

Delete team

Permanently delete Acme Ops for everyone.

14 monitors stop checking right away
3 status pages go offline
90 days of check history are deleted

View code

tsx

<DangerZone title="Danger zone">
	<DangerZone.Action
		id="transfer-team"
		title="Transfer ownership"
		description="Make another admin the owner of Acme Ops. You stay on as an admin."
		buttonLabel="Transfer…"
		actionPlacement="end"
		confirm={{
			title: "Transfer Acme Ops?",
			description: "Ana Ruiz becomes the owner and takes over billing.",
			confirmLabel: "Transfer ownership",
			cancelLabel: "Cancel",
			form: { action: "/teams/acme-ops/transfer" },
		}}
	/>
	<DangerZone.Action
		id="delete-team"
		title="Delete team"
		description="Permanently delete Acme Ops for everyone."
		consequences={[
			"14 monitors stop checking right away",
			"3 status pages go offline",
			"90 days of check history are deleted",
		]}
		buttonLabel="Delete team"
		confirm={{
			title: "Delete team?",
			description: "Acme Ops and everything in it are deleted. This can't be undone.",
			confirmLabel: "Delete team",
			cancelLabel: "Cancel",
			typeToConfirm: { value: "acme-ops", label: 'Type "acme-ops" to confirm', name: "confirmation" },
			form: { action: "/teams/acme-ops/delete" },
		}}
	/>
</DangerZone>

Demo apps

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

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

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

Composition

The parts the component publishes, each a static property of the host.

DangerZone
DangerZone.ActionRenders 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.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`title`	`RemixNode`	Yes	The section's heading, such as "Danger zone".
`description`	`RemixNode`	No

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

DangerZone.Action

Prop	Type	Required	Description
`id`	`string`	Yes	The confirm dialog's `id`, which the row's button opens.
`title`	`RemixNode`	Yes	What the action does, such as "Delete team".
`description`	`RemixNode`	No
`consequences`	`ReadonlyArray<RemixNode>`	No	What is lost, one item each: "14 monitors stop checking", "Invoices stay in Billing".
`actionPlacement`	`ActionPlacement`	No	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`	Yes	The row's button text; name the action, such as "Delete team".
`confirm`	`Omit<Confirm.Props, "id">`	Yes	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">.