Alert Dialog

A confirmation modal from Base UI.

Real use · Cancel/Action, header + footer

Using Alert Dialog

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { AlertDialog } from "@wizeworks/silicaui-react";

Props

Prop	Type	Required	Description
children	React.ReactNode	no	—
backdropClassName	string	no	Class for the backdrop layer.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import {
    AlertDialog,
    AlertDialogTrigger,
    AlertDialogContent,
    AlertDialogTitle,
    AlertDialogDescription,
    AlertDialogHeader,
    AlertDialogFooter,
    AlertDialogCancel,
    AlertDialogAction,
    Button,
} from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";

export function AlertDialogDemo() {
    return (
        <Section title="Real use · Cancel/Action, header + footer">
            <Row>
                <AlertDialog>
                    <AlertDialogTrigger>
                        <Button color="error" variant="outline">
                            Delete account…
                        </Button>
                    </AlertDialogTrigger>
                    <AlertDialogContent>
                        <AlertDialogTitle>Delete account?</AlertDialogTitle>
                        <AlertDialogDescription>
                            This permanently removes your data. This can't be undone.
                        </AlertDialogDescription>
                        <div className="mt-4 flex justify-end gap-2">
                            <AlertDialogCancel>
                                <Button variant="ghost" color="neutral">
                                    Cancel
                                </Button>
                            </AlertDialogCancel>
                            <AlertDialogAction
                                color="error"
                                onClick={() => console.log("account deleted")}
                            >
                                Delete
                            </AlertDialogAction>
                        </div>
                    </AlertDialogContent>
                </AlertDialog>

                <AlertDialog>
                    <AlertDialogTrigger>
                        <Button variant="outline">Header/Footer variant</Button>
                    </AlertDialogTrigger>
                    <AlertDialogContent>
                        <AlertDialogHeader>
                            <AlertDialogTitle>Discard changes?</AlertDialogTitle>
                        </AlertDialogHeader>
                        <AlertDialogDescription>
                            You have unsaved changes that will be lost.
                        </AlertDialogDescription>
                        <AlertDialogFooter>
                            <AlertDialogCancel>
                                <Button variant="ghost" color="neutral">
                                    Keep editing
                                </Button>
                            </AlertDialogCancel>
                            <AlertDialogAction color="error">Discard</AlertDialogAction>
                        </AlertDialogFooter>
                    </AlertDialogContent>
                </AlertDialog>
            </Row>
        </Section>
    );
}

Vanilla — node tree to HTML

AlertDialog — same shape, params.dismissible: false (backdrop is inert — clicking it does NOT close, only Escape/an explicit close does, per the ARIA alert-dialog pattern). Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("AlertDialog", undefined, { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "… …-primary" rather than passing a colour as a prop.

Takes children: yes
Hydrated by: modal

Load @wizeworks/silicaui-behaviors on the page or this markup renders correctly and does nothing.

The full API for Alert Dialog, on every path, is available through the Silica MCP server.