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.
Secondary (Medium Emphasis)
This is used for actions that support or cancel the primary. It often appears alongside it.
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.
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.
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.
<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>
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
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 |
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.
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.
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.
Inverse
Use on dark backgrounds to maintain contrast.
Mono
Use where minimal styling is needed, like beside charts or data visualisations.
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.
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.
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.
Responsive Behaviour
Buttons are fluid up to ~400px, then adapt to their content.
(Resize your browser to preview the fluid button’s responsive width)
Usage Guidelines
Full-width usage
Use full-width buttons only in narrow containers such as mobile layouts.
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.
Icons in button should be on the left
Place icons on the left side of the button label, unless direction is being conveyed.
Group related buttons where it helps the user.
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.
Button Label Guidance
Button labels should be outcome-focused, short and easy to scan.
Use clear, action-driven language (e.g. 'Share', 'Download')
Do not use filler words, punctuation or unnecessary articles ('the', 'a')
Write labels in sentence case
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.