🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Alert Dialog

A modal dialog that interrupts the user with important content and requires a response.

Alert dialogs are used for critical interactions that demand immediate attention and a decision from the user before they can proceed. Unlike regular dialogs, alert dialogs are typically used for confirmations of destructive actions (like deletions), important warnings, or critical errors that require acknowledgment. They block all interaction with the underlying page until the user responds.

Built on top of Radix UI's AlertDialog primitive with full keyboard navigation, focus trapping, and accessibility support including proper ARIA attributes and roles that announce the alert to screen readers.

Example

"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@strongtie/design-system/alert-dialog"
import { Button } from "@strongtie/design-system/button"

export function AlertDialogDefault() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Delete Account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <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>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Installation


npm install @strongtie/design-system

import { AlertDialog } from "@strongtie/design-system/alert-dialog"

Components

This module exports the following components:

AlertDialog
AlertDialogPortal
AlertDialogOverlay
AlertDialogTrigger
AlertDialogContent
AlertDialogHeader
AlertDialogFooter
AlertDialogTitle
AlertDialogDescription
AlertDialogAction
AlertDialogCancel

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Example

"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@strongtie/design-system/alert-dialog"
import { Button } from "@strongtie/design-system/button"

export function AlertDialogDefault() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Delete Account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <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>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Component Slots

The following data attributes are used to identify component parts:

alert-dialog
alert-dialog-content
alert-dialog-description
alert-dialog-footer
alert-dialog-header
alert-dialog-overlay
alert-dialog-portal
alert-dialog-title
alert-dialog-trigger

Additional Classes

Other CSS classes used by this component:

alert-dialog-content
alert-dialog-description
alert-dialog-footer
alert-dialog-header
alert-dialog-overlay
alert-dialog-title
outline

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI alert-dialog Documentation

Accordion Alert

On This Page

Example Installation Components Props Example Styling Component Slots Additional Classes Accessibility Resources

Contribute

Alert Dialog

A modal dialog that interrupts the user with important content and requires a response.

Example

"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@strongtie/design-system/alert-dialog"
import { Button } from "@strongtie/design-system/button"

export function AlertDialogDefault() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Delete Account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <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>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Installation


npm install @strongtie/design-system

import { AlertDialog } from "@strongtie/design-system/alert-dialog"

Components

This module exports the following components:

AlertDialog
AlertDialogPortal
AlertDialogOverlay
AlertDialogTrigger
AlertDialogContent
AlertDialogHeader
AlertDialogFooter
AlertDialogTitle
AlertDialogDescription
AlertDialogAction
AlertDialogCancel

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Example

"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@strongtie/design-system/alert-dialog"
import { Button } from "@strongtie/design-system/button"

export function AlertDialogDefault() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Delete Account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <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>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}