Buttons

Buttons help people take action. In FT products, they support journeys, whether submitting a form, sharing content or progressing through a task. We aim for buttons to be clear, consistent and accessible across our products.

This guidance helps teams choose the correct button type, understand how buttons behave, and apply them consistently across layouts, devices and themes. If something here doesn’t fit your use case, let us know, we’ll help you find the right approach.

Anatomy of a button

Each button includes:

Label: Clearly describe the action using a verb. Use specific, outcome-focused wording like “Subscribe” or “Continue”.
Container: This wraps the label up and any optional icon. Standard. buttons should at least be 80px wide; small buttons should be no smaller than 64px
Icon (optional): Include only when it helps clarify the action. Place it before the label, unless it visually suggests direction.

Button Types

Choose a button type based on how much emphasis the action needs.

Primary (High Emphasis)

Use for the most important action in a view. Stick to one per context to maintain a clear hierarchy.

Theme: 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 (Medium Emphasis)

This is used for actions that support or cancel the primary. It often appears alongside it.

Theme: Show code

JSX
HTML

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

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

Open in StoryBook | Open in Figma

Tertiary / Ghost (Low Emphasis)

This is used for optional or low-priority actions, such as ‘Skip’ or ‘Back.’ These are typically paired with a primary button and presented with lower visual emphasis.

Theme: Show code

JSX
HTML

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

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

Open in StoryBook | Open in Figma

Icon-only (Low Emphasis)

Use to take supplementary actions with a single tap but only when the icon is universally recognised and adds clear meaning.

In areas like toolbars and menu bars, always pair icons with text labels for clarity.

Theme: 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

Grouped Buttons (Low Emphasis)

Also known as Segmented buttons. Use them to toggle between closely related views, such as time periods (e.g. “Day”, “Week”, “Month”). Limit to six or fewer options. Limit to six or fewer options.

Theme: Show code

JSX
HTML

<ButtonGroup>
  <Button
    label="List"
    type="secondary"
    attributes={{ "aria-selected": true }}
    icon="list"
  />
  <Button label="Grid" type="secondary" icon="grid" />
</ButtonGroup>;

<div class="o3-button-group">
  <button
    class="o3-button o3-button--secondary o3-button-icon o3-button-icon--list"
    aria-selected="true"
  >
    List
  </button>
  <button
    class="o3-button o3-button--secondary o3-button-icon o3-button-icon--grid"
  >
    Grid
  </button>
</div>

Open in StoryBook | Open in Figma

SSO Buttons

Single Sign On (SSO) buttons allows for use for third-party authentication, such as Google or Apple.

Always use consistent copy:

“Sign in with [Provider]” for returning users
“Sign up with [Provider]” for new users

Show code

JSX
HTML

<>
  <SocialSignIn provider="apple" text="Sign in with Apple" />
  <SocialSignIn provider="google" text="Sign in with Google" />
</>;

<button
  id="appleid-signin"
  class="o3-social-sign-in-button o3-social-sign-in-button--apple"
>
  <span class="o3-social-sign-in-button__copy">Sign in with Apple</span>
</button>
<button
  id="gSignInWrapper"
  class="o3-social-sign-in-button o3-social-sign-in-button--google"
>
  <span class="o3-social-sign-in-button__copy">Sign in with Google</span>
</button>

Open in StoryBook | Open in Figma

Branding Compliance Reference

Follow the platform visual and copy guidance closely.

Ordering and Placement

Use the alignment pattern suited to the user flow and task context to help users complete tasks intuitively. Use one pattern per view or flow. Don’t mix.

Pattern	Usage	Reading behaviour	Placement
Z-Pattern	Focused flows, e.g modals or onboarding flows	Start-to-end scan (left → right)	Place primary right and secondary to the left
F-Pattern	Content-heavy layouts	Top-down, left-biased scan	Align buttons left, primary action first

SOURCES:

UX collective: Z-pattern layout in UX design | NN/g: F-shaped pattern of reading

Z-Pattern

Use for modals, onboarding flows, or focused tasks with a clear hierarchy. Right-aligned buttons ensure users naturally end their scan on the primary action, guiding them quickly and confidently through tasks.

A Z-pattern layout guides the reader’s eye across a page in the shape of the letter Z. It starts at the top left, moves horizontally to the top right, then diagonally down to the bottom left, and ends at the bottom right. This flow is often used to lead users toward a call-to-action, such as a button placed at the end of the path.

F-Pattern

Left-align buttons only in content-heavy, full-page forms, or long-scrolling views where users primarily read top-down and scan horizontally. Left-aligned buttons reinforce task completion in contexts with substantial information.

An F-pattern layout reflects how people typically scan blocks of text online. The eye moves across the top of the content, then down the left side, occasionally scanning shorter horizontal lines. This creates an F-shaped pattern. It’s commonly used for text-heavy pages, where key information is placed along the top and left edges to match this reading behaviour.

