Callout

Inline emphasis for things the reader must not miss.

v1.0.0·Updated Jul 8, 2026 · 10:45

◇ Open the Figma file ↗✳ Start building with Claude ↗

Live Demo — Fully Interactive

Heads upDesign Tokens are the source of truth. Change them once and every surface follows.

SavedYour changes are in sync across all nine platforms.

Approaching your limitYou have used 92% of this month's builds.

Sync failedThe last publish could not reach two platforms.

Configuration

Variant

Extras

Title

Approaching your limitA short line of guidance goes here.

<Callout variant="warning" title="Approaching your limit" action />

Behavior — The Engineering Contract

Prop / event	Type	Notes
variant	info·success·warning·error	Accent bar, icon and role
title / children	string / node	Heading and body copy
action	ReactNode	Buttons row under the text
onDismiss	() => void	Renders the × and fires on close
role	status · alert	alert for errors so AT announces it

A Callout is inline and persistent. For a transient confirmation that floats and auto-dismisses, use Snackbar; for a one-word status, use Badge.

Anatomy

Almost full92% of builds used.

1Accent bar3px left edge; the variant colour, doubled by the icon.

2IconOne glyph per variant, aligned to the title.

3BodyTitle, text, then optional actions. Optional trailing ×.

Do's and Don'ts

✓ Do

SavedIn sync everywhere.

Match the variant to the meaning: green for good, red for broken.

✕ Don't

Welcome!

Don't use error red for a neutral message. Colour is a promise.

✓ Do

Sync failed

Give errors a way out. Pair the message with the fix.

✕ Don't

Notice coInfo

Notice coWarn

Notice coError

Don't stack callouts. Three at once is noise; consolidate or queue.

In context: Examples

A · Top of a form

Fix the two fields below to continue.

A summary error above the fields it refers to.

B · Empty state

No clients yetAdd your first client to get started.

Guidance in a calm info callout, not an error.

C · Settings notice

Changing this affects every project.

A warning inline with the control it qualifies.

Measurements & Tokens

Token	Value	Role
--co-pad	14px 16px	Callout padding
--co-bar	3px left	Accent edge
--co-info	#3E63DD	Info bar & icon
--co-success	#1FA35C	Success
--co-warning	#FFB020	Warning
--co-error	#EB4A4F	Error (role=alert)

Code

<div class="o-callout o-callout--warning" role="status">
  <span class="o-callout__icon"><WarnIcon /></span>
  <div class="o-callout__body">
    <span class="o-callout__title">Approaching your limit</span>
    <span class="o-callout__text">You have used 92% of this month's builds.</span>
  </div>
</div>

Related Components

SnackbarBrief confirmations that never block the work.● documented LoaderFor the moments honesty requires a wait.● documented ProgressDeterminate movement toward a visible end.● documented