The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
A modal dialog component for displaying content in an overlay.
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>
A non-modal dialog allows users to interact with both the dialog and the rest of the page simultaneously. This is ideal for:
To create a non-modal dialog, set the modal
prop to false
:
Prop | Type | Default | Description |
---|---|---|---|
closeOnClickOutside | boolean | true | Whether to close the dialog when clicking outside. |
showCloseButton | boolean | true | Whether to show the default close button. |