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.

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

destructive

#Installation

bunx --bun barefoot add alert-dialog

#Usage

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

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

Delete Account

Are you sure you want to delete your account? All of your data will be permanently removed. This action cannot be undone.

1"use client"23import { createSignal } from '@barefootjs/dom'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.