Accessible alert dialog component built on Radix UI primitives, providing a modal confirmation dialog with overlay, animations, and styled action/cancel buttons using the OpenFrame design system. ## Key Components | Export | Description | |---|---| | `AlertDialog` | Root component wrapping Radix `AlertDialogPrimitive.Root` | | `AlertDialogTrigger` | Element that opens the dialog | | `AlertDialogPortal` | Renders dialog outside the DOM tree | | `AlertDialogOverlay` | Fixed backdrop with fade animations | | `AlertDialogContent` | Centered modal panel with slide/zoom animations | | `AlertDialogHeader` | Layout wrapper for title and description | | `AlertDialogFooter` | Layout wrapper for action buttons (stacked on mobile, inline on desktop) | | `AlertDialogTitle` | Styled title using `text-h3` | | `AlertDialogDescription` | Muted subtitle using `text-h6` | | `AlertDialogAction` | Confirm button using default `buttonVariants()` | | `AlertDialogCancel` | Dismiss button using `outline` button variant | ## Usage Example ```typescript import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel, } from "@/components/ui/alert-dialog" export function DeleteConfirmDialog() { return ( Delete Device Are you sure? This action cannot be undone. The device will be permanently removed. Cancel Confirm Delete ) } ``` ## Notes - Requires a client component context (`"use client"`) - Overlay uses `bg-ods-overlay` from the OpenFrame design token system - Animations use Tailwind `animate-in`/`animate-out` data-state classes - Source: [`alert-dialog.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/alert-dialog.tsx)