Callout
An inline message about the content around it: a token expiring, routing paused, a failed check.
Examples
Tones
The tone is also read out ("Warning: …"), so colour is never the only signal.
Note: Tools are cached for 5 minutes
Success: Connection works
Warning: Token expires in 2 days
Error: Notion is failing
Note: Tools are cached for 5 minutes
Success: Connection works
Warning: Token expires in 2 days
Error: Notion is failing
<Callout tone="neutral">Changes apply to new agent sessions only.</Callout>
<Callout tone="info" title="Tools are cached for 5 minutes">
Refresh the server to pick up new tools sooner.
</Callout>
<Callout tone="success" title="Connection works">…</Callout>
<Callout tone="warning" title="Token expires in 2 days">…</Callout>
<Callout tone="danger" title="Notion is failing">…</Callout>With actions
Actions sit on the right and wrap under the text on phones.
Warning: Token expires in 2 days
<Callout
tone="warning"
title="Token expires in 2 days"
actions={<Button size="sm" variant="secondary" icon="key">Rotate token</Button>}
>
Sentry stops answering when it does.
</Callout>Banner
A full-width strip across the top of a page or card. One at a time.
Note: Routing is paused
Agents get an error for every tool until you resume.
<Card>
<Banner
tone="info"
icon="route"
title="Routing is paused"
actions={<Button size="sm" variant="secondary">Resume routing</Button>}
/>
<CardBody>
<Text tone="ink-2">Agents get an error for every tool until you resume.</Text>
</CardBody>
</Card>Usage
import { Callout, Banner } from '@switchboard/ui'
{token.expiresInDays <= 7 ? (
<Callout tone="warning" title={`Token expires in ${token.expiresInDays} days`}>…</Callout>
) : null}Props
Every component also takes mix, for css() and mixins applied after its own style.
Callout
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'info' | Tint, icon and the word read before the title. |
| title | RemixNode | – | Bold first line. Keep it to the fact. |
| children | RemixNode | – | Body text under the title. |
| icon | IconName | – | Replaces the tone's icon. |
| actions | RemixNode | – | Small buttons on the right. |
| variant | 'callout' | 'banner' | 'callout' | Rounded box, or full-width strip. |
| live | 'polite' | 'assertive' | – | Announce when it appears after load: role="status", or role="alert" for urgent errors. |
Also accepts every <div> attribute.
Banner
| Prop | Type | Default | Description |
|---|---|---|---|
A Callout with variant="banner". Takes every Callout prop except variant.
Accessibility
- A visually hidden tone word ("Warning:", "Error:") comes before the title, so the tone is spoken.
- Static by default. Pass live="polite" (role="status") or live="assertive" (role="alert") when it appears after load.
- Text on tints uses the *-ink tokens, which meet contrast in both themes.
Guidance
Do
- Put the callout next to what it is about.
- Give it the one action that fixes the problem.
Don’t
- Use a callout for a result of something the person just did; use a toast.
- Stack several callouts; merge them or pick the most important.