Koyo catalog
Koyo Badge
Koyo Badge documents product labels, status marks, chips, and compact counters with the neutral Figma primary/default, shared Koyo palette, Koyo orange accent, outline, ghost, and destructive tones.
Reference scope
Base/store badge nodes are reference only for primitive structure and density.
Variants
Implemented variants and confirmed Figma notes; uncertain mapping details stay explicit.
Token Notes
Token decisions that should stay visible while the catalog is migrated.
- Figma variants include Primary, Secondary, Outline, Ghost, and Destructive.
- Fresh Figma context for Badge node 273:30617 shows Primary/default uses var(--general/primary, #171717), so Badge primary/default is neutral black, not Koyo orange.
- Koyo orange is available as the koyo accent/component variant where useful, but it is not a global primary replacement for Badge.
- Brand, Success, Yellow, Purple, and Error use the shared Koyo palette tokens confirmed from the Button-page swatch grid.
- Roundness maps to default rounded-lg and round rounded-full shapes.
- Focus states use the shared ring token, with destructive focus mapped to focus/ring error.
- Koyo docs expose the product Badge component; Figma base/store Badge nodes remain reference inputs only.
- Known spacing uses 3xs 2px vertical padding, 2xs 4px gap, and xs 8px horizontal padding.
Code Targets
Files the docs entry points at today, ready for later catalog linking.
Badge source
src/components/ui/badge.tsxKoyo metadata
src/config/koyo-components.ts
Figma Mapping
Base/store nodes are reference only. The Koyo component is the docs and implementation target.
- Page
- Badge (842:44441)
- Base/store reference
- Frame Badge (273:30617), component set Badge (19:6979)
- Koyo-owned target
- Brand Theme frame (3455:13168), component set Badge (3455:13174)
- Confidence
- high