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>
  );
}