Callout

A tinted block with a note, a warning or a consequence, next to the content it belongs to. The tone also decides whether a screen reader announces it.

When to use it

A section needs two or three sentences that change how it should be read — when a price list starts, what saving will do.
A consequence has to be flagged before the user reaches for the action.
The result of a long operation should stay on the page rather than vanish like a toast.

When not to use it

The text is help for the whole screen and is driven by an account preference — that is IngotPageHint.
The block should open an overview and carry what awaits action — that is IngotAttentionPanel, and a page may hold one.
The message is the result of an action and must not stop the work — that is a toast.
The error belongs to one field. It belongs at the field, not in a block at the top.

Properties

tone: "info" | "ok" | "warn" | "danger" — The block's meaning. Defaults to info. warn and danger are announced as an alert.
title: ReactNode — One line without a full stop — the block's own heading.
children: ReactNode — The body: two or three sentences. Longer text belongs on the page, not in a block.
actions: ReactNode — At most two actions at the foot. A third means this is a screen, not a note.
testId: string — An anchor for tests.