Buttons

Buttons and Links trigger actions or link to optional information.

Functionally they are grouped into three categories: CTA-Buttons, CTA-Links and Pathways. Visually, there are three levels relative to their visual prominence: Primary, Secondary and Plain.

A Destructive variant warns users of a potentially irreversible change.

A Full Width variant makes the button the size of its container.

Use primary buttons when it's the main action on the page, for example a 'Submit' button on the form. Use secondary buttons if there are multiple actions on the page of equal importance.

Cancel button can be secondary in simple form interfaces like Bulb account. Use plain button for 'Cancel' on complex interfaces like internal tools.

Content guidance

Write button labels in sentence case.

Labels should be clear and action-led, usually starting with a verb. For primary buttons, the label should encourage a specific action.

To save space when writing button labels, you can skip articles (a, an, the), but including them can help the language feel more conversational.

Avoid using pronouns with buttons, but if you're going to use them (again, it can feel more conversational), use the first person (my) - the button represents the user's side of the interaction.

For a button that takes the user to the next page of a multipage process, use:

  • 'Continue' if the user interacts with the pages, for example when completing a form
  • 'Next' if the content is purely informational, for example a series of onboarding screens

Examples

  • Yes: Find out more

  • No: Next

  • Yes: Send meter readings

  • No: Meter readings

  • Yes: Apply now

  • No: Start your application

CTA-Button

CTA-Button triggers an action which typically occurs on the current page. Marked up as a button. Use when you're completing something, when there's a finality to this action.

Default states

☝️ Research insight: Members can sign up to the Bulb Feed-In Tariff using an online form. When testing this form, users were confused when the microcopy on the secondary button was not clearly differentiated from the main CTA. Ensure that microcopy on different buttons are clearly separate actions.

CTA-Link typically takes the user away from the current context (an arrow icon hints that that action will take the user to a different place, e.g. indication that there are more steps to in the process).

☝️ Research insight: When testing the dunning cycle screens, users weren't sure what would happen if they clicked "Continue" and were nervous that the button could result in an automatic financial transaction. Including an arrow icon helps users understand that they are progressing to the next page rather than confirming a transaction.

Pathway

Pathway is a link to optional information, typically on a separate page.

Default states

Links typically take the user to a different, sometimes external, page. In order to not force a specific behaviour, links should always open in the same page or tab. A user can always make the link open in a different page or tab if they wish so.

Alignment

Single-step forms

By default, buttons are left-aligned. This button style is for a single action.

Validation on submit

Multi-step forms

Use Cta-Link buttons for multi-stage forms. Use Cta-Button for the final step.

Validation on submit

Centrally aligned content

If content is centred, also centre buttons and links.

Validation on submit

Configurations

Adjusting the size

Buttons take an optional type step property which allow you to adjust the size of buttons to give them additional visual prominence.

They take all sizes except snail, as this is intended to increase prominence, and the default behaviour is based on the mouse type step.