VendHub Design System

Button System

9 token-aligned variants, 5 sizes, 6 interaction states. Built with accessible focus rings, semantic color use, and tactile press feedback baked into every variant.

Auto-cycling · Click a pill to lock · Hover the button for magnetic pull
01 · Variants

Nine Token-Aligned Variants

Three families: brand emphasis (Primary, Outline, Subtle), semantic status (Destructive, Warning, Info), and neutral (Neutral, Ghost). Hover any button to see its hover treatment.

Primarybtn-primary
Single most important action per view. One per dialog.
Primary Outlinebtn-primary-outline
Second emphasis action when two primaries would compete.
Primary Subtlebtn-primary-subtle
Low-emphasis on dark or tinted surfaces. Soft brand presence.
Destructivebtn-destructive
Confirmation step inside dialogs — never the trigger that opens one.
Destructive Outlinebtn-destructive-outline
Soft destructive — table row delete, list item remove.
Warningbtn-warning
Risk-implied actions. Not a replacement for primary green.
Infobtn-info
Informational actions — contact, help, learn more.
Neutralbtn-neutral
Cancel, back, go-to-previous. Pairs with primary as secondary action.
Ghostbtn-ghost
Tertiary navigation. Does not look like a button at rest.
02 · Sizes

Five Sizes, One Scale

Same variant, five heights. Click any size below to rescale the live demo button — the spec readout updates with exact pixel values for height, padding, font, and icon.

XL48px / 16px / 600
LG40px / 14px / 600
MD32px / 14px / 600
SM28px / 12px / 600
XS24px / 12px / 600
Live Demo · Size XL
Pick a size
Height48px
H Padding24px
Font16px / 600
Icon20px
03 · States

Six States, One Pattern

Every variant supports the same six states. Press Cycle below to watch a single button move through all of them — Default, Hover, Focus, Active, Loading, Disabled.

Default
Resting state. Token-aligned bg-primary-600.
Hover
Darkens 1 step → bg-primary-700.
Focus
3px ring with primary-500 at 40% opacity.
Active
Tactile press → scale(.97) + darken.
Loading
Spinner inline. pointer-events: none prevents double-submit.
Disabled
Override bg + text. Never use opacity alone.
Live Demo · Default
Resting state — bg-primary-600.