Buttons

Buttons are triggers that provide users with a call to action. Typically allowing users to execute, choose, submit and confirm actions.

Anatomy

The button component contains two required elements and one optional element.

Icon (optional): Most buttons don’t need an icon. Use an icon to add additional affordance where the icon has a clear and well-established meaning.
Label: Text that explains the result of selecting the button. Use action verbs or phrases to tell the user what will happen next.
Container: has minimum width of 80px for standard buttons and 64px for small buttons.

Usage Guidelines

Keep button labels short

Keep labels short and free of punctuation. They should confirm the action a user is taking. Drop unnecessary articles, such as ‘a’ or ‘the’, for a more concise label.

✅ Do

❌ Don't

Use sentence case for button labels

Only capitalize the first letter of the button and any proper nouns. Not title case or Upper case.

✅ Do

❌ Don't

Don’t use more than one primary button

Each page or product area (a form, modal, within an article) should not have more than 1 primary button to help guide the user to the primary action. Any remaining CTA’s should be displayed as secondary or ghost buttons.

✅ Do

❌ Don't

Avoid disabled buttons without user research

Avoid disabled buttons unless user research shows they improve your interface. Disabled buttons have poor contrast which makes them difficult to read. They also do not give feedback to a user why they are disabled. This has caused issues for FT readers in the past, and has been flagged in previous accessibility audits.

Hampus Sethfors explains the issues with disabled buttons in more detail in an axesslab.com article. In the article Hampus suggests alternative design approaches for common uses of disabled buttons.

❌ Don't

Don’t use full width buttons in wide containers

Instead use fluid buttons, which are full-width for small devices or containers up to around 400px width. Otherwise, button width should default to its content length.

✅ Do

❌ Don't

Behaviour

Width

A button’s width is dependant on the length of its content by default. Alternatively buttons may be “fluid”, and stretch to fill the full width of their container.

We recommend buttons are fluid until around 400px, after which the button should be determined by the length of its content.

(Resize your browser to preview the fluid button’s responsive width)

Show code

JSX
HTML

<Button label="Hello" type="primary" fluid={true} />;

<button class="o3-button o3-button--primary" data-o3-fluid="">Hello</button>

Open in StoryBook | Open in Figma

Icons

Buttons may be used with icons, without icons, or only icons.

Without icon

Show code

JSX
HTML

<Button label="Hello" type="primary" />;

<button class="o3-button o3-button--primary">Hello</button>

Open in StoryBook | Open in Figma

With icon

When icons are used, these are always left aligned.

Show code

JSX
HTML

<Button label="Hello" type="primary" icon="search" />;

<button
  class="o3-button o3-button--primary o3-button-icon o3-button-icon--search"
>
  Hello
</button>

Open in StoryBook | Open in Figma

Only icon

Show code

JSX
HTML

<Button label="Hello" type="primary" icon="search" iconOnly={true} />;

<button
  class="o3-button o3-button--primary o3-button-icon o3-button-icon--search o3-button-icon--icon-only"
>
  <span class="o3-button-icon__label">Hello</span>
</button>

Open in StoryBook | Open in Figma

Sizes

The button comes in two sizes: standard and small.

Standard

Show code

JSX
HTML

<Button label="Hello" type="primary" />;

<button class="o3-button o3-button--primary">Hello</button>

Open in StoryBook | Open in Figma

Small

Show code

JSX
HTML

<Button label="Hello" type="primary" size="small" />;

<button class="o3-button o3-button--primary o3-button--small">Hello</button>

Open in StoryBook | Open in Figma

Types

There are three types of buttons to support different contexts.

Primary

The primary button is used for the most important calls to action on a page. Primary buttons should only appear once per product area (not including the application header, modal dialogue, on-site messaging, or side panel).

Show code

JSX
HTML

<Button label="Hello" type="primary" />;

<button class="o3-button o3-button--primary">Hello</button>

Open in StoryBook | Open in Figma

Secondary

For secondary actions on each page or used in conjunction with a primary button. As part of a pair, the secondary button’s function is to perform the negative action of the set, such as “Cancel” or “Back”.

Show code

JSX
HTML

<Button label="Hello" type="secondary" />;

<button class="o3-button o3-button--secondary">Hello</button>

Open in StoryBook | Open in Figma

Ghost

For the least pronounced actions; often used in conjunction with a primary button. In a situation such as a progress flow, a ghost button may be paired with a primary and secondary button set, where the primary button is for ‘Save and continue’ the ghost button would be ‘Skip’.

Show code

JSX
HTML

<Button label="Hello" type="ghost" />;

<button class="o3-button o3-button--ghost">Hello</button>

Open in StoryBook | Open in Figma

Themes

Each button type supports the following themes.

Standard

Show code

JSX
HTML

<Button label="Hello" type="primary" />;

<button class="o3-button o3-button--primary">Hello</button>

Open in StoryBook | Open in Figma

Inverse

An alternative theme for use on dark backgrounds.

Show code

JSX
HTML

<Button label="Hello" type="primary" theme="inverse" />;

<button class="o3-button o3-button--primary" data-o3-theme="inverse">
  Hello
</button>

Open in StoryBook | Open in Figma

Mono

Mono can be helpful where the standard theme distracts from other colour used, for example when placed near data visualisations.

Show code

JSX
HTML

<Button label="Hello" type="primary" theme="mono" />;

<button class="o3-button o3-button--primary" data-o3-theme="mono">Hello</button>

Open in StoryBook | Open in Figma

Button Groups

Buttons may be grouped to combine related buttons together which present users with a set of related, frequently used actions or options in a compact and organized manner.

In terms of user experience, button groups provide a straightforward way for users to perform actions within a single context, emphasizing action over navigation.

Show code

JSX
HTML

<ButtonGroup>
  <Button
    label="Hello"
    type="secondary"
    attributes={{ "aria-selected": true }}
  />
  <Button label="World" type="secondary" />
</ButtonGroup>;

<div class="o3-button-group">
  <button class="o3-button o3-button--secondary" aria-selected="true">
    Hello
  </button>
  <button class="o3-button o3-button--secondary">World</button>
</div>

Open in StoryBook | Open in Figma

Usage Guidelines

Use grouped buttons for related actions

Group related actions or options closely together to improve usability and decision-making efficiency. For example, use for switching views or modes within the same context, such as changing calendar views from day, week, to month

✅ Do

A labelled group of buttons. The label reads "view", it is annotated for
demonstration purposes as the "action". The two buttons read "topic" and
"timeline". The "topic" button is
pressed.

A labelled group of buttons. The label reads "view". The two buttons read
"topic" and "timeline". The buttons are annotated as "mode" for
demonstration purposes. The "topic" button is
pressed.

Don't use grouped buttons for navigation

Use tabs instead to imply navigation between different content areas or contexts within the same workspace.

❌ Don't

Limit the number of buttons in a group

Never use groups of more than six buttons, as too many calls to action can cause users to be unsure of what to do next. Also be thoughtful about how multiple buttons will look and work on small screens, this may vary according the the length of the button’s label.

✅ Do

❌ Don't