Tones
Status tones map to semantic colors.
queued
running
submitted
ok
needs_review
failed
danger
Compact status labels — tone badges, channel chips, key/value pills, and status dots.
Live
<span class="badge submitted">submitted</span>
<span class="chip channel email">email</span>
<span class="pill"><span class="pill-k">Jobs</span><span class="pill-v">12</span></span>
<span class="dot submitted" aria-label="Submitted"></span>import { Badge, Chip, Pill, Dot } from 'caustica-design/core'
import 'caustica-design/css'
<Badge tone="submitted">submitted</Badge>
<Chip channel="email">email</Chip>
<Pill label="Jobs" value={12} />
<Dot tone="submitted" aria-label="Submitted" />Status tones map to semantic colors.
Denser padding for tight table cells.
Neutral or channel-colored tags.
Key/value summary counts.
Icon-scale status for dense lists — needs an accessible name.
aria-label (or adjacent text).aria-hidden if the row already conveys state.| Class | Description |
|---|---|
.badge |
Base status badge. |
.badge.{tone} |
Tone: queued, running, submitted, ok, needs_review, failed, danger. |
.badge.tiny |
Compact badge. |
.chip |
Neutral chip tag. |
.chip.channel.{email|ats|unknown} |
Channel-colored chip. |
.pill / .pill-k / .pill-v |
Key/value pill. |
.dot / .dot.{tone} |
Status dot (same tones as badge). |
From src/core/Badge.tsx — Badge, Chip, Pill, Dot.
| Prop | Type | Default | Description |
|---|---|---|---|
tone |
StatusTone |
— | Badge / Dot tone class. |
tiny |
boolean |
false |
Badge compact size. |
channel |
'email' | 'ats' | 'unknown' |
— | Chip channel modifier. |
label / value |
ReactNode |
— | Pill key and value (required). |
className / …HTML |
string / attrs |
— | Native span attributes via forwardRef. |