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
<Buttoncircle={false}disabled={false}hard={false}element="button"variant="filled">Add to trolley</Button>
Outlined button
Use an outlined button to give a medium level of emphasis to an action, i.e. secondary actions.
Interactive demo - Sainsbury's
<Buttoncircle={false}disabled={false}hard={false}element="button"variant="outlined">Add to trolley</Button>
Transparent button
Use a transparent button to give the least amount of emphasis to an action
Interactive demo - Sainsbury's
<Buttoncircle={false}disabled={false}hard={false}element="button"variant="text">Add to trolley</Button>
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
<div
style={{
width:"100%",
display:"flex",
justifyContent:"space-evenly",
}}
>
<Buttonvariant="filled">Add to trolley</Button>
<Buttonvariant="outlined">Add to trolley</Button>
<Buttonvariant="text">Add to trolley</Button>
</div>
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
<div
style={{
width:"100%",
display:"flex",
justifyContent:"space-evenly",
}}
>
<IconButtonvariant="filled"circle={false}disabled={false}hard={false}element="button"label="Add to trolley">
<Plus/>
</IconButton>
<IconButtonvariant="outlined"circle={false}disabled={false}hard={false}element="button"label="Add to trolley">
<Plus/>
</IconButton>
<IconButtonvariant="text"circle={false}disabled={false}hard={false}element="button"label="Add to trolley">
<Plus/>
</IconButton>
</div>
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
<div
style={{
width:"100%",
display:"flex",
justifyContent:"space-evenly",
}}
>
<IconButtonvariant="filled"circle={false}disabled={false}hard={false}element="button"label="Add to trolley"hideLabel>
<Plus/>
</IconButton>
<IconButtonvariant="outlined"circle={false}disabled={false}hard={false}element="button"label="Add to trolley"hideLabel>
<Plus/>
</IconButton>
<IconButtonvariant="text"circle={false}disabled={false}hard={false}element="button"label="Add to trolley"hideLabel>
<Plus/>
</IconButton>
</div>
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
<div
style={{
width:"100%",
display:"flex",
justifyContent:"space-evenly",
}}
>
<Buttonvariant="filled">Add to trolley</Button>
<Buttonvariant="outlined">Add to trolley</Button>
<Buttonvariant="text">Add to trolley</Button>
</div>
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.
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.