Modal
A dialog overlay that prompts users for input or confirmation.
<Modal headerPlacement="center" featuredIcon={<AlertCircleIcon style={{ width: 20, height: 20 }} />} title="Invite a team member" supportingText="Send an invitation to join your SDAIA workspace."Installation
npx sdaia-ui@latest add modal
Usage
import { Modal } from "@/components/ui/modal"<Modal />Examples
Default
The standard desktop modal dialog.
<Modal title="Title goes here" featuredIcon={<AlertCircleSVG />}/>Mobile
Use `mobile={true}` for the full-screen mobile variant.
<Modal mobile/>API Reference
ModalProps
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 |