Buttons let users take actions or make choices with a click or tap.
Buttons can be used in dialog boxes, forms, cards or toolbars.
When using buttons:
- Use the button element if the button will trigger an action on the current page
- Use an
<a>element with a relevant
hrefattribute if the page address will change as a result of pressing the button
- If using an icon button, include a text label too wherever possible
- If using an icon on its own, add screen reader text using the class
For navigational elements, use a link instead.
Buttons come in three styles for three levels of emphasis. Which one you use depends on the importance of the action.
Use a filled button to give high emphasis to an action, i.e. primary actions.
Use an outlined button to give a medium level of emphasis to an action, i.e. secondary actions.
Use a transparent button to give the least amount of emphasis to an action
Buttons also come in different types, with and without icons.
A text button is the standard type of button.
Icon and text button
Use a text button along with an icon to help users understand what the button does. The icon should reflect the meaning of the text.
You should only use an icon button when the context makes it completely clear what the button's for. See the accessibility section for more guidance on using icon buttons.
Buttons also come in different themes for different contexts.
Use brand theme buttons to highlight the strongest calls to action on the page. They're good for positive experiences and journeys, such as completing a purchase. They use a primary colour from the brand colour palette.
Light and dark
Light and dark themed buttons can improve contrast against coloured backgrounds. You can also use them for lower priority calls to action.
Disabled states indicate an action that can’t be taken yet. Don’t use disabled buttons if the user can’t take steps to enable it.
It shouldn’t be necessary to read the text on a disabled state element to complete a task, as users with low vision might find it impossible to read the label of a disabled state button.
Button labels should make it easy to understand what will happen if the button is pressed. Ask yourself: ‘If a user doesn’t read any other content on this page, will they understand what this button will do?’
Lead with a strong, actionable verb paired with a noun.
Make sure your button label fits on one line.
Start with a capital letter and use sentence case, but don’t add full stops.
Avoid using ‘my’ or ‘your’ in button labels.