Skip to main content

Buttons

Use buttons to help users carry out an action like starting an application or saving their information.

Primary​

Use a primary button for the main call to action on a page.

Avoid using multiple primary buttons on a single page. Having more than one main call to action reduces their impact, and makes it harder for users to know what to do next.

<button class="button primary">Button</button>

Secondary​

For an important action that will change the state of the page or capture data from the user. There can be more than one on a page, even if there is already a primary button. All secondary buttons used on a page must be the same height as the primary button.

<button class="button secondary">Button secondary</button>

Borderless button​

Borderless buttons are typically used for less important actions.

<button class="button link">Link</button>
<button class="button primary link">Link</button>

Disabled​

<button class="button disabled" type="submit" disabled>Disabled button</button>

Button tags​

When implementing a primary or secondary button use different values in the html so that the type attribute for a button element tells browsers what type of button it is.

<a class="button primary" href="#_" role="button">Link</a>
<button class="button primary" type="submit">Button</button>
<input class="button primary" type="button" value="Input" />
<input class="button primary" type="submit" value="Submit" />
<input class="button primary" type="reset" value="Reset" />
<button class="button secondary brand icon-right" type="submit">
  Search<i class="bcc-font_search"></i>
</button>

Buttons with icons​

https://icomoon.io/app/#/select

  • import icons from fonts/selection.json
  • and add a new one.
<button class="button primary icon-left">
  Download
  <i class="bcc-font_download" aria-hidden="true"></i>
</button>

<button class="button primary icon-left">
  Previous
  <i class="bcc-font_left" aria-hidden="true"></i>
</button>

<button class="button primary icon-right">
  Next
  <i class="bcc-font_right" aria-hidden="true"></i>
</button>

Button with help text​

Apply help text below a button when you want to add further information to help with accessibility and guidance

All complaints are confidential
<div class="button-no-group">
  <button class="button primary icon-right" type="submit">
    Make a complaint
    <i class="bcc-font_right" aria-hidden="true"></i>
  </button>
  <small class="lightcopy">All complaints are confidential</small>
</div>

Button group with help text​

Apply group of buttons with help text below a button when you want to add further information to help with accessibility and guidance

All complaints are confidential
All complaints are confidential
All complaints are confidential
<div class="button-group">
  <div class="is-d-flex is-flex-column">
    <button class="button primary icon-right" type="submit">
      Make a complaint
      <i class="bcc-font_right" aria-hidden="true"></i>
    </button>
    <small class="lightcopy">All complaints are confidential</small>
  </div>
</div>

Button with hint text​

Use a button with hint text when you want to help the user understand more context about the call to action button

If you'd still like to make a complaint or give feedback complete our online form.
<div class="button-group head is-d-flex is-flex-row">
  <small class="lightcopy">
    If you'd still like to make a complaint or give feedback complete our online
    form.
  </small>
</div>
<div class="button-group">
  <div class="is-d-flex is-flex-column">
    <button class="button primary icon-right" type="submit">
      Make a complaint
      <i class="bcc-font_right" aria-hidden="true"></i>
    </button>
  </div>
</div>