Use a button to allow users to perform an action or navigate to another location
There are 2 variants. Default and destructive
Default buttons are available in 2 sizes and a range of styles
1. Default
2. Destructive
Styles
Solid - Solid buttons have a high emphasis. Use solid buttons on light backgrounds, OVO green backgrounds and photography to highlight primary actions.
Outline - Outline buttons have a medium emphasis. Use outline buttons on color.surface.surface or color.surface.bright backgrounds to contain secondary level actions.
Outline variant - Outline variant buttons have a low emphasis. Use outline variant buttons on color.surface.surface or color.surface.bright backgrounds to contain secondary level actions and navigation elements.
Solid inverted - Solid inverted buttons have a high emphasis. Use solid buttons on dark backgrounds and photography to highlight primary actions.
Outline inverted - Outline buttons have a medium emphasis. Use outline buttons on color.brand.dim or color.brand.dark backgrounds to contain secondary level actions.
Sizes
Default buttons are available in 2 sizes, regular and large. Use regular buttons by default. Use large buttons in hero content sections or when pairing with a large input field.
Both sizes can be set as either:
Inline - Inheriting the button’s content width
Full width - The width of the button’s container
Usage
When pairing 2 buttons together, use a solid button first and an outline button second.
Each CTA on a page should be unique to be accessible to screen readers. If this isn’t possible, use Visually Hidden Text.
Too many buttons make it harder for users to know what to do next. Try to simplify, or use an alternative component like an action list or cards.
Buttons do not include a disabled state. When a user encounters a disabled button they are blocked but they don’t know why. Use an enabled button and surface the reason why they can't complete that action.
Only use an icon button where the icon makes the button’s purpose clear. For example, a search icon to let the user know that the button will trigger a search.
Use destructive buttons for actions with serious consequences that cannot be easily undone by a user. Make users think carefully before they use them. They only work if used sparingly. Most journeys do not need one.
Destructive CTAs should include a verb that clearly conveys the destructive action (for example: "Delete", "Remove", "Clear")
When using a destructive CTA, include an additional step that asks users to confirm it.
Writing a button
- Imagine finishing this sentence in as few words as possible: "On the next page, you can [functional task]"
- Now, see if you can phrase that task in even fewer words using a verb and noun (action and name).
Remember, CTA buttons should be an ideal of 2 words, absolute maximum 4 words.
- use sentence case
- lead with a verb (an action word, for example 'Go', 'Find', 'Change')
- be as clear as possible about what the action will do
- focus on the function
- put it as simply as possible
- use one main action per screen only
- use active language
- respect that the customer knows what’s best for them
- check it's accessible for screenreaders – can this copy stand alone without body copy and still make sense?
- be overly dramatic or pushy
- use punctuation at the end of the copy
- use a question
- be redundant – vary this copy from headlines and other copy on the page
- use words like 'Click here', 'Learn more', or 'Get started', which are vague or and not compelling
- use first person - for example 'my', 'I'
- try to lure users back in - this isn’t the right moment
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v1+ |
|
Web (@ovotech/element) |
v5+ |
|
App (@ovotech/element-native) |
v5+ |
Related
External links