Koyo Button

DraftKoyo-owned

Koyo Button documents the product action hierarchy, Koyo orange primary action, explicit black/neutral action, and icon button sizing.

Reference scope

Base/store button nodes are reference only for accessible interaction patterns.

Variants

Implemented variants and confirmed Figma notes; uncertain mapping details stay explicit.

DefaultBlackBrandSuccessYellowPurpleErrorSecondaryDestructiveOutlineGhostLinkIcon

Token Notes

Token decisions that should stay visible while the catalog is migrated.

The implemented default Button is the Koyo orange component primary using --koyo-button-primary, --koyo-button-primary-hover, and --koyo-button-primary-ring.
The explicit Black variant preserves the original shadcn neutral primary action with bg-primary/text-primary-foreground.
Implemented palette variants are Default/Koyo orange, Black, Brand, Success, Yellow, Purple, Error, Secondary, Destructive, Outline, Ghost, and Link.
Brand, Success, Yellow, Purple, and Error use confirmed Button-page swatches from the Figma palette grid around node 3462:6548 onward.
Figma size variants include Default, Small, Mini, Large, and Extra Large; implementation currently exposes default, mini, sm, lg, xl, icon, icon-sm, and icon-lg.
Roundness maps to default rounded-lg and round rounded-full button treatments.
Koyo docs expose the product Button component; Figma base/store Button nodes remain reference inputs only.
Interactive state values should be represented with CSS behavior and forced-state examples, not public props.

Code Targets

Files the docs entry points at today, ready for later catalog linking.

Figma Mapping

Base/store nodes are reference only. The Koyo component is the docs and implementation target.

Page: Button (842:44442)
Base/store reference: Frame Button (273:30945), component set Button (9:1071)
Koyo-owned target: Second Button frame (3268:27919), component set Button (3268:27118)
Confidence: high