Alert Dialog
A modal dialog that interrupts the user with important content and expects a response. Unlike Dialog, it cannot be dismissed by clicking outside.
#Installation
npx @barefootjs/cli add alert-dialog#Usage
1import {2 AlertDialog,3 AlertDialogTrigger,4 AlertDialogOverlay,5 AlertDialogContent,6 AlertDialogHeader,7 AlertDialogTitle,8 AlertDialogDescription,9 AlertDialogFooter,10 AlertDialogCancel,11 AlertDialogAction,12} from '@/components/ui/alert-dialog'#Examples
#Destructive
1"use client"23import { createSignal } from '@barefootjs/client'4import {5 AlertDialog,6 AlertDialogTrigger,7 AlertDialogOverlay,8 AlertDialogContent,9 AlertDialogHeader,10 AlertDialogTitle,11 AlertDialogDescription,12 AlertDialogFooter,13 AlertDialogCancel,14 AlertDialogAction,15} from '@/components/ui/alert-dialog'1617function DestructiveAlertDialog() {18 const [open, setOpen] = createSignal(false)1920 return (21 <AlertDialog open={open()} onOpenChange={setOpen}>22 <AlertDialogTrigger asChild>23 <button class="bg-destructive text-destructive-foreground ...">24 Delete Account25 </button>26 </AlertDialogTrigger>27 <AlertDialogOverlay />28 <AlertDialogContent29 ariaLabelledby="alert-destructive-title"30 ariaDescribedby="alert-destructive-description"31 >32 <AlertDialogHeader>33 <AlertDialogTitle id="alert-destructive-title">34 Delete Account35 </AlertDialogTitle>36 <AlertDialogDescription id="alert-destructive-description">37 Are you sure you want to delete your account? All of38 your data will be permanently removed.39 </AlertDialogDescription>40 </AlertDialogHeader>41 <AlertDialogFooter>42 <AlertDialogCancel>Cancel</AlertDialogCancel>43 <AlertDialogAction class="bg-destructive text-white hover:bg-destructive/90">44 Delete45 </AlertDialogAction>46 </AlertDialogFooter>47 </AlertDialogContent>48 </AlertDialog>49 )50}#Accessibility
- ESC key to close - Press Escape to close the alert dialog
- No outside click dismiss - Clicking the overlay does NOT close the dialog
- Scroll lock - Body scroll is disabled when alert dialog is open
- Focus trap - Tab/Shift+Tab cycles within the alert dialog
- ARIA - role="alertdialog", aria-modal="true", aria-labelledby, aria-describedby
- Portal rendering - Alert dialog is mounted to document.body via createPortal
#API Reference
AlertDialog
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Whether the alert dialog is open. |
| onOpenChange | (open: boolean) => void | - | Event handler called when the open state should change. |
AlertDialogTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | Whether the trigger is disabled. |
| asChild | boolean | false | Render child element as trigger instead of built-in button. |
AlertDialogOverlay
| Prop | Type | Default | Description |
|---|
AlertDialogContent
| Prop | Type | Default | Description |
|---|---|---|---|
| ariaLabelledby | string | - | ID of the element that labels the alert dialog (typically AlertDialogTitle). |
| ariaDescribedby | string | - | ID of the element that describes the alert dialog (typically AlertDialogDescription). |
AlertDialogTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | ID for aria-labelledby reference. |
AlertDialogDescription
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | ID for aria-describedby reference. |
AlertDialogCancel
| Prop | Type | Default | Description |
|---|
AlertDialogAction
| Prop | Type | Default | Description |
|---|---|---|---|
| onClick | () => void | - | Click handler called when the action is triggered. |