The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

v0.2.49Beta

Search

Dialog

Source

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

PropTypeDefaultDescription
closeOnClickOutside
booleantrue

Whether to close the dialog when clicking outside.

showCloseButton
booleantrue

Whether to show the default close button.