alert-dialog.tsx

Overview

alert-dialog.tsx is a React component module that provides a customizable and accessible alert dialog UI component built on top of the @radix-ui/react-alert-dialog primitives. It wraps and extends Radix UI's AlertDialog primitives with styling and layout enhancements tailored for the application's design system.

This file exports a set of components that can be used together to create modal alert dialogs with consistent behavior, animation, and styling. The components facilitate creating dialogs with overlays, titles, descriptions, action buttons, and cancel buttons, following best practices for accessibility and user experience.

Component Explanations

The file mainly exports React components that correspond to Radix UI AlertDialog primitives, enhanced with styling and layout wrappers.

1. AlertDialog

• Type: React component (Radix UI Primitive Root)

• Description: The root component that manages the open/close state of the alert dialog.

• Usage: Wrap this around the dialog trigger and dialog content components.

• Example:

  <AlertDialog>
    <AlertDialogTrigger>Delete</AlertDialogTrigger>
    <AlertDialogContent>...</AlertDialogContent>
  </AlertDialog>
  

2. AlertDialogTrigger

• Type: React component (Radix UI Primitive Trigger)

• Description: The element that triggers the opening of the alert dialog.

• Usage: Usually a button or clickable element.

• Example:

  <AlertDialogTrigger>Open Alert</AlertDialogTrigger>
  

3. AlertDialogPortal

• Type: React component (Radix UI Primitive Portal)

• Description: Creates a React Portal for rendering dialog content outside the normal DOM hierarchy.

• Usage: Used internally by AlertDialogContent.

• Note: Generally not used directly by consumers.

4. AlertDialogOverlay

• Type: React component (forwardRef)

• Props: Extends props of Radix's AlertDialogPrimitive.Overlay.

• Description: Semi-transparent backdrop overlay that appears behind the dialog content.

• Styling: Fixed fullscreen black overlay with opacity and open/close animations.

• Usage: Automatically included by AlertDialogContent.

• Example:

  <AlertDialogOverlay />
  

• Implementation detail: Uses cn utility to merge class names and supports animation states (open, closed).

5. AlertDialogContent

• Type: React component (forwardRef)

• Props: Extends props of Radix's AlertDialogPrimitive.Content.

• Description: The main container for dialog content. Centers content on screen with animations and shadows.

• Usage: Wraps header, description, footer, and action components.

• Example:

  <AlertDialogContent>
    <AlertDialogHeader>Confirm Delete</AlertDialogHeader>
    <AlertDialogDescription>Are you sure?</AlertDialogDescription>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
  

• Implementation details:

  • Wraps content inside AlertDialogPortal and includes AlertDialogOverlay.

  • Uses CSS animations for fade, zoom, and slide effects on open/close.

  • Uses utility cn for class merging and applies theme-specific background and shadow.

6. AlertDialogHeader

• Type: Functional component

• Props: Extends standard div HTML attributes.

• Description: Container for title and subtitle, arranged vertically with spacing.

• Styling: Uses flex column layout with responsive text alignment.

• Example:

  <AlertDialogHeader>
    <AlertDialogTitle>Delete File</AlertDialogTitle>
  </AlertDialogHeader>
  

7. AlertDialogFooter

• Type: Functional component

• Props: Extends standard div HTML attributes.

• Description: Container for dialog action buttons aligned horizontally on larger screens and stacked on smaller screens.

• Styling: Uses flexbox with reverse column on small screens, row with spacing on larger screens.

• Example:

  <AlertDialogFooter>
    <AlertDialogCancel>Cancel</AlertDialogCancel>
    <AlertDialogAction>Confirm</AlertDialogAction>
  </AlertDialogFooter>
  

8. AlertDialogTitle

• Type: React component (forwardRef)

• Props: Extends props of Radix's AlertDialogPrimitive.Title.

• Description: The title text of the alert dialog.

• Styling: Large, bold text.

• Example:

  <AlertDialogTitle>Delete Confirmation</AlertDialogTitle>
  

9. AlertDialogDescription

• Type: React component (forwardRef)

• Props: Extends props of Radix's AlertDialogPrimitive.Description.

