Components
Dialog
A modal window for displaying additional content or actions.
Loading...
Installation
NPM packages are currently unstable and may cause issues. Use it at your own risk.
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>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. |