Dialog
Modal dialogs for create and edit flows. Compound: Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogContents, DialogFooter.
Size
Layout
default scrolls the whole panel; stacked scrolls DialogContents only.
default
stacked
Mobile presentation
Resize below --bp-sm to compare sheet vs centered modal.
Close affordance
Developer
import { Dialog } from "@financial-tracking/design-system"DialogContent
At ≤640px (--bp-sm), defaults to a bottom sheet. Prefer layout="stacked" for forms so header/footer stay put while the body scrolls.
| Prop | Type | Default |
|---|---|---|
size | "sm" | "md" | "lg" | "md" |
layoutstacked keeps header/footer fixed; pair with DialogContents. | "default" | "stacked" | "default" |
mobilePresentation | "sheet" | "center" | "sheet" |
hideCloseButtonUse with DialogHeaderClose in the header row. | boolean | false |