Components
Alert Dialog
A modal dialog for alerting users about important actions or decisions.
Installation
npm install @mijn-ui/react-alert-dialogUsage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@mijn-ui/react-alert-dialog"<AlertDialog>
<AlertDialogTrigger>Open</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>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. |
AlertDialog Style Slots
| Slot Name | Targeted Component | Purpose |
|---|---|---|
base | AlertDialog | Styles the root AlertDialog component. |
trigger | AlertDialogTrigger | Styles the trigger element for the dialog. |
overlay | AlertDialogOverlay | Styles the background overlay for the dialog. |
contentWrapper | AlertDialogContent | Styles the wrapper around dialog content. |
content | AlertDialogContent | Applies styles to the dialog content element. |
header | AlertDialogHeader | Styles the dialog header. |
footer | AlertDialogFooter | Styles the dialog footer. |
title | AlertDialogTitle | Styles the title of the dialog. |
description | AlertDialogDescription | Styles the description text inside the dialog. |
action | AlertDialogAction | Styles the action buttons inside the dialog. |
cancel | AlertDialogCancel | Styles the cancel button inside the dialog. |