Button

Buttons are the primary interactive elements used to prompt user action—anything from saving data, submitting forms, canceling operations, navigating users, or triggering workflows. At Rootflo, buttons must clearly communicate intent, maintain visual consistency, and adapt to different contexts.

Nomenclature

button.[type].[state].[size]

button.primary.default.large

Design tokens

Colour

colour.button.[type].[state].[element].[value]

colour.button.primary.default.background.blue700

Typography

typography.button.[type].[state].[value]

typography.button.primary.default.blue700

Number

button.[shape].[spacing-type].[button-size].[value]

button.rectangle.corner-radius.large.16

Size variables

Large

Best for primary actions that need maximum visibility. Ideal for hero sections, forms, or key call-to-actions where prominence is crucial.

Height:

48px

Font family:

SF Pro Display

Font weight:

Medium

Font size:

16px

Medium

Default button size for most interfaces. Works well for general actions like “Save”, “Next”, “Apply”, or “View Details”. Balances visibility with space efficiency, making it the most versatile option.

Height:

40px

Font family:

SF Pro Display

Font weight:

Medium

Font size:

16px

Small

Used for secondary or less critical actions, especially in dense layouts like tables, cards, or side panels. Great for actions such as “Edit”, “Filter”, or “More”. Primarily used in Mobile.

Height:

32px

Font family:

SF Pro Display

Font weight:

Medium

Font size:

14px

Primary buttons are the most prominent and are used for high-emphasis actions. They draw the user’s attention and guide them toward completing key tasks.

Common semantic tokens

Background colour

colour.button.primary.background.blue700

#0080E2

Text colour

colour.button.primary.text.basic.white

#FFFFFF

Icon colour

colour.button.primary.icon.basic.white

#FFFFFF

Font family

SF Pro Display

Font weight

Medium

display: flex;
height: 48px;
left-right-padding: 16px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 12px ;
background: #0080E2;

display: flex;
height: 40px;
left-right-padding: 16px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

display: flex;
height: 32px;
left-right-padding: 12px;
top-bottom-padding: 12px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

display: flex;
height: 48px;
left-right-padding: 12px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 12px ;
background: #0080E2;

display: flex;
height: 40px;
left-right-padding: 12px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

display: flex;
height: 32px;
left-right-padding: 8px;
top-bottom-padding: 9px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

display: flex;
height: 48px;
left-padding: 12px;
right-padding: 16px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 12px ;
background: #0080E2;

display: flex;
height: 40px;
left-padding: 12px;
right-padding: 16px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

display: flex;
height: 32px;
left-padding: 8px;
right-padding: 12px;
top-bottom-padding: 9px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

display: flex;
height: 48px;
left-padding: 16px;
right-padding: 12px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 12px ;
background: #0080E2;

display: flex;
height: 40px;
left-padding: 16px;
right-padding: 12px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

display: flex;
height: 32px;
left-padding: 12px;
right-padding: 8px;
top-bottom-padding: 9px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

Common semantic tokens

Background colour

colour.button.primary.background.blue700

#0080E2

Icon colour

colour.button.primary.icon.basic.white

#FFFFFF

Font family

SF Pro Display

Font weight

Medium

For supporting actions that are important but not the main focus, e.g. Back, View Details. For the single most important action on a page or surface, e.g. Submit, Save, Confirm. Use sparingly.

Common semantic tokens

Background colour

colour.button.primary.background.blue700

#101010

Text colour

colour.button.primary.text.basic.white

#FFFFFF

Icon colour

colour.button.primary.icon.basic.white

#FFFFFF

Font family

SF Pro Display

Font weight

Medium

display: flex;
height: 48px;
left-right-padding: 16px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 12px ;
background: #101010;

display: flex;
height: 40px;
left-right-padding: 16px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #101010;

display: flex;
height: 32px;
left-right-padding: 12px;
top-bottom-padding: 12px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #101010;

display: flex;
height: 48px;
left-right-padding: 12px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 12px ;
background: #101010;

display: flex;
height: 40px;
left-right-padding: 12px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

display: flex;
height: 32px;
left-right-padding: 8px;
top-bottom-padding: 9px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

display: flex;
height: 48px;
left-padding: 12px;
right-padding: 16px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 12px ;
background: #0080E2;

display: flex;
height: 40px;
left-padding: 12px;
right-padding: 16px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

display: flex;
height: 32px;
left-padding: 8px;
right-padding: 12px;
top-bottom-padding: 9px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

display: flex;
height: 48px;
left-padding: 16px;
right-padding: 12px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 12px ;
background: #0080E2;

display: flex;
height: 40px;
left-padding: 16px;
right-padding: 12px;
top-bottom-padding: 16px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

display: flex;
height: 32px;
left-padding: 12px;
right-padding: 8px;
top-bottom-padding: 9px;
align-items: center;
gap: 8px;

border-radius: 8px ;
background: #0080E2;

For supporting actions that are important but not the main focus, e.g. Back, View Details.

For the single most important action on a page or surface, e.g. Submit, Save, Confirm. Use sparingly.

Common semantic tokens

Background colour

colour.button.primary.background.red600

#E22F2F

Text colour

colour.button.primary.text.basic.white

#FFFFFF

Font family

SF Pro Display

Font weight

Medium

For supporting actions that are important but not the main focus, e.g. Back, View Details.

For the single most important action on a page or surface, e.g. Submit, Save, Confirm. Use sparingly.

Common semantic tokens

Background colour

colour.button.primary.background.grey150

#E8E8E8

Text colour

colour.button.primary.text.grey500

#878787

Font family

SF Pro Display

Font weight

Medium

For supporting actions that are important but not the main focus, e.g. Back, View Details.

For the single most important action on a page or surface, e.g. Submit, Save, Confirm. Use sparingly.

Common semantic tokens

Background colour

colour.button.primary.background.grey150

#E8E8E8

Text colour

colour.button.primary.text.grey500

#878787

Font family

SF Pro Display

Font weight

Medium