Buttons

Button styles with states, sizes, icons, and copy-ready code you can reuse across the kit.

Primary

Secondary

Tertiary

Ghost

Danger

Default

Hover

Active

Disabled

Primary

Secondary

Tertiary

Ghost

Danger

Large

Medium (Default)

Small

Quick guide

Default Button

Name: Default Button
Sample ID: btn-primary-md-default-default-button
Variant: Primary
State: Default
Size: Medium
Usage: High-emphasis call to action for the main path on a screen.
Classes: c1-button c1-button-primary c1-button--medium
Size and spacing: 52px height, 28px horizontal padding, 16px label size, 18px corner radius.
Colors: Background #0276BF, text #FFFFFF, border transparent.
Hex values: Background: #0276BF, Text: #FFFFFF, Border: transparent
State behavior: Resting state with the base shadow and no transform applied. No preview class needed.
Icon use: Text-only button; add .c1-button__icon when an icon is needed.

Style details

Height 52px

Horizontal Padding 28px

Corner Radius 18px

Font Family Inter

Background Color #0276BF

Color #FFFFFF

Font Size / Weight 16px / 400

Icon Size N/A

Code snippet

Tips