Button

Button states

Buttons have four states to indicate interactions clearly:

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

The correct ARIA attributes and focus state allow better keyboard navigation.

Label Length

Labels vary in length; this can cause issues on smaller viewports. Try to keep buttons grouped, but if required, drop into our stacked orientation.

Using icons

Use icons and labels when space allows. Common icons can be reduced to a button-icon if space is limited.

Icon Prefix/Left

• Use a leading icon when the button acts on the page
• The icon should best represent the action
• Place the icon before the label

Icon Suffix/Right

• Use icon end for instances like external links
• These indicate informative states rather than actions

Icons should be avoided unless absolutely needed, as they can overcomplicate the UI.

Button groups on small viewports

On small viewports, the context of a flow may be better suited to inline or stacked buttons. It is at the designer's discretion what to use, but a few guidelines should be observed:

• Use this approach for groups of two buttons
• The orientation (horizontal or vertically stacked) should be consistent throughout the whole user journey
• Consider label length — unbalanced buttons may be more readable when stacked
• Inline buttons should not be expanded to fill 50% of the screen — they should hug the label with consistent padding and be aligned to the screen edges.