edbnedbn/ui
Get Started
WelcomeChoosing a VariantChangelogLicense
Components
OverviewButtonAlert DialogPopoverDropdown MenuPull Down MenuSheet
Motion Utilities
Motion ProviderSpring PresetsHooks
0installs
ComponentsBlocksMaps
HomeDocsComponentsStaticAlert Dialog

On this page

Alert Dialog (Static)

A lightweight modal dialog component with CSS transitions. Perfect for confirmation dialogs and important interactions without motion library overhead.

Overview

The static Alert Dialog provides the same functionality as the animated version but uses CSS transitions for enter/exit animations. This results in a significantly smaller bundle size (~5KB vs ~22KB).

Looking for premium spring animations? Check out the Animated Alert Dialog component.

Usage

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from "@/components/ui/static/alert-dialog"
<AlertDialog>
  <AlertDialogTrigger>Open</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Title</AlertDialogTitle>
      <AlertDialogDescription>Description</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Installation

Install via CLI

TypeScript
npx edbn-ui add alert-dialog-static

Install dependencies

TypeScript
npm install @phosphor-icons/react

Import and use

TypeScript
import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from "@/components/ui/static/alert-dialog"

export default function MyComponent() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button>Delete Account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
33 lines

Examples

Basic Usage

A simple confirmation dialog with title, description, and action buttons.

Destructive Action

Use destructive styling for dangerous actions like deleting data.

Custom Styling

Customize the dialog appearance with className props.

TypeScript
<AlertDialogContent className="max-w-md">
  <AlertDialogHeader>
    <AlertDialogTitle className="text-xl">
      Custom Title
    </AlertDialogTitle>
    <AlertDialogDescription className="text-base">
      This dialog has custom styling applied.
    </AlertDialogDescription>
  </AlertDialogHeader>
  <AlertDialogFooter className="gap-3">
    <AlertDialogCancel className="flex-1">
      Cancel
    </AlertDialogCancel>
    <AlertDialogAction className="flex-1 bg-green-600 hover:bg-green-700">
      Confirm
    </AlertDialogAction>
  </AlertDialogFooter>
</AlertDialogContent>

API Reference

AlertDialog

PropTypeDefaultDescription
openboolean—Controlled open state
defaultOpenbooleanfalseInitial open state (uncontrolled)
onOpenChange(open: boolean) => void—Callback when open state changes

AlertDialogContent

PropTypeDefaultDescription
classNamestring—Additional CSS classes
showCloseButtonbooleantrueShow the close button in the corner
onEscapeKeyDown(event: KeyboardEvent) => void—Callback when Escape key is pressed
onPointerDownOutside(event: PointerEvent) => void—Callback when clicking outside the dialog

AlertDialogTrigger

PropTypeDefaultDescription
asChildbooleanfalseMerge trigger props with child element

Accessibility

Built following WAI-ARIA Alert Dialog pattern with full keyboard support.

Keyboard

EscapeClose the dialog
TabNavigate between focusable elements (trapped within dialog)

Screen Readers

• Dialog uses role="alertdialog"

• Title announced via aria-labelledby

• Description announced via aria-describedby

• Focus is automatically moved to the dialog when opened