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
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
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.
Multi-step forms
Use Cta-Link buttons for multi-stage forms. Use Cta-Button for the final step.
Centrally aligned content
If content is centred, also centre buttons and links.
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.