Edge cases: If you’ve applied this and doesn’t work for your use case. contact us, let’s discuss.

Themes

Use themes to adjust tone and contrast based on context:

Standard

Use as the default theme for most buttons.

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

Use on dark backgrounds to maintain contrast.

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

Use where minimal styling is needed, like beside charts or 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

Neutral

Use for medium emphasis actions that have less priority then than the primary CTA but higher priority than an icon or ghost button. For example, the FT header.

Show code

JSX
HTML

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

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

Open in StoryBook | Open in Figma

Note: Not all themes are supported across all button types. If something doesn’t fit your use case, contact the Design Systems team for guidance.

Sizes

Standard (Default)

Use for most cases.

Theme: 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

Use in compact layouts like toolbars. Avoid small buttons on mobile unless absolutely required. When used, allow a touch area of at least 44px.

Theme: 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

Responsive Behaviour

Buttons are fluid up to ~400px, then adapt to their content.
(Resize your browser to preview the fluid button’s responsive width)

Theme: Show code

JSX
HTML

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

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

Open in StoryBook | Open in Figma

Usage Guidelines

Full-width usage

Use full-width buttons only in narrow containers such as mobile layouts.

✅ Do

Correct layout: Two boxes side by side, each with a button at the bottom. On mobile, buttons are full-width; on desktop, buttons are bottom-left aligned.

❌ Don't

Incorrect layout: a single box with a full-width button at the bottom on desktop. This style is intended for mobile viewports only.

Only one primary button per product area

To maintain clarity, use only one primary button per product area (a form, modal, within an article). For all other CTAs, use secondary or ghost buttons.

✅ Do

❌ Don't

Icons in button should be on the left

Place icons on the left side of the button label, unless direction is being conveyed.

✅ Do

Correct layout: two buttons. The first has a pencil icon on the left and says ‘Edit’. The second says ‘What’s included’ with a down chevron on the right, indicating direction. Icons appear on the left unless used to convey direction.

❌ Don't

Incorrect layout: a button with a pencil icon on the left, a plus icon on the right, and the text ‘Edit’. Icons should not appear on both sides unless the right icon conveys direction.

Group related buttons where it helps the user.

✅ Do

Correct layout: one standalone ‘View’ button, which represents an action.
Beside it, ‘Topic’ and ‘Timeline’ buttons are grouped together to indicate
modes. Clear distinction is made between action (View) and modes (Topic,
Timeline).

Limit to 6 buttons per group

Only group related actions when it helps the user. Keep to a maximum of 6 buttons per group. When the action switches content, use tabs instead of button groups.

✅ Do

Correct layout: a group of three buttons labeled Seconds, Minutes, and Hours. The group stays within the recommended limit of six buttons.

❌ Don't

Incorrect layout: a group of seven buttons labeled Seconds, Minutes, Hours, Days, Weeks, Months, and Year. This exceeds the recommended limit of six buttons per group.

Button Label Guidance

Button labels should be outcome-focused, short and easy to scan.

Use clear, action-driven language (e.g. 'Share', 'Download')

✅ Do

Correct implementation: a button labeled ‘Share’. The label uses clear, action-driven language.

❌ Don't

Incorrect implementation: a button labeled ‘Share on your social media of choice’. This label is overly wordy and lacks clear, action-driven language.

Do not use filler words, punctuation or unnecessary articles ('the', 'a')

✅ Do

Correct implementation: a button labeled ‘Continue’. The label is concise, direct, and free of filler words, punctuation, or unnecessary articles.

❌ Don't

Incorrect implementation: a button labeled ‘Continue to the next section’. The label is too long and includes unnecessary words and articles, reducing clarity.

Write labels in sentence case

✅ Do

Correct implementation: a button labeled ‘Share now’. The label uses sentence case, which improves readability and aligns with design guidelines.

❌ Don't

Incorrect implementation: a button labeled ‘Share Now’. The use of title case reduces readability and doesn’t follow sentence case guidelines.

❌ Don't

Incorrect implementation: a button labeled ‘SHARE NOW’. Using all caps reduces readability and may be perceived as shouting. Sentence case is preferred.

Accessibility Considerations

Ensure contrast meets WCAG standards

Only use if backed by user research. They often have poor contrast, don’t explain why they’re inactive, and can cause confusion, especially for screen reader users or in accessibility audits.

❌ Don't

Poor implementation of a button with low contrast and no clear reason for being inactive. This can confuse users, especially those with visual impairments, and fails to communicate why the button can’t be used.

All buttons must have at least a 44px target size

✅ Do

Correct implementation: The button must have a minimum target size of 44px to meet accessibility standards and ensure it’s easy to tap on touch devices.

Suggest an edit