Status pills (tinted fill, tinted edge, deep ink), small uppercase tags, and count badges.
StatusPill names a record's state in a list or header. Badge is a small uppercase tag (soft or solid) for categories and flags. CountBadge is a number of things waiting, capped at max (99+).
Tones: neutral, info, success, warning, danger and deep (the brand). Every tone's ink clears 4.5:1 on its own fill over worst-case glass.
Installation
npx shadcn@latest add KezLahd/rime/badgeAlso installs: base.
Usage
import { Badge, CountBadge, StatusPill } from "@/components/ui";
<StatusPill tone="success">Paid</StatusPill>Examples
Tones
shadcn badge variants
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
StatusPill
| Prop | Type | Default | Description |
|---|---|---|---|
| toneRequired | Tone | ||
| childrenRequired | ReactNode | ||
| dot | boolean | Leading dot in the tone colour, for dense tables where the pill needs a second cue. | |
| size | "sm" | "md" | "md" | |
| className | string | ||
| asChild | boolean | Render the single child element (a link) with the pill's look. |
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | Tone | "neutral" | |
| variant | "soft" | "solid" | "default" | "secondary" | "destructive" | "outline" | "soft" | soft = tinted tag. solid = white text on the tone (counts needing attention). shadcn's names are accepted too: default (solid brand), secondary (soft neutral), destructive (solid danger), outline (a hairline tag with no fill). |
| childrenRequired | ReactNode | ||
| className | string | ||
| asChild | boolean | Render the single child element (a link) with the badge's look. |
CountBadge
| Prop | Type | Default | Description |
|---|---|---|---|
| countRequired | number | ||
| tone | "brand" | "danger" | "warning" | "neutral" | "brand" | |
| label | string | Accessible text, e.g. "3 pending requests". The number alone is ambiguous. | |
| max | number | 99 | |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --pill-font-size | 12px | … |
| --pill-pad-x | calc(10px * var(--density)) | … |
| --pill-radius | var(--r-full) | … |
| --r-circle | 50% | … |
| --tag-brand-bg | var(--brand-gradient) | … |
| --tag-radius | var(--r-2xs) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --border-w | tokens.css | … |
| --brand-fill | tokens.css | … |
| --brand-gradient | tokens.css | … |
| --brand-ink | tokens.css | … |
| --brand-line | tokens.css | … |
| --danger-fill | tokens.css | … |
| --danger-ink | tokens.css | … |
| --danger-line | tokens.css | … |
| --density | tokens.css | … |
| --info-fill | tokens.css | … |
| --info-ink | tokens.css | … |
| --info-line | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-inverse | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --neutral-fill | tokens.css | … |
| --neutral-ink | tokens.css | … |
| --neutral-line | tokens.css | … |
| --r-2xs | tokens.css | … |
| --r-full | tokens.css | … |
| --success-fill | tokens.css | … |
| --success-ink | tokens.css | … |
| --success-line | tokens.css | … |
| --success-solid | tokens.css | … |
| --warning-fill | tokens.css | … |
| --warning-ink | tokens.css | … |
| --warning-line | tokens.css | … |
| --warning-solid | tokens.css | … |
| --wash-strong | tokens.css | … |
Accessibility
- Colour is never the only signal: the label always says the state.
- CountBadge takes a label for screen readers ("4 waiting").
Do and don't
Do
- Map each status to one tone in one place and reuse it.
Don't
- Don't make a pill clickable; it is a label.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open status-pill.md