SuperCat Design System · Primitives

Button .kb

Variants · sized at kb-md for compactness in this grid

Primary
Accent
Secondary
Ghost
Destructive
Link External anchor
Link · grow External anchor

Loading state · animated outline

Variants
Sizes
Click → success click to start, auto-resets after 2s

Icon-only · .kb-icon

Sizes
Variants

Skeleton · .ds-skel for render-pending content

Inline

Sizes · sm / md / lg / xl (default)

sm
md
lg
xl · default
no size class

Inline form CTA · button matches input height

The chunky kb-xl button sits flush against kf-lg inputs (48px) and reads as a single composed control. Use this for hero CTAs, signup, search bars.

In context · panel

Confirm changes

Saving will publish 12 product updates to your live catalog. Reps will see them on next sync.