There are two types of CTA that you can use depending on the context of use.
The CTA Button allows people to complete an action on the current page. The CTA link allows people to navigate to a different location. They're both visually identical.
Use a CTA when there is a clear action (or 2) that helps users move towards their goal or complete the main task.
A CTA button should be used to allow people to complete an action on the current page, or to allow them to submit information. Examples of this may be:
- Submitting a form
- Deleting previously saved information
- Opening a modal
A CTA link should be used to allow people to navigate elsewhere. Examples of this may be:
- Navigating to a piece of important information (either in the same page, or a different page)
- Used within a card component to navigate to relevant information
Do not use this component:
- For auxiliary actions that would pull people off the main journey. For example: 'Read more info on the Tado website', when it should be a text link instead.
- For a long list of actions. An ActionList is usually more appropriate for this use case.
Live example
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
v1+ |
|
Web (@ovotech/element) |
v1+ |
|
App (@ovotech/element-native) |
v1+ |
How to use it
Primary, secondary or destructive?
Use a primary CTA for the main call to action on the page.
Then use secondary CTAs if needed.
Only use destructive CTAs 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.
Writing a label
- 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
Adapting our tone of voice
- For primary actions, this copy can lean into our optimistic and gutsy traits
- For secondary and destructive actions, dial up our straight-talking and inclusive traits
Examples
Get a quote
Pay bill
Change address
Let’s get started!
Make my monthly payment
Change address on file
Grouping CTAs
When grouping 2 or more CTAs together:
- align inline CTAs right to left
- stack full-width CTAs top to bottom
- only use one Primary and put it first - on the right for inline CTAs and at the top for stacked CTAs
Adding an icon
CTAs like ‘Next’ or ‘Back’ can include a right or left chevron.
Full-width CTAs
Use full-width buttons:
- where an inline CTA would take up more than half the container width
- on small screens
- in narrow containers, such as some card layouts, on larger screens
- inside a container to make them the same width when 2 or more buttons are stacked vertically
Disabled CTAs
We do not support disabled CTAs. When a user encounters a disabled button they are blocked but they don’t know why.
Best practice is to use an enabled button and surface the reason why they can't complete that action.
Interactive states
CTAs have specific states for hover and focus, which should not be overwritten.
Properties
These are the properties for anyone implementing this component and code.
|
Name |
Values |
Default |
|---|---|---|
|
iconLeft |
IconName off |
off |
|
iconRight |
IconName off |
off |
|
fullWidth |
boolean |
false |
|
variant |
primary secondary destructive |
primary |
|
... |
JSX.IntrinsicElements["button"] |
|
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As someone using the component, I want to be able to easily understand the purpose of the control.
- As someone with a motor disability, I want to be able to easily select the correct control.
- As a screen reader user, I want to be able to understand the purpose of the control and whether it will complete an action on the same page, or navigate me elsewhere.
- As a keyboard-only user, I want to be able to navigate to the control.
For a CTA button:
- As a keyboard-only user, I want to be able to activate the button using the Space key.
For a CTA link:
- As a keyboard-only user, I want to be able to activate the link using the Enter key.
Test steps
Use these steps to check that the CTA component has been implemented correctly:
For a CTA button:
- Turn on a screen reader.
- Navigate to the CTA button using the Tab key.
- Verify that the screen reader announces a role of "button".
- Verify that the visible label for the button is included in the name announced by the screen reader.
- Verify that the button can be activated using the Space key.
For a CTA link:
- Turn on a screen reader.
- Navigate to the CTA link using the Tab key.
- Verify that the screen reader announces a role of "link".
- Verify that the visible label for the link is included in the name announced by the screen reader.
- Verify that the link can be activated using the Enter key.
Avoiding accessibility barriers
We're aware of the following barriers that can be introduced when using this component. Ensure that you are not adding barriers, by considering the following:
- When using the CTA link, ensure that an href attribute is always provided, so that people can navigate to the control using only a keyboard, and so that an appropriate role is communicated to screen reader users. Without this, people may be unable to use the link.
Related components