• Description: The descriptive text below the title providing more details.

• Styling: Smaller, muted text.

• Example:

  <AlertDialogDescription>
    This action cannot be undone.
  </AlertDialogDescription>
  

10. AlertDialogAction

• Type: React component (forwardRef)

• Props: Extends props of Radix's AlertDialogPrimitive.Action.

• Description: Primary action button (e.g., "Confirm", "Delete").

• Styling: Uses buttonVariants() utility for consistent button styling.

• Example:

  <AlertDialogAction onClick={handleConfirm}>Confirm</AlertDialogAction>
  

11. AlertDialogCancel

• Type: React component (forwardRef)

• Props: Extends props of Radix's AlertDialogPrimitive.Cancel.

• Description: Cancel button to close the dialog without action.

• Styling: Uses outline variant button style with margin adjustments.

• Example:

  <AlertDialogCancel>Cancel</AlertDialogCancel>
  

Important Implementation Details

• Styling and Animations:

  • The dialog overlay and content use CSS animations for fade, zoom, and sliding effects to enhance user experience.

  • Class names are composed using a utility function cn to merge default styles with optional custom classes.

  • Button styles are applied via a custom buttonVariants() function imported from the UI components library, ensuring visual consistency.

• Accessibility:

  • Since this is built on Radix UI primitives, it inherits their accessibility features such as ARIA roles, focus management, and keyboard navigation.

  • The components forward refs and props to maintain flexibility and integration with other React logic.

• Composition:

  • The dialog is composed of multiple small components for modularity and reusability.

  • AlertDialogContent internally includes AlertDialogOverlay and AlertDialogPortal for proper layering and rendering.

Interaction with Other System Parts

• UI Library Integration:

  • Uses Radix UI’s @radix-ui/react-alert-dialog primitives as the base for dialog behavior and accessibility.

  • Utilizes shared utilities:

    • buttonVariants from @/components/ui/button for button theming.

    • cn from @/lib/utils for className merging.

  • This ensures that the alert dialogs are consistent with other UI components in the system.

• Client-Side Only:

  • The 'use client'; directive at the top indicates this component is meant for client-side rendering in frameworks like Next.js.

• Usage Context:

  • This component is intended to be used wherever modal alert dialogs are needed, such as confirming destructive actions or notifying users of important information.

Usage Example

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
} from './alert-dialog';

function ConfirmDeleteDialog({ onConfirm }: { onConfirm: () => void }) {
  return (
    <AlertDialog>
      <AlertDialogTrigger>
        <button>Delete Item</button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Confirm Deletion</AlertDialogTitle>
        </AlertDialogHeader>
        <AlertDialogDescription>
          Are you sure you want to delete this item? This action cannot be undone.
        </AlertDialogDescription>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={onConfirm}>Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Mermaid Component Diagram

componentDiagram
    component AlertDialog
    component AlertDialogTrigger
    component AlertDialogPortal
    component AlertDialogOverlay
    component AlertDialogContent
    component AlertDialogHeader
    component AlertDialogFooter
    component AlertDialogTitle
    component AlertDialogDescription
    component AlertDialogAction
    component AlertDialogCancel

    AlertDialog <|-- AlertDialogTrigger : uses
    AlertDialog <|-- AlertDialogContent : uses
    AlertDialogContent *-- AlertDialogPortal : contains
    AlertDialogContent *-- AlertDialogOverlay : contains
    AlertDialogContent *-- AlertDialogHeader : contains
    AlertDialogContent *-- AlertDialogFooter : contains
    AlertDialogHeader *-- AlertDialogTitle : contains
    AlertDialogHeader *-- AlertDialogDescription : contains
    AlertDialogFooter *-- AlertDialogAction : contains
    AlertDialogFooter *-- AlertDialogCancel : contains

Summary

This file provides a styled, accessible alert dialog component suite in React by wrapping Radix UI primitives. It handles the dialog structure (root, trigger, portal, overlay, content), layout components (header, footer), and semantic elements (title, description, action, cancel) with consistent theming and animations. It is designed for straightforward integration into any React-based user interface where alert dialogs are required.