Callout
Inline message that stays on the page, with an optional action and dismiss.
Master
Toggle intent and close button to preview every Callout combination.
Usage
Use Callout for a message that stays on the page until the user acts on it or dismisses it. Pick the intent from what the message means. Keep it to one or two sentences and at most one action. Warning and danger are announced right away; info and success are announced politely. See contracts/callout.json for the full contract.
Do's
- Page or form feedback the user should still see after it appears.
- Info, success, warning or danger copy tied to the current view.
- A notice with one follow-up action, like Review or Update card.
Don'ts
- Do not invent a local Callout, Banner or Notice.
- Do not use for short status labels on rows or cards.
- Do not use for pop-up messages that disappear on their own.
- Do not put more than one action in a Callout. Use a Button nearby instead.
- Do not use raw hex. Intent sets every color.
<Callout intent="info" actionLabel="Main action" closeButton > Callout message goes here </Callout>