Actions can be used as:
- a button for the user to perform a task on the current page, for example to edit a customer's address
- a link for the user to go to a different page
- Use an action to provide a link or allow the user to perform a task on a screen.
- Use an action for auxiliary actions that pull people off the main journey. For example: 'Learn about your balance', when making a top up payment.
- Use an action to provide a link 'back' up one level in the page hierarchy.
- Don't use an action to provide the user with a way to complete their primary task. Use a primary CTA instead.
- Don't use multiple stacked actions to show a number of links or actions in a list. Use the action list component instead.
Live example
Availabile platforms
Platform |
Available |
---|---|
Figma |
v3+ |
Web (@ovotech/element) |
v3.1.0+ |
App (@ovotech/element-native) |
v3.1.0+ |
How to use it
Writing an action
- 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, Actions should be an ideal of 2 words, absolute maximum 5 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 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
Tone of voice
Dial up our straight-talking and inclusive traits - find out more in our tone of voice guidelines.
Indicating an external link
Use the external link variant of the action when the action's link opens a new tab, or takes the user to a different app or website. This variant includes an icon to set up the external link and mitigate friction.
Providing a back action
Use the back variant of the action to allow the user to return to their previous screen. This variant includes a left chevron to the left of the action's label.
Adding a custom icon
Use the custom icon variant of the action to include a specialised icon that can help users to understand the nature of the task it will perform. For example, a reset icon to provide a visual cue that the action will reset a slider when clicked.
Examples
Properties
Name |
Values |
Default |
---|---|---|
fullWidth |
Boolean |
false |
inverted |
Boolean |
false |
opensInNewWindow |
Boolean |
false |
iconLeft |
"off" | IconName | undefined |
"off" |
iconRight |
"off" | IconName | undefined |
"off" |
testID |
String |
null |
className |
String |
null |
standalone |
Boolean |
false |
... e.g. href, rel, ref, target |
JSX.IntrinsicElements["a"] | JSX.IntrisicElements["button"] |
|
Related components