AlertDialog

An interruptive modal surface that demands an explicit response before a page continues.

View code

const DATABASE_NAME = "acme-production";

const DatabaseNameSchema = s
	.string()
	.refine((typed) => typed === DATABASE_NAME, `Type ${DATABASE_NAME} exactly to confirm.`);

<>
	<Button commandfor="preview-alert-dialog" command="show-modal" color="danger">
		Delete database
	</Button>

	<AlertDialog id="preview-alert-dialog" aria-labelledby="preview-alert-dialog-title">
		<form method="dialog" mix={[vstack({ gap: 5, align: "stretch" })]}>
			<AlertDialog.Header>
				<AlertDialog.Title id="preview-alert-dialog-title">
					Delete acme-production?
				</AlertDialog.Title>
				<AlertDialog.Description>
					This removes 14 GB across 38 tables, every read replica, and the last 30 days of
					point-in-time backups. Six services still hold credentials for it.
				</AlertDialog.Description>
			</AlertDialog.Header>

			<div mix={[vstack({ gap: 2, align: "stretch" })]}>
				<Label htmlFor="preview-alert-dialog-name">Database name</Label>
				<Input
					id="preview-alert-dialog-name"
					name="database"
					required
					autoComplete="off"
					placeholder={DATABASE_NAME}
					aria-describedby="preview-alert-dialog-hint preview-alert-dialog-error"
					mix={[is("100%"), validate(DatabaseNameSchema)]}
				/>
				<Description id="preview-alert-dialog-hint">
					Type the name exactly, so a deletion is never one stray click.
				</Description>
				<FieldError id="preview-alert-dialog-error" hidden />
			</div>

			<AlertDialog.Footer>
				<AlertDialog.Cancel commandfor="preview-alert-dialog">Keep it</AlertDialog.Cancel>
				<AlertDialog.Action type="submit" color="danger">
					Delete forever
				</AlertDialog.Action>
			</AlertDialog.Footer>
		</form>
	</AlertDialog>
</>

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 { AlertDialog } from "@sdxc/ui";

Renders the alert panel through Dialog, widened to fit a two-button footer, with role fixed to "alertdialog" and closedby to "closerequest" so the interruption clears through an explicit response.

Composition

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

AlertDialog
AlertDialog.HeaderRenders AlertDialog.HeaderProps.children as the panel's header slot: a column stacking AlertDialog.Title and AlertDialog.Description with a small gap between them.
AlertDialog.TitleRenders AlertDialog.TitleProps.children as the panel's heading, inside the native heading element matching the nearest ancestor HeadingScope's depth, or <h1> where no scope wraps it.
AlertDialog.DescriptionRenders AlertDialog.DescriptionProps.children as the panel's supporting copy, in a native <p> set to the panel's muted foreground color so it reads as secondary to AlertDialog.Title.
AlertDialog.FooterRenders AlertDialog.FooterProps.children as an end-aligned action row.
AlertDialog.ActionRenders the panel's emphasized action as a danger-toned Button, typed "button" so its command="close" reaches the AlertDialog named by commandfor; type="submit" submits the enclosing form instead.
AlertDialog.CancelRenders the panel's dismiss control as an outline, neutral Button with type fixed to "button", so its command="close" reaches the AlertDialog named by commandfor from inside a <form> too.

Props

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

Also accepts everything in Omit<Dialog.Props, "role" | "closedby" | "closedBy">.

AlertDialog.Header

Also accepts everything in TagProps<"div">.

AlertDialog.Title

Also accepts everything in TagProps<"h1">.

AlertDialog.Description

Also accepts everything in TagProps<"p">.

Also accepts everything in TagProps<"div">.

AlertDialog.Action

Prop	Type	Description
`commandfor?`	`string`	`id` of the ancestor AlertDialog this action dismisses. Required for the default `type="button"` action; a `type="submit"` action ends the interruption by submitting its enclosing form.
`command?`	`"close"`	Invoker Commands verb dispatched to the target AlertDialog. Defaults to `"close"`, and is dropped for a `"submit"` or `"reset"` action, which the platform drives as a form control instead of an invoker.

Also accepts everything in Omit<Button.Props, "commandfor" | "command">.

AlertDialog.Cancel

Prop	Type	Description
`commandfor`	`string`	`id` of the ancestor AlertDialog this cancel control dismisses.
`command?`	`"close"`	Invoker Commands verb dispatched to the target AlertDialog. Defaults to `"close"`.
`type?`	`"button"`	Narrowed to the only value a cancel control carries, and always rendered, since the platform runs its close command only from a button typed `"button"`, including inside a `<form>`.

Also accepts everything in Omit<Button.Props, "commandfor" | "command" | "type">.