Component

Alert Dialog

A modal confirmation dialog styled with thick brutalist borders and flat shadows. Built on Radix UI Alert Dialog primitives, forcing the user to take action before closing.

Preview

Installation

pnpm dlx brutx@latest add alert-dialog

Usage

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogAction,
  AlertDialogCancel,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button>Open</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel asChild>
        <Button variant="outline">Cancel</Button>
      </AlertDialogCancel>
      <AlertDialogAction asChild variant="danger">
        <Button variant="danger">Confirm Action</Button>
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Destructive Variant

Destructive buttons utilize neon red/pink highlights to clearly draw focus to critical actions.

API Reference

ComponentDescription
AlertDialogManages open/closed states.
AlertDialogTriggerOpens the modal panel.
AlertDialogContentModal content container overlaying web content.
AlertDialogHeaderHeader layout box.
AlertDialogFooterFooter button grid container.
AlertDialogTitleHeader title text element.
AlertDialogDescriptionDetailed warning context.
AlertDialogActionPrimary confirm action (accepts standard button variants like destructive).
AlertDialogCancelCancel/close button action.

Accessibility

  • Uses standard WAI-ARIA role="alertdialog" layout rules.
  • Focus is locked within the dialog context, and keyboard navigation keys are fully captured.
  • Supports screen reader announcements and returns focus to triggers on cancel actions.