BLOCKS / INTERACTIVE

Button block

Primary, secondary, and ghost button styles with size variants, icon support, full-width mode, and dark background options.

Primary, Secondary & Ghost

Three core button variants for different levels of visual emphasis.

Primary Button

Secondary Button

Ghost Button

Size variants

Small, medium, and large button sizes for different UI contexts.

Small

paddingTop/Bottom: 8px
paddingLeft/Right: 16px
fontSize: 12px

Medium

paddingTop/Bottom: 10px
paddingLeft/Right: 24px
fontSize: 13px

Large

paddingTop/Bottom: 14px
paddingLeft/Right: 32px
fontSize: 14px

Buttons with icons

Icon placement on either side of the label for directional cues.

Icon Left

Icon Right

Secondary with icon

Full-width button

A button that stretches to fill its container, ideal for mobile or card footers.

Full-width Primary

Full-width Secondary

Buttons on dark

Inverted button styles for dark sections and overlays.

Primary Inverted

Secondary Inverted

Ghost Inverted