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.

Overview

Primary

Secondary

Outline

Plain

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

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.

Default

Disabled

Critical

With icon

Only icon

Dropdown

Select

Common semantic tokens

Background colour

colour.button.primary.background.blue700

Text colour

colour.button.primary.text.basic.white

Font family

SF Pro Display

Font weight

Medium

Size variations

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

Default

With icon

Only icon

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

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

Default

With icon

Only icon

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