Component
Chip
Figma: colored chips = bg 500, border 700, text 900. Light (UI background) and dark (UI dark card). Lowercase text, font-semibold.
Color variants (500 / 700 / 900)
chip titlechip titlechip titlechip titlechip titlechip title
UI: light and dark
chip titleselectedchip titleselected
selected only in light/dark.
Badge variants (analysis)
Language (language + level), requirementMatched (matches), requirementMissing (missing). Read-only inside analysis cards.
Czech - Native languageEnglish - AdvancedReactTypeScriptGraphQL
Where to use
Filters (skills, tags), Traffic Light (green/red/yellow). Aliases: primary→purple, scoreHigh→green, scoreMedium→yellow, scoreLow→red, default→light.
<Chip variant="green">chip title</Chip>