## Overview [#overview] The **Alert Dialog** component is a modal that interrupts the user to display critical information or request confirmation. Built on Base UI primitives, it supports URL state management for deep linking and shareable dialog states. ## Usage [#usage] ```tsx import { AlertDialog, AlertDialogAction, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@tilt-legal/cubitt-components/primitives"; ``` ```tsx Open Are you sure? This action cannot be undone. Cancel Continue ``` You can sync the alert dialog state with the URL by providing a `paramName`: ```tsx // Opens when ?confirm=true in URL Delete Confirm deletion This will permanently delete your data. Cancel Delete // Advanced options: console.log('Dialog open:', value)} > {/* ... */} ``` ## Examples [#examples] ### Destructive Action [#destructive-action] ```tsx import { AlertDialog, AlertDialogAction, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@tilt-legal/cubitt-components/primitives"; import { Button } from "@tilt-legal/cubitt-components/primitives"; import { AlertDialogAction, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@tilt-legal/cubitt-components/primitives"; import { Trash } from "@tilt-legal/cubitt-icons/ui/outline"; Delete draft} /> Discard draft? You can't undo this action. All unsaved changes will be lost. Cancel Discard } /> ; ``` ### URL State [#url-state] ```tsx import { AlertDialog } from "@tilt-legal/cubitt-components/primitives"; import { Button } from "@tilt-legal/cubitt-components/primitives"; import { CircleInfo } from "@tilt-legal/cubitt-icons/ui/outline"; // Dialog state synced with ?confirm=true Open with URL state} /> Confirm your action This dialog's state is synced with the URL. Check the URL parameter when you open it! Cancel Confirm ; ``` ## API Reference [#api-reference] ### AlertDialog [#alertdialog] | Prop | Type | Description | | ---------------------- | --------------------------------------- | --------------------------------------------------------------------- | | `open` | `boolean` | The controlled open state of the dialog. | | `defaultOpen` | `boolean` | The default open state when uncontrolled. Defaults to `false`. | | `onOpenChange` | `(open: boolean, eventDetails) => void` | Callback fired when the open state changes. | | `animated` | `boolean` | Whether to enable open/close animations. Defaults to `true`. | | `closeOnBackdropClick` | `boolean` | Whether clicking the backdrop closes the dialog. Defaults to `false`. | | `closeOnEscape` | `boolean` | Whether pressing Escape closes the dialog. Defaults to `true`. | | `className` | `string` | Additional CSS classes for the dialog root. | #### URL State Props [#url-state-props] When provided with a `paramName`, the alert dialog's state will be reflected in the URL. | Prop | Type | Description | | --------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------- | | `paramName` | `string` | URL parameter name for syncing state with URL. When provided, enables URL state management. | | `paramMatchValue` | `string` | Value that must match for the alert dialog to open. | | `onUrlValueChange` | `(value: boolean \| null) => void` | Callback when URL parameter value changes. | | `paramClearOnDefault` | `boolean` | Remove URL param when value equals default. Defaults to `true`. | | `paramThrottle` | `number` | Throttle URL updates in milliseconds. | | `paramDebounce` | `number` | Debounce URL updates in milliseconds. | ### AlertDialogTrigger [#alertdialogtrigger] | Prop | Type | Description | | ----------- | -------------------------- | ---------------------------------------- | | `render` | `ReactElement \| function` | Custom element to render as the trigger. | | `className` | `string` | Additional CSS classes for the trigger. | ### AlertDialogContent [#alertdialogcontent] | Prop | Type | Description | | ------------------- | --------- | ---------------------------------------------------------- | | `showDismissButton` | `boolean` | Whether to show a dismiss (X) button. Defaults to `false`. | | `showBackdrop` | `boolean` | Whether to show the backdrop overlay. Defaults to `true`. | | `className` | `string` | Additional CSS classes for the content. | ### AlertDialogHeader [#alertdialogheader] | Prop | Type | Description | | ----------- | -------- | -------------------------------------- | | `className` | `string` | Additional CSS classes for the header. | ### AlertDialogFooter [#alertdialogfooter] | Prop | Type | Description | | ----------- | -------- | -------------------------------------- | | `className` | `string` | Additional CSS classes for the footer. | ### AlertDialogTitle [#alertdialogtitle] | Prop | Type | Description | | ----------- | -------- | ------------------------------------- | | `className` | `string` | Additional CSS classes for the title. | ### AlertDialogDescription [#alertdialogdescription] | Prop | Type | Description | | ----------- | -------- | ------------------------------------------- | | `className` | `string` | Additional CSS classes for the description. | ### AlertDialogAction [#alertdialogaction] | Prop | Type | Description | | ----------- | -------------------------- | ----------------------------------------------- | | `render` | `ReactElement \| function` | Custom element to render (e.g., styled button). | | `className` | `string` | Additional CSS classes for the action. | ### AlertDialogClose [#alertdialogclose] | Prop | Type | Description | | ----------- | -------------------------- | ----------------------------------------------- | | `render` | `ReactElement \| function` | Custom element to render (e.g., styled button). | | `className` | `string` | Additional CSS classes for the close button. |