Action

An action functions as a compact link or button.

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

Storybook failed to load. Please connect to the VPN to access.

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

  1. Imagine finishing this sentence in as few words as possible: "On the next page, you can [functional task]"
  2. 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.

 

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

Moving home

Moving checklist

Plans and pricing

Offers for movers

OVO support

There’s even more to see

Help me change my address

New offers for new homeowners

Help me move my utilities

How green is my new grid?


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

...

e.g. href, rel, ref, target

JSX.IntrinsicElements["a"] | JSX.IntrisicElements["button"]

 


Related components