---
name: Buttons
menu: Patterns
parent: Modules
route: /patterns/buttons
---

# 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 - Submit button on the form. Use secondary buttons if there multiple actions on the page and no main ones (Change payment settings and personal details in Bulb account).

Cancel button can be secondary in simple form interfaces like Bulb Account. Use plain button for "cancel" on complex interfaces like internal tools.

## 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

```specimen-react
<DocRow>
  <Vspace spacing="earth">
    <Heading level="h3" size="mouse">Primary</Heading>
    <CtaButton purpose="primary">
        Submit
    </CtaButton>
    <Heading level="h3" size="mouse">Destructive</Heading>
    <CtaButton purpose="destructive">
        Delete
    </CtaButton>
  </Vspace>
  <Vspace spacing="earth">
    <Heading level="h3" size="mouse">Secondary</Heading>
    <CtaButton purpose="secondary">
        Cancel
    </CtaButton>
  </Vspace>
  <Vspace spacing="earth">
    <Heading level="h3" size="mouse">Plain</Heading>
    <CtaButton purpose="plain">
        Cancel
    </CtaButton>
  </Vspace>
</DocRow>
```

```specimen-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).

```specimen-react
<DocRow>
  <Vspace spacing="earth">
    <Heading level="h3" size="mouse">Primary</Heading>
    <CtaLink purpose="primary">
        Payment details
    </CtaLink>
  </Vspace>
  <Vspace spacing="earth">
    <Heading level="h3" size="mouse">Secondary</Heading>
    <CtaLink purpose="secondary">
      Continue
    </CtaLink>
  </Vspace>
  <Vspace spacing="earth">
    <Heading level="h3" size="mouse">Plain</Heading>
    <CtaLink purpose="plain">
      Refine your quote
    </CtaLink>
  </Vspace>
</DocRow>
```

```specimen-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

```specimen-react
<DocRow>
  <Vspace spacing="earth">
    <Heading level="h3" size="mouse">Primary</Heading>
    <Pathway purpose="primary">
      Read more
    </Pathway>
  </Vspace>
  <div style={{backgroundColor: "#003366"}}>
    <Vspace spacing="earth">

    <Heading level="h3" size="mouse" color="white">Inverted Primary</Heading>
    <Pathway purpose="inverted-primary">
      Read more
    </Pathway>
    </Vspace>
  </div>
  <Vspace spacing="earth">
    <Heading level="h3" size="mouse">Plain</Heading>
    <Pathway purpose="plain">
      Read more
    </Pathway>
  </Vspace>
</DocRow>
```

## Links

```specimen-react
<p>We buy our energy from independent renewable generators from across the UK, like Gail and Miles from <a href="https://bulb.co.uk/blog/our-generator-community-old-walls-hydro" target="_blank" rel="noopener noreferrer">Old Walls Hydro</a> in Dartmoor. </p>
```

## Alignment

### Single-step forms

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

![Validation on submit](https://storage.googleapis.com/static.bulb.co.uk/design/images/buttons/singleStep.png)

### Multi-step forms

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

![Validation on submit](https://storage.googleapis.com/static.bulb.co.uk/design/images/buttons/multiStep.png)

### Centrally aligned content

If content is centred, also centre buttons and links.

![Validation on submit](https://storage.googleapis.com/static.bulb.co.uk/design/images/buttons/centerAligned.png)

## 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.

```specimen-react
<CtaButton purpose="primary" typeStep="otter">
    Loud noises
</CtaButton>
```

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