Overlays

Alert Dialog

Confirmation dialog with destructive intent. Blocks interaction until resolved.

Preview

'use client';

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@brika/clay/components/alert-dialog';
import { Button } from '@brika/clay/components/button';

/** Destructive confirmation dialog, blocks all interaction until the user resolves it. */
export default function AlertDialogDefaultDemo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Delete account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete this account?</AlertDialogTitle>
          <AlertDialogDescription>
            This action is permanent. All your projects, history, and data will
            be removed and cannot be recovered.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive">Delete account</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

01 Installation

Install

Pull Alert Dialog from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { AlertDialog } from "@brika/clay";

tsxGranular1 line

import { AlertDialog } from "@brika/clay/components/alert-dialog";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxAlert Dialog.tsx38 lines

'use client';

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@brika/clay/components/alert-dialog';
import { Button } from '@brika/clay/components/button';

/** Destructive confirmation dialog, blocks all interaction until the user resolves it. */
export default function AlertDialogDefaultDemo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Delete account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete this account?</AlertDialogTitle>
          <AlertDialogDescription>
            This action is permanent. All your projects, history, and data will
            be removed and cannot be recovered.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive">Delete account</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

03 Examples

Alert Dialog, every way

Loading

Controlled dialog where the confirm button shows a loading state while the action runs.

GitHub

'use client';

import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@brika/clay/components/alert-dialog';
import { Button } from '@brika/clay/components/button';
import { useState } from 'react';

/** Controlled dialog where the confirm button shows a loading state while the action runs. */
export default function AlertDialogLoadingDemo() {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  function handleConfirm() {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setOpen(false);
    }, 1500);
  }

  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Remove workspace</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Remove workspace?</AlertDialogTitle>
          <AlertDialogDescription>
            All members will lose access immediately. Workspace settings and
            integrations will also be deleted.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
          <Button
            variant="destructive"
            disabled={loading}
            onClick={handleConfirm}
          >
            {loading ? 'Removing…' : 'Remove workspace'}
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

04 Accessibility

Accessibility

Unlike Dialog, AlertDialog does not close on backdrop click, the user must explicitly respond.
Focus defaults to the cancel action on open, reducing accidental destructive confirmations.
AlertDialogTitle and AlertDialogDescription are announced immediately when the dialog opens.
Only two outcomes are possible: confirm or cancel. Do not add other interactive elements.

05 Tokens 2 theme-overridable

Theme tokens

Every CSS variable Alert Dialog reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Alert Dialog without touching component code.

Alert Dialog tokens

2 tokens

ColorFill, border, and text colors.2

--alert-dialog-media-containercolorvar(--muted)
components.alertDialog.mediaContainer
Background of the `<AlertDialogMedia>` thumbnail / icon tile shown above the title.
--alert-dialog-border-colorcolorvar(--border)
components.alertDialog.borderColor
Border color drawn around the `<AlertDialogContent>` surface. Defaults to the theme border color.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.alertDialog, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "alertDialog": {
      "mediaContainer": "var(--muted)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-alert-dialog-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Alert Dialog. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.