Buttons

Figma

Light mode:

Dark mode:

Examples

Light mode

Dark mode

Styles

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

For example, surface-brn-primary 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-btn-primary, #FFF);

Hover:

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

Active (focused):

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

Disabled:

opacity: 0.3;

Border (only in Light mode):

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

Secondary

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

States

Default:

background: var(--surface-btn-secondary, #F1F5F6);

Hover:

background: var(--surface-btn-secondary-hover, #E7EBEB);

Active (focused):

background: var(--surface-btn-active, #DDE1E2);

Disabled:

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

Tertiary

States

Default:

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

Hover:

background: var(--surface-tertiary-hover, #3D4142);

Active (focused):

background: var(--surface-btn-active, #5B5F60);

Disabled:

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