Buttons live

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.

Example

Example

HTML

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

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

                                

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
  • var(--color-button-primary)
  • #0F8482
  • Primary button hover
  • var(--color-button-primary--hover)
  • #2B9E9C
  • Button dark
  • var(--color-button-dark)
  • #00394E
  • Button dark hover
  • var(--color-button-dark--hover)
  • #4A6683

Accessibility

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 or change

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

Suggest a new pattern or a change