Centrim Design System — a token-first, accessible React component system.
Tags & badges
Compact labels for categories, metadata and status. The treatments use Centrim semantic tokens in both light and dark themes.
Tag
A static category, keyword or filter label. Choose an outlined, subtle or solid semantic treatment to match the required emphasis.
import { Tag } from "@/design-system";
When to use
- Categories, skills and keywords
- Metadata that benefits from quick visual grouping
When not to use
- Status that needs semantic meaning — use Badge
- Clickable filters — use Chip
Outlined
Low-emphasis labels matching the light treatment in the reference.
Solid
High-emphasis labels for short, scannable metadata.
Subtle
Soft fills for dense groups without competing with primary actions.
Sizes and removable
Badge
A compact, non-interactive status or metadata label. Use subtle by default, outline for light emphasis, and solid for the strongest status treatment.
import { Badge } from "@/design-system";
When to use
- Statuses, counts and concise system metadata
- Icon-supported information labels
When not to use
- Categories and keywords — use Tag
- Actions — use Button or IconButton
Outlined status badges
Subtle and solid
Dot indicators
A tonal dot for quiet status lists; the label still carries the meaning.
Leading icons
Pair the tone with an icon so status is never colour-only.
With avatar
Compose Avatar at the matching size to attribute a status to a person.
Sizes
Small (24px), medium (28px) and large (32px) badges.
Dismissible
The optional remove control is keyboard reachable and needs an accessible name.
Icon-only
Circular icon badges for dense rows; each carries an aria-label.
Counts
Rounded counts for overflow and aggregate metadata.