Skip to main content

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.

A large primary button.

Dos and Don’ts

Do
  • 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.
Don't
  • Don't mix button sizes when buttons are used together in a pair.

Anatomy

Anatomy of a button.
  1. Icon (Optional): Leading or trailing that visually supports the label.
  2. 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.

A primary button

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.

A secondary 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.

An outline 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.

A ghost button

Destructive

Destructive buttons are used for high impact deletion that can result in permanent or undesirable consequences, limited to one per page.

A destructive button

Destructive ghost

Destructive buttons are used for high impact deletion that can result in permanent or undesirable consequences, limited to one per page.

A destructive ghost button

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.

An inverse button

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.

A ghost inverse button

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.

Do
A button with a search icon and a label that says Find a restaurant.
Don't
A button with a eye icon and a label that says Find a restaurant.

Leading

A button with leading icon.

Trailing

A button with trailing icon

Icon sizes

Icons have different size depending on the size of the button.

Button sizeIcon size
Large & Medium24px
Small (Expressive & Productive)20px
XSmall16px

Width

Fixed

Container width is fixed to fit the Button’s label that retains 24px left and right padding.

A button with fixed width.

Fluid

Left and right padding is automated depending on the fluid width of the container.

A button with fluid width.

Sizes

Outlines the Button sizes that are available, and where they should be used across our products.

Button sizeHeightUse cases
Large56pxTypically used on Wide resolutions. Search input fields. Available in Full width.
Medium48pxPrimary page actions and other stand alone actions. Medium is the default size of the button and is available in full width.
Small - Expressive40pxLarger expressive font size used for increased emphasis. Available in Full width.
Small - Productive40pxLarger expressive font size used for increased emphasis. Available in Full width.
XSmall32pxLarger 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.

A small size button.
A xsmall size button.

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

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.

A pyramid that shows button hierarchy as primary and destructive buttons on top, secondary and inverse buttons in the middle, and the rest of the button variations on the bottom.
Do
A primary button paired with an outline button.
Don't
A primary button paired with another primary button.
Do
A small - productive primary button paired with A small - productive outline button.
Don't
A small - productive primary button paired with A small - expressive outline button.

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.

Default

Default state of a button.

Hover

A button that is hovered.

Active

A button that is active.

Focus

A button that is focused.

Disabled

A button that is disabled.

Loading

A button that is loading.

Examples

Outlines the atomic level interactive elements for the component.

LTR examples

Here are some examples of Buttons in left to right context:

A left to right example of a primary button within an text input on the home page of JustEatTakeaway website.
A left to right example of a ghost inverse button within a toast notification with a dark background.
A left to right example of an outline button paired with a popover.

RTL examples

Here are some examples of Buttons in right to left context:

A right to left example of a primary button within an text input on the home page of JustEatTakeaway website.
A right to left example of a ghost inverse button within a toast notification with a dark background.
A right to left example of an outline button paired with a popover.

Resources

Stable
Stable
Beta
Stable
Stable
iOS JustUI [UI Kit]
Stable
iOS PIE [SwiftUI]
Stable
Android PIE [Compose & Views]
Stable