Alert Dialog

Confirm a consequential action before it happens.

Live example

A reviewed public example, isolated from this page.

import { AlertDialog } from "heidi-ui";
import "heidi-ui/styles.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

action<button>
Confirm/primary button; closes the alert dialog. tone="destructive" swaps the brand fill for the danger fill at the same weight, so a delete never looks like a save.
Uses native semantics
cancel<button>
Cancel/safe button; closes the alert dialog. Preferred initial focus target when the content fits without scrolling.
Uses native semantics
content<dialog>
Native-only <dialog> with role=alertdialog. Requires exactly one Title and Description; owns modal focus containment and native close reconciliation.
ARIA role: alertdialog
description<p>
Required supporting text; wired via aria-describedby.
Uses native semantics
title<h2>
Required heading; wired via aria-labelledby and used as the static initial-focus target for overflowed content or an unavailable Cancel action.
Uses native semantics
trigger<button>
Button that opens the alert dialog modally.
Uses native semantics