Callout

Inline status messaging for forms and import flows.

Variant

Heads up
Your import will overwrite matching rows.
Parsing warnings
Some rows were skipped due to missing dates.
Import failed
Could not parse the uploaded file.
Import complete
42 transactions were added.

With action

Duplicates found
3 rows match existing transactions.

Motion

error defaults to motion="shake".

Could not save
Check the form and try again.

Developer

import { Callout } from "@financial-tracking/design-system"

API reference

PropTypeDefault
variant"info" | "warning" | "error" | "success""info"
titleRequired.string—
bodyReactNode—
actionReactNode—
motionError variant briefly shakes on mount (respects reduced motion)."none" | "shake"error → "shake"; else "none"