Dialog

Overview

Use a dialog when the user needs to focus on a task without leaving the current page.

Dialogs are good for forms, confirmations, detail views, short workflows, and focused editing. Avoid dialogs for large multi-step experiences that need a full page.

Anatomy

A dialog has a trigger, popup, header, title, description, content, footer, and close action. The title should explain the task. The footer usually contains the main action and a cancel or close action.

Behavior

Dialogs open above the page and should keep focus inside while open. Use nested dialogs only when the second dialog is a true interruption, such as confirming a close action.

Accessibility

Always provide a title. Add a description when the task needs context. Make sure destructive actions are explicit and that focus returns to the trigger when the dialog closes.

Installation

npx love-ui@latest add dialog

Usage

import {
  Dialog,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogPopup>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose>Close</DialogClose>
    </DialogFooter>
  </DialogPopup>
</Dialog>

Examples

The examples show opening from a menu, nesting, and confirming close actions.

Open from a Menu

Nested Dialogs

Close Confirmation