Buttons

Figma

Examples

Light mode

Dark mode

Styles

NB! Variables used in states must be mapped to mode and colour

For example, surface-neutral in Light mode is "neutrals/white" (#FFF) and in Dark mode it's "neutrals/grey 195" (#242829)

Base style:

display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 4px;

Small:

gap: 8px;
padding: 0 14px;
height: 36px;

Medium:

gap: 10px;
padding: 0 16px;
height: 40px;

Large:

gap: 12px;
padding: 0 18px;
height: 46px;

Primary

States

Default:

background: var(--surface-primary, #FFF);

Hover:

background: var(--neutrals-grey-100, #F1F5F6);

Active (focused):

background: var(--surface-primary-active, #E7EBEB);

Disabled:

opacity: 0.3;

Border (only in Light mode):

border: 1px solid var(--border-strong, #000);

Grey

This will be light grey in Light mode and dark grey in Dark mode

States

Default:

background: var(--surface-primary, #F1F5F6);

Hover:

background: var(--neutrals-grey-110, #E7EBEB);

Active (focused):

background: var(--neutrals-grey-120, #DDE1E2);

Secondary

This will be white in Dark mode, and dark gray in Light mode

States

Default:

background: var(--surface-secondary, #000);

Hover:

background: var(--neutrals-grey-190, #3D4142);

Active (focused):

background: var(--neutrals-grey-180, #5B5F60);

Disabled:

opacity: 0.3;
background: var(--surface-secondary, #000);