Components
A modal window for displaying additional content or actions.
Installation
npm install @mijn-ui/react-dialogUsage
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@mijn-ui/react-dialog"<Dialog>
<DialogTrigger>Open</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>API Reference
Built on Radix UI — all underlying primitive props are forwarded in addition to the props below.
| Prop | Type | Default | Description |
|---|---|---|---|
unstyled | boolean | false | Opt out of the default styles to fully customize the component. |
classNames | object | — | Override classes per slot (see Style Slots below). |
className | string | — | Additional classes for the root element. |
Dialog Style Slots
| Slot Name | Targeted Component | Purpose |
|---|---|---|
base | Dialog | Styles the root dialog component. |
trigger | DialogTrigger | Styles the trigger for opening the dialog. |
overlay | DialogOverlay | Styles the background overlay of the dialog. |
content | DialogContent | Styles the dialog content area. |
contentWrapper | DialogContent | Styles the wrapper around dialog content. |
header | DialogHeader | Styles the dialog header. |
footer | DialogFooter | Styles the dialog footer. |
title | DialogTitle | Styles the title of the dialog. |
description | DialogDescription | Styles the description text of the dialog. |
close | DialogClose | Styles the close button of the dialog. |