Design System/Atoms/Alert Dialog

Alert Dialog

A modal dialog that requires user acknowledgment before a critical or irreversible action proceeds.

When To Use

Use Alert Dialog when content needs to appear in context without forcing a full page transition.
Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
Review the examples below to compare trigger styles, content density, and dismissal expectations.

When Not To Use

Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.

Accessibility Notes

Move focus into the overlay when it opens and return focus to the trigger when it closes.
Support Escape to dismiss non-destructive overlays and ensure the trigger communicates expanded state where appropriate.
Do not hide critical actions behind hover-only disclosure; keyboard and touch users need equivalent access.

Key Props / API

Key exports

AlertDialogRoot, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader

Example Code

import {
  AlertDialog, AlertDialogTrigger, AlertDialogContent,
  AlertDialogHeader, AlertDialogFooter, AlertDialogTitle,
  AlertDialogDescription, AlertDialogAction, AlertDialogCancel,
} from "@hilum/ui"
import { Button } from "@hilum/ui"

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Open dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently change your account settings.
      </AlertDialogDescription>
    </AlertDialogHeader>
// ...trimmed for docs

Alert Dialog

Default

Confirm action before proceeding

Destructive

Irreversible delete action — action button styled red