Alert dialog.

Pause before a consequential action.

In practice

Uses the Coal alert-dialog role and requires explicit dismissal. Connect your handler to the confirmation button.

Installation

Install Coal once. Components and TypeScript declarations are included. React 19 and React DOM 19 are peer dependencies.

npm install http://localhost:3100/downloads/chlohal-coal-ui-0.5.0.tgz

This installs the local package. It is not yet published on npm. See installation for stylesheet setup and integration.

Usage

"use client";
import * as React from "react";
import "@chlohal/coal-ui/styles.css";
import { Button, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogClose } from "@chlohal/coal-ui";
export default function Example() {
    return (<AlertDialog>
          <AlertDialogTrigger render={<Button variant="outline"/>}>
            Archive project
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogTitle>
              Time to put this away?
            </AlertDialogTitle>
            <AlertDialogDescription>
              This demo archives nothing. In your app, connect confirmation to
              your archive action.
            </AlertDialogDescription>
            <div>
              <AlertDialogClose render={<Button variant="outline"/>}>
                Keep it
              </AlertDialogClose>
              <AlertDialogClose render={<Button />}>Archive</AlertDialogClose>
            </div>
          </AlertDialogContent>
        </AlertDialog>);
}

Source

The original Coal implementation. Use the package export to integrate it.

"use client";
import { Dialog, type DialogProps } from "./dialog.js";
export function AlertDialog(props: Omit<DialogProps, "alert">) {
  return <Dialog alert {...props} />;
}
export {
  DialogTrigger as AlertDialogTrigger,
  DialogContent as AlertDialogContent,
  DialogTitle as AlertDialogTitle,
  DialogDescription as AlertDialogDescription,
  DialogClose as AlertDialogClose,
} from "./dialog.js";

Accessibility checklist

• Provide an accessible name for controls, including icon-only buttons.
• Check keyboard navigation, visible focus and disabled states in your application.
• Do not rely on color alone to communicate status.