Actions

The Element design system uses several types of button, action and text link, each with a different role. Use each in the correct context and maintain a consistent experience across OVO products.


Primary CTA button

Use the primary CTA button for the most important action or link on a given page or screen. It’s our energising hero button with a neon green hue that’s designed to stand out and guide the user to an action fast.

Eg. On a landing page about smart meters, we want to guide users to book a smart meter appointment above all else. It’s the main action we want users to take and so the Primary CTA button should be used to let users ‘Book appointment’.

  • Do include one primary CTA button on the screen when there’s one specific action you want the user to take.
  • Avoid using a primary CTA when there’s no one specific action that you are trying to guide the user to take. Eg. When a user accesses their account screen, it could be to perform one of several tasks, and there’s no effective way to know which action should use a Primary CTA button in this context.
  • Use just one Primary CTA button per page but the Primary CTA button can be repeated if necessary. Eg. You can include that ‘Book appointment’ button at the top of the page for easy discoverability and then again at the bottom of the page after the user has read the page contents and learned the benefits of getting a smart meter.
  • Do use a primary button to allow the user to move forwards through a multi-step journey. We use the word ‘next’ to indicate forward progression. When indicating forward progression, use the right chevron variant of the button.
  • Where there are two important actions, you can pair a primary and secondary button side by side or stack the secondary button below the primary button if there’s a small content area. Do not pair two primary buttons.
  • Place the Primary CTA button above the fold of the page or screen where possible to provide focus and quickly guide the user through their journey.

Secondary CTA button

Use the secondary button for actions and links with lower priority than the primary CTA button. Secondary buttons have a white background making them much less prominent in the visual hierarchy.

Eg. On a landing page about smart meters, we should include a link to learn about the installation process. It’s less important to the user than allowing them to book their smart meter so we use the less visually prominent secondary CTA button to let users learn ‘About installations’.

  • You can use the secondary button to show multiple secondary actions on the same page.
  • Avoid creating a stacked list of secondary buttons. If you need to show more than two CTA buttons together, you should either break apart the actions into separate chunks of content or use the action list component to show the options in a more easily digestible format.
  • Do use a secondary button (where possible), to allow the user to move backwards through a multi-step journey. We use the button label ‘back’ to indicate this backward movement and also use the back chevron variant of the button.
  • Don’t use the secondary CTA button on a white background. The button's distinctive pill background will disappear into the background of the page.
  • Where there are two important actions, you can pair a primary and secondary button side by side or stack the secondary button below the primary button if there’s a small content area. You can pair two secondary buttons.

Action

Use an action component either as the main CTA within a card, to provide a list of actions, or as a standalone, compact action.

Eg. When presenting the user with related smart meter articles, we use an action component 'About installations >' as the last element within the card as the main call to action.

Eg. In the user's account area, we show a list of actions to help the user navigate to various account settings. We use an action list here to help the user access:
'Contact details>'
'Meter readings >'
'Marketing preferences >'

Eg. On the user's home profile page, we show an 'edit>' action component beside the heading 'Number of rooms' to allow the user to update the number of rooms associated with their home profile.

  • Keep the action text consice. Try to keep action text below 40 characters.
  • Do use an action component at the bottom of a card to indicate interactivity. When using an action component within a card, the whole card should be clickable.
  • Don't use more than one action component in each card. When using an additional interactive component within a card, for example, a disclosure component or text link alongside the main action, only the action should be clickable.
  • When ordering actions within an action list, ensure that the actions are listed in order of importance.
  • When creating an action list, ensure that each action is distinctive and obvious. Eg. An action list with the actions 'Your booking' and 'About smart meter bookings' could cause confusion.
  • Do use a compact, standalone action when providing a single action in a compact UI where space is limited and a larger CTA button would be detrimental to the user experience.
  • When creating a standalone, compact action, the button text should either use specific language. Eg. 'Edit number of rooms' or can be a short one/two word action when placed directly beside a context-setting heading or text. Eg. 'Number of rooms' 'Edit'. In this instance, append the short action text with visually hidden text to make the short action text more easily understood by screen readers. Eg. 'Number of rooms' 'Edit number of rooms'.
  • When creating a standlone, compact action, you must use an icon. The icon can be changed to provide a visual cue about the action's purpose. Only use universally understood icons for this purpose. Eg. An action to edit the number of rooms can use a pencil icon to highlight edit functionality at a glance. An icon showing a divided house may be misinterpreted by the user.

