Dialog

A modal dialog component for displaying content in an overlay.

Usage

Import the Dialog components from @bun-ui/react and use them in your project:

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@bun-ui/react"

<Dialog>
  <DialogTrigger className="btn">Open Dialog</DialogTrigger>
  <DialogContent>
    <DialogTitle>Dialog Title</DialogTitle>
    <p>This is the content of the dialog.</p>
    <DialogClose className="btn">Close</DialogClose>
  </DialogContent>
</Dialog>

Examples

Form Dialog

Non-Modal Dialog

A non-modal dialog allows users to interact with both the dialog and the rest of the page simultaneously. This is ideal for:

• Displaying supplementary information
• Showing tooltips or help content
• Presenting non-critical notifications
• Providing quick access to additional features

To create a non-modal dialog, set the modal prop to false:

Props

DialogContent