Alert Dialog

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/primitives-alert-dialog

pnpm dlx shadcn@latest add @spaceui/primitives-alert-dialog

Usage

Code

import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'

Code

<AlertDialog>
  <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
  <AlertDialogPopup>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogClose>Cancel</AlertDialogClose>
      <AlertDialogClose>Delete Account</AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogPopup>
</AlertDialog>

Anatomy

Code

<AlertDialog>
  <AlertDialogTrigger />
  <AlertDialogBackdrop />
  <AlertDialogPopup>
    <AlertDialogHeader>
      <AlertDialogTitle />
      <AlertDialogDescription />
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogClose />
    </AlertDialogFooter>
  </AlertDialogPopup>
</AlertDialog>

Features

Bare Footer

An alert dialog with a bare footer (variant="bare"), removing the default border and background styling.

Accessibility

Follows the WAI-ARIA Alert and Message Dialog Pattern.
Traps keyboard focus within the dialog and locks background body scrolling while open.

Keyboard Interactions

Key	Action
`Tab`	Moves focus to the next focusable element within the dialog.
`Shift + Tab`	Moves focus to the previous focusable element within the dialog.
`Escape`	Closes the alert dialog and returns focus to the trigger.

API Reference

AlertDialog

Root component. Alias for AlertDialog.Root from Base UI.

AlertDialogTrigger

Trigger button that opens the alert dialog. Alias for AlertDialog.Trigger from Base UI.

AlertDialogPopup

Popup container that displays the alert dialog content. Also exported as AlertDialogContent.

Prop	Type	Default	Description
`bottomStickOnMobile`	boolean	true	When true, sticks to the bottom of the screen on mobile devices
`portalProps`	AlertDialog.Portal.Props	-	Props forwarded to the internal portal (`keepMounted`, `container`, etc.); see Base UI Alert Dialog portal API

AlertDialogHeader

Container for the alert dialog title and description.

AlertDialogFooter

Footer section for action buttons.

Unlike Dialog, alert dialog has no AlertDialogPanel. Put title and description in AlertDialogHeader, actions in AlertDialogFooter, and use a plain element with className if you need extra body content between them.

Prop	Type	Default	Description
`variant`	default\|bare	default	Controls the footer styling. `default` includes border and background, `bare` removes them

Example:

Code

// Default variant (with border and background)
<AlertDialogFooter>
  <AlertDialogClose>Cancel</AlertDialogClose>
  <AlertDialogClose>Delete</AlertDialogClose>
</AlertDialogFooter>

// Bare variant (no border or background)
<AlertDialogFooter variant="bare">
  <AlertDialogClose>Cancel</AlertDialogClose>
  <AlertDialogClose>Delete</AlertDialogClose>
</AlertDialogFooter>

AlertDialogTitle

Title component. Alias for AlertDialog.Title from Base UI.

AlertDialogDescription

Description component. Alias for AlertDialog.Description from Base UI.

AlertDialogClose

Close button component. Alias for AlertDialog.Close from Base UI.

AlertDialogPortal

Portal component for rendering outside the DOM hierarchy. Alias for AlertDialog.Portal from Base UI.

AlertDialogBackdrop

Backdrop/overlay component. Also exported as AlertDialogOverlay. Alias for AlertDialog.Backdrop from Base UI.

AlertDialogViewport

Viewport component for positioning. Alias for AlertDialog.Viewport from Base UI.

Examples

Alert dialog with close confirmation