Modals (Dialogs)

Focused interactions that require user attention.

Overview

The Dialog component (often referred to as a Modal) is used to display content that requires the user's immediate attention or to perform a specific task without leaving the current page.

Usage

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"

export function MyModal() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Open Modal</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you absolutely sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete your account
            and remove your data from our servers.
          </DialogDescription>
        </DialogHeader>
        <div className="flex justify-end gap-4 mt-4">
          <Button variant="ghost">Cancel</Button>
          <Button variant="destructive">Delete Account</Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}

Components

• Dialog: The main wrapper for the modal.
• DialogTrigger: The element that opens the modal (e.g., a button).
• DialogContent: The container for the modal's content.
• DialogHeader: A container for the title and description.
• DialogTitle: The primary heading of the modal.
• DialogDescription: A secondary heading or description.

Best Practices

• ✅ Do this: Use modals for critical actions or to collect specific information.
• ✅ Do this: Ensure the modal has a clear way to close it (e.g., a "Cancel" button or an "X" icon).
• ❌ Don't do this: Use modals for large amounts of content or complex workflows; consider a separate page instead.