Koyo Component Catalog
Start of the Koyo docs scaffold for components that Koyo owns and documents. Base and store components remain reference material for Figma mapping and should not become standalone docs entries here.
Figma rule for this catalog
Document Koyo-owned targets first. Use base/store nodes only as reference inputs for anatomy, behavior, and token mapping.
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.
- Figma role
- Koyo-owned
- Base reference
- Base/store badge nodes are reference only for primitive structure and density.
View details
Button
Koyo Button documents the product action hierarchy, Koyo orange primary action, explicit black/neutral action, and icon button sizing.
- Figma role
- Koyo-owned
- Base reference
- Base/store button nodes are reference only for accessible interaction patterns.
View details
Input
Koyo Input documents text entry fields, Koyo focus/error states, disabled states, selection styling, and file affordances.
- Figma role
- Koyo-owned
- Base reference
- Base/store input nodes are reference only for field anatomy and browser behavior.
View details
Select
Koyo Select documents trigger/content/item surfaces using shared Koyo border, brand focus, selected, and error tokens where the implementation supports them.
- Figma role
- Koyo-owned
- Base reference
- Base/store select behavior remains Radix reference context for trigger, content, items, and keyboard support.
View details
Checkbox
Koyo Checkbox documents the shared Koyo brand checked state, focus ring, invalid ring, and compact rounded-sm control shape.
- Figma role
- Koyo-owned
- Base reference
- Base/store checkbox behavior remains Radix reference context for checked, unchecked, disabled, and invalid states.
View details
Switch
Koyo Switch documents tokenized checked/unchecked tracks with Koyo brand checked state, secondary unchecked state, focus ring, and invalid ring.
- Figma role
- Koyo-owned
- Base reference
- Base/store switch behavior remains Radix reference context for checked, unchecked, disabled, and invalid states.
View details
Radio Group
Koyo Radio Group documents grouped choices using Koyo brand selected indicators, focus rings, invalid rings, and shared form-control spacing.
- Figma role
- Koyo-owned
- Base reference
- Base/store radio group behavior remains Radix reference context for grouped selection and keyboard support.
View details
Card
Koyo Card documents product containers for grouped content, metrics, settings, and media.
- Figma role
- Koyo-owned
- Base reference
- Base/store card nodes are reference only for shell anatomy and content slots.
View details
Alert
Koyo Alert documents inline feedback, severity messaging, and product notification content.
- Figma role
- Koyo-owned
- Base reference
- Base/store alert nodes are reference only for announcement structure and severity patterns.
View details
Accordion
Koyo Accordion documents disclosure lists used for FAQs, settings, and progressive detail.
- Figma role
- Koyo-owned
- Base reference
- Base/store accordion nodes are reference only for disclosure behavior and keyboard support.
View details
Avatar
Koyo Avatar documents profile imagery, initials, groups, presence, and fallback treatments.
- Figma role
- Koyo-owned
- Base reference
- Base/store avatar nodes are reference only for image and fallback anatomy.
View details