vocab.design

component

Callout

also called admonition, inline alert, message bar (fluent), inset text (govuk), flashbar (cloudscape)

A boxed note set into the flow of content to carry a warning, tip or aside, coloured by severity and staying put once shown.

A callout is content, not notification. It is written into the page at the point where it is relevant, it stays there for every reader on every visit, and it is usually pulled out of the prose because a reader skimming would otherwise miss something that costs them (a limit, a caveat, an irreversible step). Docs toolchains call the same thing an admonition and give it a set of flavours: note, tip, warning, caution.

The neighbouring words differ by where they come from and how long they last. A toast is transient and system-generated. A banner sits at the top of a page or region and speaks about that whole surface, often about a state that just changed. A callout speaks about the paragraph it interrupts and has no lifecycle at all, so a dismiss button on one is usually a sign it wanted to be a banner.

Severity is carried by colour, an icon and a word, never by colour alone, and it should be spent carefully: a page where every third paragraph is a red box has taught its readers to skip red boxes. Reserve the loudest level for consequences that are hard to undo, and demote everything else to a plain note.

Keep the box short and keep the surrounding text honest. A callout that runs to five paragraphs has become the content, and the prose around it has become the aside. If the note is essential to following the steps, it belongs in the steps.

Which word?

If you wantsay
a boxed note sitting inside the contentcallout
a passing confirmation that cleans up after itselftoast
telling one field that its value failederror message
one message in a conversation viewchat bubble
a message strip that stays until it is dealt withbanner

Implementations

Specimens illustrate the concept; for production use, start here.

fluentMessage bar

Sources