# Badge Tag Chip

> Badge design, tag systems, chip components, status indicators, and label patterns.

- Skill: `dragoon0x/badge-tag-chip` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/badge-tag-chip`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/badge-tag-chip/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/badge-tag-chip

---


# Badge, Tag & Chip Patterns

## Badge (notification count)
- Position: top-right corner of icon
- Shape: circle for single digit, rounded pill for 2+ digits
- Color: red for urgent, brand color for neutral
- Max display: "99+" or "9+"
- Size: small enough to not obscure the icon

## Tag (categorization)
- Purpose: classify or categorize content
- Style: outlined or subtle background, rounded corners
- Removable: include X button if user-applied
- Color-coded: consistent colors for consistent categories
- Text: short (1-3 words), sentence case

## Chip (selection/filter)
- Purpose: compact interactive elements for selection
- States: unselected (outlined), selected (filled)
- Include avatar or icon prefix where helpful
- Removable: X to deselect
- Wrap naturally in a group

## Status Indicators
| Status | Color | Example |
|--------|-------|---------|
| Success/Active | Green | "Published", "Online" |
| Warning/Pending | Yellow/Amber | "Under review", "Expiring" |
| Error/Failed | Red | "Failed", "Declined" |
| Info/Neutral | Blue/Gray | "Draft", "New" |
| Inactive | Gray | "Archived", "Disabled" |

Always pair color with text label. Never rely on color alone.