Button

Buttons let users take actions or make choices with a click or tap.

How to use buttons

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 href attribute 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 ln-u-visually-hidden

For navigational elements, use a link instead.


Styles of buttons

Buttons come in three styles for three levels of emphasis. Which one you use depends on the importance of the action.

Filled button

Use a filled button to give high emphasis to an action, i.e. primary actions.

  • Interactive demo - Sainsbury's

Outlined button

Use an outlined button to give a medium level of emphasis to an action, i.e. secondary actions.

  • Interactive demo - Sainsbury's

Transparent button

Use a transparent button to give the least amount of emphasis to an action

  • Interactive demo - Sainsbury's

Types of buttons

Buttons also come in different types, with and without icons.

Text button

A text button is the standard type of button.

  • Interactive demo - Sainsbury's

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.

  • Interactive demo - Sainsbury's

Icon button

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.

  • Interactive demo - Sainsbury's

Button themes

Buttons also come in different themes for different contexts.

Brand

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.

  • Interactive demo - Sainsbury's

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.

  • Interactive demo - Sainsbury's
  • Interactive demo - Sainsbury's

Button disabled states

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.

  • Interactive demo - Sainsbury's

Copy guidelines

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.

Do
Don't
Do
Don't

Make sure your button label fits on one line.

Do
Don't

Start with a capital letter and use sentence case, but don’t add full stops.

Do
Don't

Avoid using ‘my’ or ‘your’ in button labels.

Do
Don't
Do
Don't

Was this page helpful?


Get in touch

Our team can answer any questions about using buttons or give you a helping hand with your next project.
Select a theme to demo: