Alert dialog

Asks before something that can't be undone. It has a title that names the thing, a sentence on what happens to it, and two cells. The safe choice takes focus, so a stray Enter keeps the client; the destructive one is red and says what it does. A click on the dimmed page doesn't close it.

Loading the live example…

"use client"

import { useState } from "react"
import { Button } from "@/components/keyline/ui/button"
import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/keyline/ui/dialog"

const START = [
  { name: "Vance Refrigeration", orders: 6 },
  { name: "Penn Paper Supply", orders: 2 },
  { name: "Mount Airy Casino", orders: 0 },
]

export function RemoveClient() {
  const [clients, setClients] = useState(START)
  const [last, setLast] = useState("")

  return (
    <div className="grid gap-4">
      <ul aria-label="Clients" className="m-0 grid list-none gap-3 p-0 text-[14px]">
        {clients.map((c) => (
          <li key={c.name} className="grid grid-cols-[1fr_auto] items-center gap-3">
            <span>
              {c.name} <span className="text-kl-ink-3">· {c.orders === 0 ? "no orders" : `${c.orders} open orders`}</span>
            </span>
            <AlertDialog>
              <AlertDialogTrigger render={<Button size="compact" />}>Remove</AlertDialogTrigger>
              <AlertDialogContent
                title={`Remove ${c.name}?`}
                description={
                  c.orders
                    ? `Their ${c.orders} open orders are cancelled and the account closes. This can't be undone.`
                    : "The account closes. This can't be undone."
                }
                cancelLabel="Keep the client"
                confirmLabel="Remove client"
                onConfirm={() => {
                  setClients((all) => all.filter((x) => x.name !== c.name))
                  setLast(`${c.name} removed.`)
                }}
              />
            </AlertDialog>
          </li>
        ))}
      </ul>
      <p role="status" className="m-0 min-h-5 text-[14px] text-kl-ink-2">
        {clients.length ? last : `${last} No clients left; refresh the page to bring them back.`}
      </p>
    </div>
  )
}

Installation

npx shadcn@latest add @keyline-ui/alert-dialog

Run it where your components.json is. The first time, map the @keyline-ui registry: one command, in Installation.

Usage

import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/keyline/ui/dialog"

<AlertDialog>
  <AlertDialogTrigger render={<Button />}>Remove</AlertDialogTrigger>
  <AlertDialogContent
    title="Remove Vance Refrigeration?"
    description="Their 6 open orders are cancelled. This can't be undone."
    cancelLabel="Keep the client"
    confirmLabel="Remove client"
    onConfirm={remove}
  />
</AlertDialog>

Props

Prop	Type	Default	Description
`title`	`ReactNode`	`—`	A question that names what is at stake.
`description`	`ReactNode`	`—`	What happens, and that it can't be undone.
`cancelLabel · confirmLabel`	`string`	`—`	Verbs for both cells. “Keep the client” reads better than “Cancel”.
`onConfirm`	`() => void`	`—`	Runs on the confirm cell. The dialog closes after.
`tone`	`"destructive" \| "primary"`	`"destructive"`	`primary` is for a weighty choice that destroys nothing, such as sending.

Alert dialog ships inside the dialog item; installing @keyline-ui/alert-dialog installs @keyline-ui/dialog. Built on Base UI Alert Dialog.