Alert Dialog

A modal that requires a user response before continuing. Blocks interaction with the rest of the page until dismissed.

Two actions

Two actions render side-by-side. Use for simple confirm/cancel patterns.

import { Button } from "@brijbyte/agentic-ui/button";
import { AlertDialog } from "@brijbyte/agentic-ui/alert-dialog";
import "@brijbyte/agentic-ui/button.css";
import "@brijbyte/agentic-ui/alert-dialog.css";

export default function TwoActionsDemo() {
  return (
    <AlertDialog
      trigger={<Button variant="outline">Discard draft</Button>}
      title="Discard draft?"
      description="You can't undo this action."
      actions={[{ label: "Cancel" }, { label: "Discard", primary: true, destructive: true }]}
    />
  );
}

Three actions

Three or more actions stack vertically.

import { Button } from "@brijbyte/agentic-ui/button";
import { AlertDialog } from "@brijbyte/agentic-ui/alert-dialog";
import "@brijbyte/agentic-ui/button.css";
import "@brijbyte/agentic-ui/alert-dialog.css";

export default function ThreeActionsDemo() {
  return (
    <AlertDialog
      trigger={<Button variant="outline">Close document</Button>}
      title='Save "Untitled" before closing?'
      description="Your changes will be lost if you don't save."
      actions={[{ label: "Don't Save", destructive: true }, { label: "Cancel" }, { label: "Save", primary: true }]}
    />
  );
}

Composed

Use raw @base-ui/react AlertDialog.Root with styled parts for full control over layout.

import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
import { Button } from "@brijbyte/agentic-ui/button";
import { AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription } from "@brijbyte/agentic-ui/alert-dialog";
import "@brijbyte/agentic-ui/button.css";
import "@brijbyte/agentic-ui/alert-dialog.css";

export default function ComposedDemo() {
  return (
    <BaseAlertDialog.Root>
      <BaseAlertDialog.Trigger
        render={
          <Button tone="destructive" variant="soft">
            Delete account
          </Button>
        }
      />
      <BaseAlertDialog.Portal>
        <AlertDialogBackdrop />
        <AlertDialogPopup>
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-1-5)" }}>
            <AlertDialogTitle>Delete account?</AlertDialogTitle>
            <AlertDialogDescription>All your data will be permanently removed. This action cannot be undone.</AlertDialogDescription>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: "var(--space-1)" }}>
            <BaseAlertDialog.Close render={<Button variant="soft" tone="destructive" size="sm" />}>Delete</BaseAlertDialog.Close>
            <BaseAlertDialog.Close render={<Button variant="outline" size="sm" />}>Cancel</BaseAlertDialog.Close>
          </div>
        </AlertDialogPopup>
      </BaseAlertDialog.Portal>
    </BaseAlertDialog.Root>
  );
}

API Reference

AlertDialog

base-ui docs ↗

A modal that requires a user response before continuing. Blocks interaction
with the rest of the page until dismissed. Two actions render side-by-side;
three or more stack vertically.

Prop	Type	Default
open	`boolean`	—
Controlled open state.
defaultOpen	`boolean`	—
Whether the dialog is initially open (uncontrolled).
onOpenChange	`((open: boolean, eventDetails: unknown) => void)`	—
Called when the dialog opens or closes.
trigger	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	—
Element that opens the dialog when clicked.
icon	`ReactNode`	—
Optional icon shown above the title.
title*	`ReactNode`	—
Dialog heading text.
description	`ReactNode`	—
Supplementary text below the title.
actions*	`AlertAction[]`	—
Action buttons rendered right-aligned. Use `primary: true` for the confirm action (solid), leave unset for cancel (outline). Use `destructive: true` to apply destructive tone to the confirm action.
className	`string`	—

Styled Parts

base-ui docs ↗

Pre-styled wrappers around the corresponding base-ui parts. All base-ui props are forwarded.

CSS Class Names

Available as keys on the AlertDialogStyles object. Each key maps to a hashed CSS module class name at runtime.

actionsbackdropdescriptionheadericonpopuptitle