AlertDialog

Import

import { AlertDialog } from "@darkcode-ui/react";

Usage

"use client";

import {AlertDialog, Button} from "@darkcode-ui/react";

export function Default() {

Anatomy

Import the AlertDialog component and access all parts using dot notation.

import {AlertDialog, Button} from "@darkcode-ui/react";

export default () => (
  <AlertDialog>
    <Button>Open Alert Dialog</Button>
    <AlertDialog.Backdrop>
      <AlertDialog.Container>
        <AlertDialog.Dialog>
          <AlertDialog.CloseTrigger /> {/* Optional: Close button */}
          <AlertDialog.Header>
            <AlertDialog.Icon /> {/* Optional: Status icon */}
            <AlertDialog.Heading />
          </AlertDialog.Header>
          <AlertDialog.Body />
          <AlertDialog.Footer />
        </AlertDialog.Dialog>
      </AlertDialog.Container>
    </AlertDialog.Backdrop>
  </AlertDialog>
);

Statuses

"use client";

import {AlertDialog, Button} from "@darkcode-ui/react";

export function Statuses() {

Placements

"use client";

import {AlertDialog, Button} from "@darkcode-ui/react";

export function Placements() {

Backdrop Variants

"use client";

import {AlertDialog, Button} from "@darkcode-ui/react";

export function BackdropVariants() {

Sizes

"use client";

import {AlertDialog, Button} from "@darkcode-ui/react";
import {Rocket} from "@gravity-ui/icons";

Custom Icon

"use client";

import {AlertDialog, Button} from "@darkcode-ui/react";
import {LockOpen} from "@gravity-ui/icons";

Custom Backdrop

"use client";

import {AlertDialog, Button} from "@darkcode-ui/react";
import {TriangleExclamation} from "@gravity-ui/icons";

Dismiss Behavior

"use client";

import {AlertDialog, Button} from "@darkcode-ui/react";
import {CircleInfo} from "@gravity-ui/icons";

Close Methods

"use client";

import {AlertDialog, Button} from "@darkcode-ui/react";

export function CloseMethods() {

Controlled State

"use client";

import {AlertDialog, Button, useOverlayState} from "@darkcode-ui/react";
import React from "react";

Custom Trigger

"use client";

import {AlertDialog, Button} from "@darkcode-ui/react";
import {TrashBin} from "@gravity-ui/icons";

Custom Animations

"use client";

import {AlertDialog, Button} from "@darkcode-ui/react";
import {ArrowUpFromLine, Sparkles} from "@gravity-ui/icons";
import React from "react";

Custom Portal

"use client";

import {AlertDialog, Button} from "@darkcode-ui/react";
import {useCallback, useRef, useState} from "react";

Styling

Passing Tailwind CSS classes

import {AlertDialog, Button} from "@darkcode-ui/react";

function CustomAlertDialog() {
  return (
    <AlertDialog>
      <Button variant="danger">Delete</Button>
      <AlertDialog.Backdrop className="bg-red-950/90">
        <AlertDialog.Container className="items-start pt-20">
          <AlertDialog.Dialog className="border-2 border-red-500 sm:max-w-[400px]">
            <AlertDialog.CloseTrigger />
            <AlertDialog.Header>
              <AlertDialog.Icon status="danger" />
              <AlertDialog.Heading>Custom Styled Alert</AlertDialog.Heading>
            </AlertDialog.Header>
            <AlertDialog.Body>
              <p>This alert dialog has custom styling applied via Tailwind classes</p>
            </AlertDialog.Body>
            <AlertDialog.Footer>
              <Button slot="close" variant="tertiary">
                Cancel
              </Button>
              <Button slot="close" variant="danger">
                Delete
              </Button>
            </AlertDialog.Footer>
          </AlertDialog.Dialog>
        </AlertDialog.Container>
      </AlertDialog.Backdrop>
    </AlertDialog>
  );
}

Customizing the component classes

To customize the AlertDialog component classes, you can use the @layer components directive.

Learn more.

@layer components {
  .alert-dialog__backdrop {
    @apply bg-gradient-to-br from-black/60 to-black/80;
  }

  .alert-dialog__dialog {
    @apply rounded-2xl border border-red-500/20 shadow-2xl;
  }

  .alert-dialog__header {
    @apply gap-4;
  }

  .alert-dialog__icon {
    @apply size-16;
  }

  .alert-dialog__close-trigger {
    @apply rounded-full bg-white/10 hover:bg-white/20;
  }
}

DarkCode UI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The AlertDialog component uses these CSS classes (View source styles):

Base Classes

• .alert-dialog__trigger - Trigger element that opens the alert dialog
• .alert-dialog__backdrop - Overlay backdrop behind the dialog
• .alert-dialog__container - Positioning wrapper with placement support
• .alert-dialog__dialog - Dialog content container
• .alert-dialog__header - Header section for icon and title
• .alert-dialog__heading - Heading text styles
• .alert-dialog__body - Main content area
• .alert-dialog__footer - Footer section for actions
• .alert-dialog__icon - Icon container with status colors
• .alert-dialog__close-trigger - Close button element

Backdrop Variants

• .alert-dialog__backdrop--opaque - Opaque colored backdrop (default)
• .alert-dialog__backdrop--blur - Blurred backdrop with glass effect
• .alert-dialog__backdrop--transparent - Transparent backdrop (no overlay)

Status Variants (Icon)

• .alert-dialog__icon--default - Default gray status
• .alert-dialog__icon--accent - Accent blue status
• .alert-dialog__icon--success - Success green status
• .alert-dialog__icon--warning - Warning orange status
• .alert-dialog__icon--danger - Danger red status

Interactive States

The component supports these interactive states:

• Focus: :focus-visible or [data-focus-visible="true"] - Applied to trigger, dialog, and close button
• Hover: :hover or [data-hovered="true"] - Applied to close button on hover
• Active: :active or [data-pressed="true"] - Applied to close button when pressed
• Entering: [data-entering] - Applied during dialog opening animation
• Exiting: [data-exiting] - Applied during dialog closing animation
• Placement: [data-placement="*"] - Applied based on dialog position (auto, top, center, bottom)

API Reference

AlertDialog

AlertDialog.Trigger

AlertDialog.Backdrop

AlertDialog.Container

AlertDialog.Dialog

AlertDialog.Header

AlertDialog.Heading

AlertDialog.Body

AlertDialog.Footer

AlertDialog.Icon

AlertDialog.CloseTrigger

useOverlayState Hook

import {useOverlayState} from "@darkcode-ui/react";

const state = useOverlayState({
  defaultOpen: false,
  onOpenChange: (isOpen) => console.log(isOpen),
});

state.isOpen; // Current state
state.open(); // Open dialog
state.close(); // Close dialog
state.toggle(); // Toggle state
state.setOpen(); // Set state directly

Accessibility

Implements WAI-ARIA AlertDialog pattern:

• Focus trap: Focus locked within alert dialog
• Keyboard: ESC closes (when enabled), Tab cycles elements
• Screen readers: Proper ARIA attributes with role="alertdialog"
• Scroll lock: Body scroll disabled when open
• Required action: Defaults to requiring explicit user action (no backdrop/ESC dismiss)