Buttons
Buttons offer a clear and visually distinct way for recipients to take action within an email. They improve usability by drawing attention to key interactions, such as:
- visiting a website
- downloading a document
- confirming a booking or decision.
Well-designed buttons help guide users and support accessibility by ensuring actions are easy to find, recognise and activate across different email platforms and devices.
When to use
Use buttons to highlight the primary call to action in your email. To maintain clarity and focus, limit each message to one primary button. This helps prevent confusion and ensures users can easily identify the most important next step.
If you need to offer alternative actions, use secondary or outline-style buttons to visually differentiate them from the primary action.
Solid primary button
A solid primary button is used for the main action in your email. It features a filled background, high-contrast text and a clear visual hierarchy to guide the user's attention.
Solid grey button
A solid grey button is used for supporting or alternative actions that are not the primary focus of the email.
Solid secondary button
A solid secondary button is used for supporting or alternative actions that are not the primary focus of the email.
Solid tertiary button
A solid tertiary button is can also be used for the main action in your email. It features a filled background, high-contrast text and a clear visual hierarchy to guide the user's attention.
Solid accent button
A solid accent button is used for secondary actions.
Outline primary button
An outline primary button is used for the main action when a more subtle or transparent look is preferred. It features a visible border and transparent background, while still maintaining strong visual emphasis.
Outline grey button
An outline grey button is used for supporting or alternative actions.
Outline secondary button
An outline secondary button is used for supporting or alternative actions.
Outline tertiary button
An outline tertiary button is used for the main action when a more subtle or transparent look is preferred. It features a visible border and transparent background, while still maintaining strong visual emphasis.
Outline accent button
An outline accent button is used for secondary actions with a border.
Left-aligned button
A left-aligned button is positioned against the left edge of its container. Use this alignment when the button supports or complements left-aligned text, or when maintaining visual consistency with other left-aligned content in the layout.
Centre-aligned button
A centre-aligned button is positioned horizontally in the middle of its container. This alignment is commonly used when a button is the primary focus of a section, or when content is centred for visual balance.
Right-aligned button
A right-aligned button is positioned against the right edge of its container. This alignment is often used to support layout patterns where content flows from left to right, or to signal progression (e.g. "Next", "Continue").