Key Points

• We have a suite of three button variants that can be used with labels and icons to indicate intent
• Icons can be placed before or after the button label, the layout rules vary slightly
• When using icons always include a label if space can accomodate the text
• Our button groups are well documented and the guidelines should be followed
• Buttons for the web are a single 44px height, however, native also has two other size options; small at 36px and large at 52px
• The standard space between buttons, both horizontally and vertically. For combinations of buttons refer to to the button groups examples and guidelines.

Usage

We have three button variants in our suite, some have a specific use:

• Button variants should be used in specific combinations of button groups
• The background surface will vary based on the background colour they are placed upon
• Buttons should have concise labels, using sentence case, that indicate the action to the user
• All labels should be written in UK English
• Labels should use "and" and not "&" e.g. "Save and exit"
• Double Optout Buttons are used for destructive actions

Using Icons

Although our suite of buttons styles and properties provide a degree of flexibility the following guidelines exist for specific button types.

• Use a leading icon when the button performs an action on the page. The icon should best represent the action.
• If a button has a specific action it should use the Icon End property, which displays a 16px icon
• Icon End should be used for instances like external links. These are not actions and purely informative states
• If the Icon End is used you should not have a left icon, it's one or the other
• We use an Icon Start, before the label to indicate the action of the button
• Icons should be avoided unless absolutely needed as they can overcomplicate the UI.

Icon Button

Key Points

• Icon Buttons with and without a label are 44px, allowing them to align with buttons, and contain 24px icons
• Small Icon Buttons are 24px and contain 16px icons. They should use whitespace around them to give a clear tappable space
• Both button sizes are only available in limited styles

Usage

Icon buttons have a more limited set of styles, the appropriate style should be used to fit the UI and background it is places upon.

Default icon buttons should be used when the buttons are standalone or used inline with buttons, their equal height will main a consistent alignment.

Small icon buttons should be used for secondary actions, such as tooltips. Allow enough whitespace around these buttons to create a clear tappable area, the buttons overall size is 44px.

Additional Information

Single v Double Opt-Out

When to allow a user to perform a destructive action as a single or two part process will vary on context.

• Single Opt-Out - When a user has multiple items to destroy or if there is an option to undo an destructive action
• Double Opt-Out - For actions that are permanently destructive, use a double opt-out flow

The double opt-out is a separate component which has two stages.

Double Opt-Out should always have clear labelling to indicate the intent of the destructive action. It is suggested to keep the label length similar sizes to reduce flicker between the states.

Buttons vs Links

• Buttons are used for to trigger action on the same page. the correct styles/icons should be considered to indicate the intent.
• Links are used to navigate user to a new page or url

Buttons and links use different HTML markup and attributes which are handled specifically by browsers and screen readers. The usage of buttons should be consistent across a journey.

Disabled Buttons

The disabled states of buttons should only be used as a last resort. Aim to reduce cognitive load for the user by displaying buttons when an action is available.

There are several common issues with disabled buttons included:

• They fail to give feedback on what is causing an error
• The UI feels broken if the user feels their data is correct
• Difficult to see or detect a change in state
• They are not focusable by assistive technology

If disabled states are required by a third party application, or if research shows it is absolutely necessary to use a disabled button, we provide the following states.

Web Button States

Buttons used on the web platform should have four states so clearly indicate interactions. The correct aria attributes and focus state will allow better keyboard navigation.

The button states are:

• Default - This is the colour presented by default
• Hover - When a user hovers over the button the style changes
• Focus - Style around the button when a user navigates to the button via keyboard
• Active - Indicates when a button is tapped

File Links