import { Modal } from "@danagraph/design-system"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
onOpenChange | (open: boolean) => void | — | Called when open state changes |
size | "default" | "sm" | "lg" | "xl" | "full" | "default" | ModalContent width preset |
showCloseButton | boolean | true | Show close button in corner |
titlereq | string | — | ConfirmModal heading |
description | string | — | ConfirmModal body text |
confirmLabel | string | "Confirm" | ConfirmModal confirm button text |
cancelLabel | string | "Cancel" | ConfirmModal cancel button text |
variant | "default" | "destructive" | "default" | ConfirmModal visual tone |
onConfirmreq | () => void | — | ConfirmModal confirm callback |
openType
booleanDefault —Controlled open state
onOpenChangeType
(open: boolean) => voidDefault —Called when open state changes
sizeType
"default" | "sm" | "lg" | "xl" | "full"Default "default"ModalContent width preset
showCloseButtonType
booleanDefault trueShow close button in corner
titlerequiredType
stringDefault —ConfirmModal heading
descriptionType
stringDefault —ConfirmModal body text
confirmLabelType
stringDefault "Confirm"ConfirmModal confirm button text
cancelLabelType
stringDefault "Cancel"ConfirmModal cancel button text
variantType
"default" | "destructive"Default "default"ConfirmModal visual tone
onConfirmrequiredType
() => voidDefault —ConfirmModal confirm callback
MobileTouch Target
Full-screen on mobile. All interactive controls inside the modal (buttons, close) must meet 44px minimum.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?