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.

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" }}
    />
  );
}
Aura Design System