Component · Content · 26
Callout
Callout = an inline block with a coloured accent bar and a tinted background, used to add context without breaking the reading flow.
Key correction
The adapter layer replaces the single-format assumption.
MVP pick
One engine exposes an OpenAI-compatible API out of the box.
Risk note
The WebSocket adapter is the largest work item in this phase.
Breaking change
The migrate command is one-way — do not build sync on it.
What is a Callout?
A callout is a standing note. Pick the severity, name the accent bar and the tinted background, keep it to a title and one line.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- A positive confirmation toast (saved, sent, copied).
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- Say this state explicitly in the prompt.
Anatomy
These are the parts to name in your prompt.
- 01 Accent bar
- 02 Title
- 03 Body
When to use
- Emphasizing a correction or a key fact in docs
- Risk and warning notes inside long content
- Mild success or error context that stays on the page
Avoid when
- Transient feedback — use a Toast
- Messages that need a decision — use a Modal
- More than three callouts per page
See also
Create a callout component.
STYLE
- 4px left accent bar, 8% tinted background, rounded right corners
- four severities: info purple, success green, warning orange, danger red
- bold 14px title plus one body line
STATES
- default, dismissible with a close icon
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui