Badge
A static pill for counts, shortcuts and statuses: an outline tag, or a tone's wash. Not interactive.
import { Badge } from "@arcadia/ui"A badge is a label, not a control: a count, a shortcut, a status. It is a pill; neutral and muted are outline tags (a hairline ring and no fill), and the tones keep a wash. sm (16px) is the size for row meta and counts.
Badge or Chip? A badge states something and can't be pressed. A Chip is a token someone put there, a mode, a file or an attachment, and it can usually be removed. For an action, use a Button.
Examples
Tones
Tones carry meaning, so pick by what the label says.
accent is the one place the beacon colours text: keep it for something new. plan, ask and debug name the three agent modes (Plan in distance blue, Ask in green, Debug in red) and are only for naming that mode.
rootStyle takes layout and these knobs. Tones, sizes and shapes only reassign them, so a tone you need twice becomes a tone.
| Knob | Takes | Default | Sets |
|---|---|---|---|
Paint | ModeWash | var(--fill-3) | Fill (neutral and muted badges are outline tags: none). | |
Paint | var(--text-2) | Label and icon colour. | |
Paint | transparent | The 1px ring inside the edge (neutral and muted only). | |
Ref<Control | Space> | var(--control-xs) | Height (and minimum width). | |
Ref<Space> | var(--space-2) | Inline padding. | |
Ref<Radius> | var(--radius-full) | Corner radius (a pill is full). |
A <span> with text and no role: it is read as part of whatever it sits in, and it is never focusable, so it has no keys of its own. An icon is decorative.
Tone text uses the kit's intent colours, calibrated for contrast on every surface, but colour is only ever a second signal; the words carry the meaning: a lone count reads as "3", so name it in the row ("Reviews, 3 waiting") with aria-label on the row or visually hidden text. A shortcut badge beside a control is decoration: put the shortcut on the control with aria-keyshortcuts.
Badge
tone- "neutral" | "muted" | "accent" | "success" | "warning" | "danger" | "plan" | "ask" | "debug"Default"neutral"
- Shared by Badge and Chip. Mode tones (plan / ask / debug) tint at --mode-soft-strength.
size- "sm" | "md"Default"md"
md20px at 12/16,sm16px at 11/14.shape- "rounded" | "pill"Default"pill"
pillorrounded(radius 4).icon- IconName
rootStyle- RootStyle<BadgeKnobs>
- Typed StyleX override: layout and the
--badge-*knobs.
Rest props go to <span> props and render.