Use a text link within body text to provide the user with more information or further reading via a text link.

Eg. The user is reading a paragraph about our green credentials on the OVO website. In the sentence ‘That’s why we’re helping UK homes on the Path to Zero,’ we can use the words ‘Path to Zero’ to link to a new page with more information about the topic.

  • Don’t use a text link to perform an action. Text links should be used for navigation only.
  • Where the text link opens the link in a new app, browser or tab, use the ‘opens in new window variant'. This variant displays an icon that provides a visual cue to the user.
  • Avoid creating vague text links. It should be obvious from the words highlighted in the hyperlink or from the content of the preceeding sentence, what the linked content will be about.

Destructive CTA button

Use a destructive CTA button to initiate an action that cannot be undone. Our destructive buttons are rendered in red, as a warning to signify that the button has a significant consequence if clicked.

Eg. On an online booking platform, use a destructive CTA button to allow the user to cancel a confirmed appointment. This action can’t be undone once it has been performed.

  • Avoid using a destructive CTA button in a consumer facing interface where possible. The destructive CTA is designed for use in backend tooling, booking platforms etc.
  • When using a destructive action, give the user the chance to confirm that the action is intended. The destructive action shouldn’t be performed instantly, without warning.
    Eg. On a user account page, we provide the option to delete a saved address as a destructive action. We may use a secondary button with the label ‘Delete this address’ to initiate the action. After this secondary button has been clicked, we open a modal and show a warning reading ‘Are you sure you want to delete this address? This cannot be undone’. Below the warning we show a destructive button labelled ‘Delete address’ which performs the destructive action and a secondary button allowing the user to cancel and go back to the initial state.
  • Once a destructive action has been performed, provide a success feedback message to reassure the user that the action was successful or an error feedback message to let the user know that the action was unsuccessful.

General best practice

  • Keep button labels concise. There’s a 20 character limit on button text and it’s also best to try and stick to a maximum of three words. Use simple, easy to read language, and if more text is required, consider moving text out of the button into a proceeding sentence or use a text link instead.
  • Avoid disabling buttons at all where possible and consider communicating to the user in a different way. A disabled state is used to indicate that a button’s action or link is blocked from the user. A disabled button can help the user to understand where the action will appear once it becomes available. However, disabling buttons can cause confusion and should only be used when giving the user sufficient context about why the button is blocked.
    Eg. On a page allowing a user to schedule an appointment, the user is able to select from a range of dates with a button labelled ‘Continue to booking’ appearing below. When the user selects an available date, the button is rendered in its active state. When the user selects an unavailable date, the button can be shown in its disabled state. A supporting text label gives context that ‘There are no available time slots on this date’.
  • Eg. In an application allowing a user to ‘Call the engineer’, the button may show in a disabled state when the engineer is unavailable to contact. It’s less confusing than hiding the button altogether and the user is able to see that they’re in the right place to get in touch when the action becomes available. But the disabled button should be supported by text that gives context that ‘The engineer is currently unavailable. Please try again later.
  • Use specific language. Avoid terms like “Find out more” unless absolutely necessary - and never use “Click here”! A button should include a clear, active Call To Action (CTA) that’s specific to the context and indicates the action or outcome of selecting it. For example “Give meter reading”, “Get a quote”, or “Read about solar panels”. You should try to avoid re-using the same CTAs across a page as these will make things difficult for people who use screen readers.
  • Consider adding visually hidden text. Button text should be concise but this can cause a problem for people using a screen reader. It can be harder to understand the context of a button when it's read aloud and not seen in the context of other page content. We can add ‘visually hidden’ text into the button code which won’t be seen on the page, but will be read aloud by a screen reader giving the user more context. A button titled ‘Find out more’ can be supplemented with the visually hidden text ‘about smart meters’ to make the button’s purpose clearer.
  • Where the button or action is moving the user forward or backward through a journey, use the chevron variants of the CTA buttons. This helps the user to orientate themselves.

Available components