- Documentation

Alert Dialog

The Alert Dialog component is a modal dialog that interrupts the user with important information or prompts them to make a decision. It is commonly used to confirm actions, display warnings, or notify users of critical information.

Docs

API Reference

Installation

bash

pnpm dlx shadcn@latest add https://auradesignsystem.com/r/alert-dialog.json

Adding Animation to Global CSS

To enhance the user experience, you can add smooth animations to the Accordion component by defining transition styles in your global CSS file.

css

/* globals.css */

@theme {
...
  --animate-overlay-show: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-content-show: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);

  @keyframes overlayShow {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes contentShow {
    from {
      opacity: 0;
      transform: scale(0.96);
  
    }
    to {
      opacity: 1;
      transform:  scale(1);
      
    }
  }
}
...
}

Usage as a Component

To simplify usage, you can create a reusable AlertDialog component that accepts props for the title, description, trigger button, and action buttons. This allows you to easily display a modal dialog for confirmations, warnings, or other critical interactions without duplicating code.

tsx

import {ReactNode} from "react";
import { AlertDialog as AlertDialogRadix } from "radix-ui";

import Button, { ButtonProps } from "@/components/ui/Button";

/**
 * Props for the AlertDialog component
 */
type AlertDialogProps = {
  /** Content for the dialog title */
  title?: ReactNode;
  /** Content for the dialog description */
  description?: ReactNode;
  /** Props for the trigger button */
  triggerButton?: ButtonProps;
  /** Props for the cancel button */
  cancelButton?: ButtonProps;
  /** Props for the action button */
  actionButton?: ButtonProps;
  /** Props for the AlertDialog trigger element */
  triggerProps?: AlertDialogRadix.AlertDialogTriggerProps;
  /** Props for the AlertDialog overlay */
  overlayProps?: AlertDialogRadix.AlertDialogOverlayProps;
  /** Props for the AlertDialog content container */
  contentProps?: AlertDialogRadix.AlertDialogContentProps;
  /** Props for the AlertDialog title element */
  titleProps?: AlertDialogRadix.AlertDialogTitleProps;
  /** Props for the AlertDialog description element */
  descriptionProps?: AlertDialogRadix.AlertDialogDescriptionProps;
  /** Props for the AlertDialog action button wrapper */
  actionProps?: AlertDialogRadix.AlertDialogActionProps;
  /** Props for the AlertDialog cancel button wrapper */
  cancelProps?: AlertDialogRadix.AlertDialogCancelProps;
  /** Props for the AlertDialog portal */
  portalProps?: AlertDialogRadix.AlertDialogPortalProps;
  /** Props for the AlertDialog root element */
  rootProps?: AlertDialogRadix.AlertDialogProps;
};

/**
 * A modal dialog that interrupts the user with important content and expects a response
 * Built on top of Radix UI's AlertDialog primitive
 */
const AlertDialog = ({
  title,
  description,
  triggerProps,
  triggerButton,
  cancelButton,
  actionButton,
  overlayProps,
  contentProps,
  titleProps,
  descriptionProps,
  actionProps,
  cancelProps,
  portalProps,
  rootProps,
}: AlertDialogProps) => (
  <AlertDialogRadix.Root {...rootProps}>
    {/* Button that triggers the dialog */}
    <AlertDialogRadix.Trigger asChild {...triggerProps}>
      <Button {...triggerButton} />
    </AlertDialogRadix.Trigger>
    <AlertDialogRadix.Portal {...portalProps}>
      {/* Semi-transparent overlay behind the dialog */}
      <AlertDialogRadix.Overlay
        className="fixed inset-0 bg-black-a8 z-10"
        {...overlayProps}
      />
      {/* Main dialog content container */}
      <AlertDialogRadix.Content
        className="smash fixed left-1/2 top-1/2 max-h-[85vh] w-[90vw] -translate-x-1/2 -translate-y-1/2 bg-black-1 p-2 rounded-1 z-10"
        {...contentProps}
      >
        <AlertDialogRadix.Title className="m-0" {...titleProps}>
          {title}
        </AlertDialogRadix.Title>
        <AlertDialogRadix.Description {...descriptionProps}>
          {description}
        </AlertDialogRadix.Description>
        {/* Container for action buttons */}
        <div className="flex-col md:flex-row flex justify-end gap-1 md:gap-2" data-display-name="div">
          <AlertDialogRadix.Cancel asChild {...cancelProps}>
            <Button {...cancelButton} mode="link" />
          </AlertDialogRadix.Cancel>
          <AlertDialogRadix.Action asChild {...actionProps}>
            <Button {...actionButton} />
          </AlertDialogRadix.Action>
        </div>
      </AlertDialogRadix.Content>
    </AlertDialogRadix.Portal>
  </AlertDialogRadix.Root>
);

export default AlertDialog;

Usage Example

tsx

import AlertDialog from "@/components/ui/AlertDialog";

export default function Home() {
  return (
    <AlertDialog
      title="Are you absolutely sure?"
      description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
      triggerButton={{ label: "Delete account" }}
      cancelButton={{ label: "Cancel" }}
      actionButton={{ label: "Yes, delete account" }}
    />
  );
}