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>