Variants
Real Sugoi content. Primary = the one most important action. Secondary = companion. Tertiary = low-emphasis link-like.
Primary
Secondary
Tertiary
Sizes
Default md, with --sm and --lg modifiers. Touch target minimum (44×44) preserved at the default size.
Small
Medium (default)
Large
States
Hover/active are CSS-driven. :focus-visible shows a 2px purple ring with 2px offset (Tab to test). Disabled = 50% opacity + not-allowed.
Disabled
Block (full-width)
Edge cases
Where 90% of design debt enters. Long labels, single-character labels, very long labels — all should look intentional, not broken.
Single char
Long label
Japanese
Contexts
Same primitive in different shipped surfaces. The button must read correctly in each.
On surface base
Default page background
On dark inverse
Cinema holding-page bg
On gradient hero
Deck slide hero