A dialog overlay that prompts users for input or confirmation.
Loading demo: modal-real-world
npx sdaia-ui@latest add modal
import { Modal } from "@/components/ui/modal"<Modal />Use surface="glass" to enable Glass Effect
Loading demo: modal-glass
The standard desktop modal dialog.
Loading demo: modal-default
Use `mobile={true}` for the full-screen mobile variant.
Loading demo: modal-mobile
Props for the Modal component.
Prop | Type | Default | Required |
|---|---|---|---|
showHeader | boolean | true | optional |
divider | boolean | true | optional |
showActions | boolean | true | optional |
mobile | boolean | false | optional |
title | string | - | optional |
supportingText | string | - | optional |
showSupportingText | boolean | - | optional |
headerPlacement | 'start' | 'center' | 'start-stacked' | 'start' | optional |
featuredIcon | ReactNode | - | optional |
showCloseButton | boolean | true | optional |
onClose | () => void | - | optional |
actionsType | 'hug-start' | 'hug-center' | 'hug-end' | 'fill' | 'stack' | 'hug-start' | optional |
primaryLabel | string | - | optional |
secondaryLabel | string | - | optional |
showSecondary | boolean | - | optional |
tertiaryLabel | string | - | optional |
showTertiary | boolean | - | optional |
onPrimaryClick | () => void | - | optional |
onSecondaryClick | () => void | - | optional |
onTertiaryClick | () => void | - | optional |
children | ReactNode | - | optional |
className | string | - | optional |