Callout

A soft explanatory banner. Meaning is carried by an icon and text, never colour alone. Warning and danger announce as alerts; the rest are status regions. The ai tone is its own faint green wash, deliberately never blue.

Heads up — the export runs nightly.

Changes saved.

This plan renews in 3 days.

Two records failed to sync.

Suggested: merge the duplicate customers.

<Callout tone="info">Heads up — the export runs nightly.</Callout><Callout tone="success">Changes saved.</Callout><Callout tone="warning">This plan renews in 3 days.</Callout><Callout tone="danger">Two records failed to sync.</Callout><Callout tone="ai">Suggested: merge the duplicate customers.</Callout>

With a title

Approaching your limit

You have used 90% of this month's quota.

<Callout tone="warning">  <Text variant="body-sm" className="font-medium">Approaching your limit</Text>  <Text variant="body-sm" tone="secondary">You have used 90% of this month's quota.</Text></Callout>

Props

Prop	Type	Default	Notes
`tone`	`'info' \| 'success' \| 'warning' \| 'danger' \| 'ai'`	`'info'`	Sets colour, icon and ARIA role.
`icon`	`ReactNode \| null`	—	Override the tone icon, or null to omit it.