Alert Dialog A modal dialog that interrupts the user with important content and expects a response.
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.
import { AlertDialog, AlertDialogAction, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@tilt-legal/cubitt-components/primitives" ; < AlertDialog > < AlertDialogTrigger >Open</ AlertDialogTrigger > < AlertDialogContent > < AlertDialogHeader > < AlertDialogIcon > < MobiusLogo variant = "mark" color = "gradient" className = "w-14! h-14!" /> </ AlertDialogIcon > < AlertDialogTitle >Are you sure?</ AlertDialogTitle > < AlertDialogDescription > This action cannot be undone. </ AlertDialogDescription > </ AlertDialogHeader > < AlertDialogFooter > < AlertDialogClose >Cancel</ AlertDialogClose > < AlertDialogAction >Continue</ AlertDialogAction > </ AlertDialogFooter > </ AlertDialogContent > </ AlertDialog > You can sync the alert dialog state with the URL by providing a paramName:
// Opens when ?confirm=true in URL < AlertDialog paramName = "confirm" > < AlertDialogTrigger >Delete</ AlertDialogTrigger > < AlertDialogContent > < AlertDialogHeader > < AlertDialogTitle >Confirm deletion</ AlertDialogTitle > < AlertDialogDescription > This will permanently delete your data. </ AlertDialogDescription > </ AlertDialogHeader > < AlertDialogFooter > < AlertDialogClose >Cancel</ AlertDialogClose > < AlertDialogAction >Delete</ AlertDialogAction > </ AlertDialogFooter > </ AlertDialogContent > </ AlertDialog > // Advanced options: < AlertDialog paramName = "alert" paramClearOnDefault = { true } // Remove param when closed onUrlValueChange = {( value ) => console. log ( 'Dialog open:' , value)} > { /* ... */ } </ AlertDialog > Preview Code
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" ; < AlertDialog > < AlertDialogTrigger render = {< Button variant = "destructive" >Delete draft</ Button >} /> < AlertDialogContent > < AlertDialogHeader > < AlertDialogIcon > < Trash /> </ AlertDialogIcon > < AlertDialogTitle >Discard draft?</ AlertDialogTitle > < AlertDialogDescription > You can ' t undo this action. All unsaved changes will be lost. </ AlertDialogDescription > </ AlertDialogHeader > < AlertDialogFooter > < AlertDialogClose >Cancel</ AlertDialogClose > < AlertDialogAction render = { < Button variant = "destructive" size = "lg" > Discard </ Button > } /> </ AlertDialogFooter > </ AlertDialogContent > </ AlertDialog >; Preview Code
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 < AlertDialog paramName = "confirm" defaultOpen = { false }> < AlertDialogTrigger render = {< Button variant = "outline" >Open with URL state</ Button >} /> < AlertDialogContent > < AlertDialogHeader > < AlertDialogIcon > < CircleInfo /> </ AlertDialogIcon > < AlertDialogTitle >Confirm your action</ AlertDialogTitle > < AlertDialogDescription > This dialog ' s state is synced with the URL. Check the URL parameter when you open it! </ AlertDialogDescription > </ AlertDialogHeader > < AlertDialogFooter > < AlertDialogClose >Cancel</ AlertDialogClose > < AlertDialogAction >Confirm</ AlertDialogAction > </ AlertDialogFooter > </ AlertDialogContent > </ AlertDialog >; Prop Type Description openbooleanThe controlled open state of the dialog. defaultOpenbooleanThe default open state when uncontrolled. Defaults to false. onOpenChange(open: boolean, eventDetails) => voidCallback fired when the open state changes. animatedbooleanWhether to enable open/close animations. Defaults to true. closeOnBackdropClickbooleanWhether clicking the backdrop closes the dialog. Defaults to false. closeOnEscapebooleanWhether pressing Escape closes the dialog. Defaults to true. classNamestringAdditional CSS classes for the dialog root.
When provided with a paramName, the alert dialog's state will be reflected in the URL.
Prop Type Description paramNamestringURL parameter name for syncing state with URL. When provided, enables URL state management. paramMatchValuestringValue that must match for the alert dialog to open. onUrlValueChange(value: boolean | null) => voidCallback when URL parameter value changes. paramClearOnDefaultbooleanRemove URL param when value equals default. Defaults to true. paramThrottlenumberThrottle URL updates in milliseconds. paramDebouncenumberDebounce URL updates in milliseconds.
Prop Type Description renderReactElement | functionCustom element to render as the trigger. classNamestringAdditional CSS classes for the trigger.
Prop Type Description showDismissButtonbooleanWhether to show a dismiss (X) button. Defaults to false. showBackdropbooleanWhether to show the backdrop overlay. Defaults to true. classNamestringAdditional CSS classes for the content.
Prop Type Description classNamestringAdditional CSS classes for the header.
Prop Type Description classNamestringAdditional CSS classes for the footer.
Prop Type Description classNamestringAdditional CSS classes for the title.
Prop Type Description classNamestringAdditional CSS classes for the description.
Prop Type Description renderReactElement | functionCustom element to render (e.g., styled button). classNamestringAdditional CSS classes for the action.
Prop Type Description renderReactElement | functionCustom element to render (e.g., styled button). classNamestringAdditional CSS classes for the close button.