- Use buttons when you need to direct the user to an action.
- When pairing buttons, use the same sized buttons together.
- When multiple buttons are used within the same component or page, ensure that there is a clear hierarchy of actions.
Button
A button is a clickable element in a user interface that triggers an action when pressed.
Overview
The purpose of buttons is to provide a clear and intuitive way for users to interact with the interface and perform various actions. They enhance the user experience by making key functionalities easily accessible and identifiable, helping users navigate and interact with the application or website more efficiently.
Buttons serve a wide range of purposes in user interfaces, such as submitting forms, confirming actions, navigating to different pages or sections, or executing specific functions.
Dos and Don’ts
- Don't mix button sizes when buttons are used together in a pair.
Anatomy
- Icon (Optional): Leading or trailing that visually supports the label.
- Label: Informs the user of the action.
Variations
Primary
The primary call-to-action on the page should be singular and prominent, limited to one per page. It should be reserved for the most critical action, such as "Next," "Save," "Submit," etc.
Secondary
Secondary buttons serve as supplementary options for secondary, non-essential actions on a webpage. They can be utilised independently or in conjunction with a primary button.
Outline
Outline buttons are designed to provide increased emphasis compared to ghost buttons, owing to their visible stroke. They can be utilised either as standalone buttons or in combination with a primary button.
Ghost
Ghost buttons are commonly employed for actions that are considered less crucial. They can be used independently or in tandem with a primary button. They are ideal for repetitive actions, such as an edit button on a recurring card.
Destructive
Destructive buttons are used for high impact deletion that can result in permanent or undesirable consequences, limited to one per page.
Destructive ghost
Destructive buttons are used for high impact deletion that can result in permanent or undesirable consequences, limited to one per page.
Inverse
Inverse buttons are specifically designed to be used on backgrounds with colours or images, and it's recommended to limit their usage to just one per page. They are reserved for the most critical actions, such as "Next," "Save," "Submit," etc.
Ghost inverse
Ghost Inverse buttons are intended for utilisation on backgrounds with colours or images, and are usually reserved for actions of lesser significance. They can be used independently or in conjunction with a primary button. Ghost Inverse buttons are ideal for repetitive actions, such as an edit button on a repeating card.
Modifiers
Icons
When incorporating an icon into a Button, it is essential to ensure that the icon clearly conveys the intended action of the Button. The icon should be directly related to the action the user is taking, helping to reinforce the Button's purpose. Additionally, the colour of the icon must match the colour of the text label within the Button to maintain consistency.
Leading
Trailing
Icon sizes
Icons have different size depending on the size of the button.
| Button size | Icon size |
|---|---|
| Large & Medium | 24px |
| Small (Expressive & Productive) | 20px |
| XSmall | 16px |
Width
Fixed
Container width is fixed to fit the Button’s label that retains 24px left and right padding.
Fluid
Left and right padding is automated depending on the fluid width of the container.
Sizes
Outlines the Button sizes that are available, and where they should be used across our products.
| Button size | Height | Use cases |
|---|---|---|
| Large | 56px | Typically used on Wide resolutions. Search input fields. Available in Full width. |
| Medium | 48px | Primary page actions and other stand alone actions. Medium is the default size of the button and is available in full width. |
| Small - Expressive | 40px | Larger expressive font size used for increased emphasis. Available in Full width. |
| Small - Productive | 40px | Larger expressive font size used for increased emphasis. Available in Full width. |
| XSmall | 32px | Larger expressive font size used for increased emphasis. Available in Full width. |
Small & XSmall
For the Primary variation only our Small and XSmall sizes use a dark background to improve the colour contrast between the label and the button background. This ensures the component remains accessible when using smaller type.
Responsive sizes
Button sizes can adapt to different screen widths, like wide and narrow views, but there are some restrictions. When buttons resize, they can only transition by one size category, such as going from Large to Medium. Additionally, they can only grow larger when transitioning to wider viewports, not the other way around.
Behaviours
Buttons that act as links
This is available when a button needs to be used as a navigational element to direct users to a new page or location.
Use these with caution - dictation software users may not be able to properly identify these actions, since they are semantically links, even though they may look like buttons.
Content
Labels
Button labels should clearly indicate the action of the Button and describe what will occur once the user clicks the Button. Use active verbs, such as Add or Delete. For sets of buttons, use specific labels, such as Save or Discard, instead of using OK and Cancel. This is particularly helpful when the user is confirming an action.
Use sentence-style capitalisation (only the first world in a phrase and any proper nouns capitalised).
Hierarchy
Buttons should follow a hierarchy of importance with regards to the action that is being committed by the user and how the Buttons are paired together.
Multiple Button pairing
When pairing Buttons, they should always have a relationship to one another; with the highest hierarchy Button is always positioned on the right / top depending on if the button pair is stacked with a 16px spacing between. Always ensure the same sized Buttons are paired together.
Button pairing options are: A high-emphasis Button with a medium / low-emphasis Button that performs a less important action. A medium-emphasis Button with a low-emphasis Button that performs a less important action.
Layout
Alignment
The alignment of Buttons depends on where they appear and whether or not they’re container within another component.
As a general rule, on full-page designs the primary Button is on the left side of the page, as it’s best to have the Button where the user’s attention has been focused all along. Whereas in Modals, the primary Button traditionally sits right aligned. Buttons within components such as Bottom Sheets, Notifications, and Toasts are also right aligned.
In some cases Buttons may span the entire width of the screen or container, examples include Bottom Sheets, Forms, Modals, and Cards
Interactive states
Outlines the atomic level interactive elements for the component.
Examples
Outlines the atomic level interactive elements for the component.
LTR examples
Here are some examples of Buttons in left to right context:
RTL examples
Here are some examples of Buttons in right to left context:
Resources
| Stable | |
| Stable | |
| Beta | |
| Stable | |
| Stable | |
 iOS JustUI [UI Kit] | Stable |
 iOS PIE [SwiftUI] | Stable |
 Android PIE [Compose & Views] | Stable |
