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.
Use sentence case for button labels
Only capitalize the first letter of the button and any proper nouns. Not title case or Upper case.
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.
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 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.
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)
code
<Button label="Fluid button" type="primary" fluid="true" /><button class="o3-button o3-button--primary " data-o3-fluid="">Fluid button</button>Icons
Buttons may be used with icons, without icons, or only icons.
Without icon
code
<Button label="Hello" type="primary" theme="inverse" /><button class="o3-button o3-button--primary " data-o3-theme="inverse">Hello</button>With icon
When icons are used, these are always left aligned.
code
<Button label="Hello" type="primary" theme="inverse" icon="search" /><button class="o3-button o3-button--primary o3-button-icon o3-button-icon--search" data-o3-theme="inverse">Hello</button>Only icon
code
<Button label="Hello" type="primary" theme="inverse" icon="search" iconOnly="true" /><button class="o3-button o3-button--primary o3-button-icon o3-button-icon--search o3-button-icon--icon-only" data-o3-theme="inverse"><span class="o3-button-icon__label">Hello</span></button>Sizes
The button comes in two sizes: standard and small.
Standard
code
<Button label="Hello" type="primary" theme="inverse" /><button class="o3-button o3-button--primary " data-o3-theme="inverse">Hello</button>Small
code
<Button label="Hello" type="primary" theme="inverse" size="small" /><button class="o3-button o3-button--primary o3-button--small" data-o3-theme="inverse">Hello</button>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).
code
<Button label="Hello" type="primary" theme="inverse" /><button class="o3-button o3-button--primary " data-o3-theme="inverse">Hello</button>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”.
code
<Button label="Hello" type="secondary" theme="inverse" /><button class="o3-button o3-button--secondary " data-o3-theme="inverse">Hello</button>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’.
code
<Button label="Hello" type="ghost" theme="inverse" /><button class="o3-button o3-button--ghost " data-o3-theme="inverse">Hello</button>Themes
Each button type supports the following themes.
Standard
code
<Button label="Hello" type="primary" /><button class="o3-button o3-button--primary ">Hello</button>Inverse
An alternative theme for use on dark backgrounds.
code
<Button label="Hello" type="primary" theme="inverse" /><button class="o3-button o3-button--primary " data-o3-theme="inverse">Hello</button>