Badges & Chips
Compact labeling system. Badges are static labels; chips are interactive filters or tags.
Badge variants
Six semantic colors, all using a border+text approach without solid fill.
All variants
.badge
Default metadata, version numbers, categories.
.badge .color-group-primary
Primary highlight, active status, featured items.
.badge .color-group-secondary
Secondary highlight, links, information labels.
.badge .color-group-success
Positive state: online, verified, complete.
.badge .color-group-warning
Caution state: pending, review required.
.badge .color-group-danger
Error state: offline, failed, critical.
With icons
Badges can include a leading icon. Keep it 12–14px.
Chips
Used for filters, tags, and removable selections. Neomorphic base distinguishes them from flat badges.
Base chips
Removable chips
In context
Badges inside card, table row, and filter bar patterns.
@vulppi/kit
npm install @vulppi/kit
Core utilities and primitives for Vulppi projects. Includes type helpers and common patterns.
Filter bar pattern
Usage rules
Do
- Use badges for read-only status labels
- Use chips for interactive selections
- Include an icon alongside status badges
- Keep text concise — max 2 words
Don't
- Don't use more than 3 badge colors in one view
- Don't use a badge where a chip is interactive
- Don't mix badge styles (solid vs. border)
- Don't use warning for non-cautionary info