Back to the pattern library


Buttons are functional. They should allow a user to complete a task and tell them what it is going to do with the information they have provided.




<button class="coop-btn coop-btn--primary">Primary button</button>

<button class="coop-btn">Button</button>


The styles for this pattern can be found in the foundations on github.


There is no javascript needed for this component.

Design and content

Button width should be defined by the content on the button. Buttons should also be ranged left with the left edge aligning with other content.

The primary button should only be used once per page.

  • Primary button
  • $button-primary
  • rgb(15,132,130)
  • #0F8482
  • Primary button hover
  • $button-primary-hover
  • rgb(43,158,156)
  • #2B9E9C
  • Primary button active
  • $button-primary-active
  • rgb(12,111,109)
  • #0C6F6D
  • Button dark
  • $button-primary-dark
  • rgb(0,57,78)
  • #00394E
  • Button dark hover
  • $button-primary-dark-hover
  • rgb(74,102,131)
  • #4A6683
  • Button dark active
  • $button-primary-dark-active
  • rgb(46,64,82)
  • #2e4052


The area for clicking and tapping buttons must be large enough for people to activate them. Small buttons, and buttons that are placed too close to each other, are difficult for many people to use.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change