Confirm

A convenience wrapper composing a two-control confirmation prompt in one call.

No decision yet.

View code

let outcome: string | null = null;

function settle(next: string) {
	outcome = next;
	void handle.update();
}

<div mix={[vstack({ gap: 3, align: "center" }), maxIs("26rem")]}>
	<Button commandfor="preview-confirm" command="show-modal" color="danger" variant="outline">
		Cancel subscription
	</Button>

	<Confirm
		id="preview-confirm"
		title="Cancel the Team plan?"
		description={CONSEQUENCES}
		confirmLabel="Cancel the plan"
		cancelLabel="Keep the plan"
		color="danger"
		parts={{
			action: on<HTMLButtonElement, "click">("click", () =>
				settle("Cancellation scheduled for 30 September."),
			),
			cancel: on<HTMLButtonElement, "click">("click", () => settle("Still on the Team plan.")),
		}}
	/>

	<p mix={[text("sm"), fg("neutral"), textAlign("center")]}>{outcome ?? "No decision yet."}</p>
</div>

Installation

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

npm add @sdxc/ui

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

Usage

import { Confirm } from "@sdxc/ui";

Composes AlertDialog into a confirmation prompt, wiring title and description ids to aria-labelledby/aria-describedby. Omit Confirm.Props.form to close on confirm, or pass it to submit a real <form> instead.

Examples

<Confirm
	id="publish-post"
	title={t("post.publishTitle")}
	confirmLabel={t("actions.publish")}
	cancelLabel={t("actions.cancel")}
	color="brand"
/>

<Confirm
	id="revoke-session"
	title={t("session.revokeTitle")}
	confirmLabel={t("actions.revoke")}
	cancelLabel={t("actions.cancel")}
	form={{ action: revokeUrl, fields: <input type="hidden" name="csrf" value={token} /> }}
/>

Props

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

Prop	Type	Description
`id`	`string`	Stable identifier the panel renders as its own `id`; a trigger elsewhere on the page targets it via `commandfor`/`command="show-modal"`, and the cancel and confirm controls point back at it automatically.
`title`	`RemixNode`	The panel's heading, rendered through AlertDialog.Title.
`description?`	`RemixNode`	Supporting copy rendered through AlertDialog.Description beneath the title. Omit to render no description.
`confirmLabel`	`RemixNode`	Label for the confirming control, rendered through AlertDialog.Action.
`cancelLabel`	`RemixNode`	Label for the control that backs out without confirming, rendered through AlertDialog.Cancel.
`color?`	`Button.Color`	Semantic color for the confirming control. Defaults to DEFAULT_COLOR.
`form?`	`FormProps`	Submission the confirming control performs. Omitting it leaves confirming as a close-only action for the page to react to; setting it submits a real form instead.
`parts?`	`PartsProps`	Per-part styling for this wrapper's internally composed elements.

Also accepts everything in Omit<AlertDialog.Props, "id" | "children" | "title">.