Dialog

Copy MarkdownOpen

Example

Features

The HTML <dialog> element can be used to build dialogs. However, it is not yet widely supported across browsers, and building fully accessible custom dialogs from scratch is very difficult and error prone. Dialog helps achieve accessible dialogs that can be styled as needed.

• Flexible – Dialogs can be used within a Modal or Popover to create many types of overlay elements.
• Accessible – Exposed to assistive technology as a dialog or alertdialog with ARIA. The dialog is automatically labeled by a nested <Heading> element. Content outside the dialog is hidden from assistive technologies while it is open.
• Focus management – Focus is moved into the dialog on mount, and restored to the trigger element on unmount. While open, focus is contained within the dialog, preventing the user from tabbing outside.

Installation

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

npx @libravelui@latest add dialog

Anatomy

import {
  Dialog,
  DialogTrigger,
  DialogHeader,
  DialogBody,
  DialogFooter,
  DialogCloseIcon,
  DialogClose,
  DialogContent,
} from "@/components/ui/core/dialog";

<Dialog>
  <DialogTrigger tone="secondary">Open Dialog</DialogTrigger>

  <DialogContent isBlurred>
    {({ close }) => (
      <>
        <DialogCloseIcon isDismissable />

        <DialogHeader
          title="Dialog Title"
          description="Dialog description goes here."
        />

        <DialogBody>Dialog body goes here</DialogBody>

        <DialogFooter>
          <DialogClose>Close</DialogClose>
        </DialogFooter>
      </>
    )}
  </DialogContent>
</Dialog>

Another Example

Sizes

The dialog component supports multiple size options to fit various content needs. Choose from predefined sizes to ensure the dialog aligns well with your layout, whether you're displaying a simple message or a complex form.

Props

Loading types…