Badge
A short, quiet label for a fact about a row: transport, auth type, a count, a state.
Examples
Tones
Light
NeutralAccentConnectedExpires soonFailedBeta
Dark
NeutralAccentConnectedExpires soonFailedBeta
<Badge>Neutral</Badge>
<Badge tone="accent">Accent</Badge>
<Badge tone="success" dot>Connected</Badge>
<Badge tone="warning">Expires soon</Badge>
<Badge tone="danger">Failed</Badge>
<Badge tone="info">Beta</Badge>Identifiers and icons
Mono only for things a person types into another program, like a transport name.
HTTPSSEOAuth
<Badge mono>HTTP</Badge>
<Badge mono>SSE</Badge>
<Badge icon="key">OAuth</Badge>Usage
import { Badge } from '@switchboard/ui'
<Badge mono>{server.transport}</Badge>Props
Every component also takes mix, for css() and mixins applied after its own style.
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | Tint and text colour. |
| dot | boolean | – | Leading status dot in the tone colour. |
| icon | IconName | – | Leading 12px icon. |
| mono | boolean | – | Plex Mono, for identifiers. |
Also accepts every <span> attribute.
Accessibility
- A badge is plain text in a <span>; its colour is never the only signal, the word carries the meaning.
- Status text on tints uses the *-ink tokens, which meet contrast in both themes.
Guidance
Do
- Keep it to one or two words.
- Use a Lamp, not a badge, for live server state.
Don’t
- Make badges clickable.
- Stack more than three badges on one row.