Alert Dialog

since 1.0

AlertDialog is a modal dialog that interrupts the user with important content and expects 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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

AlertDialog
AlertDialogPortal
AlertDialogOverlay
AlertDialogTrigger
AlertDialogContent
AlertDialogHeader
AlertDialogFooter
AlertDialogTitle
AlertDialogDescription
AlertDialogAction
AlertDialogCancel

Props

All components accept standard HTML attributes and React props.

When not to use it

Don't use an alert dialog for ordinary modal content — a form, a detail panel, or anything the user may dismiss without answering belongs in a Dialog. Alert dialogs trap focus around a mandatory choice and have no dismiss affordance beyond their own actions, so reserve them for destructive or irreversible confirmations where the user must explicitly choose.

Accordion Alert

On This Page

Example Install Components Props When not to use it

Contribute