Buttons

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

Primary button

Secondary button

Grey button

White button

Small button

Full width

Loading spinner

Link button

App store buttons

HTML

                                
<form class="coop-form" novalidate>
  <h3>Primary button</h3>

  <div class="coop-form__row">
    <button class="coop-btn coop-btn--primary">Join Co-op for £1</button>
  </div>
</form>

<form class="coop-form" novalidate>
  <h3>Secondary button</h3>

  <div class="coop-form__row">
    <button class="coop-btn">Find this product</button>
  </div>
</form>

<form class="coop-form" novalidate>
  <h3>Grey button</h3>

  <div class="coop-form__row">
    <button class="coop-btn coop-btn--grey">Button</button>
  </div>
</form>

<form class="coop-form" novalidate>
  <h3>White button</h3>

  <div class="coop-form__row">
    <div class="coop-form__column coop-u-padding-resp-32-16 coop-u-magenta-dark-3-bg">
      <button class="coop-btn coop-btn--white">Button</button>
    </div>
  </div>
</form>

<form class="coop-form" novalidate>
  <h3>Small button</h3>

  <div class="coop-form__row">
    <button class="coop-btn coop-btn--small">Button small</button>
  </div>

  <div class="coop-form__row">
    <button class="coop-btn coop-btn--small coop-btn--grey">Button small</button>
  </div>
</form>

<form class="coop-form" novalidate>
  <h3>Full width</h3>

  <div class="coop-form__row">
    <button class="coop-btn coop-btn--full-width coop-btn--primary">Button</button>
  </div>
</form>

<form class="coop-form" novalidate>
  <h3>Loading spinner</h3>

  <div class="coop-form__row">
    <button class="coop-btn coop-btn--loading coop-btn--primary">Button</button>
  </div>

  <div class="coop-form__row">
    <button class="coop-btn coop-btn--loading coop-btn--small coop-btn--primary">Button</button>
  </div>
</form>

<form class="coop-form" novalidate>
  <h3>Link button</h3>

  <div class="coop-form__row">
    <button class="coop-t-link">Sign out</button>
  </div>
</form>

<form class="coop-form" novalidate>
  <h3>App store buttons</h3>

  <div class="coop-form__row">
    <!-- App Store button -->
    <a href="https://coop.uk/2mmWKDG" class="coop-btn coop-btn--app coop-btn--app-apple">
      <span class="coop-u-visuallyhidden">Download on the App Store</span>

      <!-- Button graphic -->
      <svg class="coop-btn__graphic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 60" aria-hidden="true" focusable="false">
        <path fill="#FFF" stroke="none" d="M37.43 29.01c-.04-4.1 3.36-6.09 3.51-6.19-1.92-2.8-4.9-3.19-5.95-3.22-2.5-.26-4.93 1.5-6.2 1.5-1.3 0-3.26-1.47-5.38-1.43-2.72.04-5.27 1.62-6.67 4.06-2.88 4.99-.73 12.32 2.03 16.36 1.38 1.97 3 4.18 5.11 4.1 2.07-.09 2.84-1.32 5.33-1.32 2.47 0 3.2 1.32 5.35 1.27 2.22-.04 3.62-1.98 4.95-3.98 1.6-2.26 2.24-4.49 2.26-4.61-.04 0-4.3-1.62-4.34-6.54z"/>
        <path fill="#FFF" stroke="none" d="M33.36 16.96c1.11-1.39 1.87-3.28 1.66-5.2-1.61.07-3.62 1.11-4.78 2.47-1.02 1.2-1.94 3.16-1.7 5.01 1.8.13 3.66-.91 4.82-2.28z"/>
        <path fill="#FFF" stroke="none" d="M62.56 25.7h-3.1l-6.68 18.5h2.99l1.69-5h7.05l1.69 5h3.04l-6.68-18.5zm-4.38 11.19l2.76-8.12h.08l2.76 8.12h-5.6zM77.98 30.57c-1.88 0-3.53.94-4.3 2.39h-.05v-2.24h-2.68v17.95h2.77v-6.68h.06c.8 1.5 2.32 2.36 4.24 2.36 3.39 0 5.63-2.69 5.63-6.89.02-4.18-2.24-6.89-5.67-6.89zM77.25 42c-2.12 0-3.54-1.82-3.54-4.54 0-2.69 1.42-4.53 3.54-4.53 2.15 0 3.57 1.8 3.57 4.53 0 2.76-1.41 4.54-3.57 4.54zM92.83 30.57c-1.88 0-3.53.94-4.3 2.39h-.05v-2.24H85.8v17.95h2.77v-6.68h.06c.8 1.5 2.32 2.36 4.24 2.36 3.39 0 5.63-2.69 5.63-6.89.01-4.18-2.24-6.89-5.67-6.89zM92.1 42c-2.12 0-3.54-1.82-3.54-4.54 0-2.69 1.42-4.53 3.54-4.53 2.15 0 3.57 1.8 3.57 4.53 0 2.76-1.41 4.54-3.57 4.54zM108.33 39.05c.21 1.83 1.99 3.04 4.42 3.04 2.33 0 4.01-1.2 4.01-2.86 0-1.44-1.01-2.3-3.41-2.89l-2.4-.58c-3.4-.82-4.98-2.41-4.98-4.99 0-3.19 2.78-5.39 6.73-5.39 3.91 0 6.59 2.19 6.68 5.39h-2.8c-.17-1.85-1.69-2.96-3.92-2.96s-3.76 1.13-3.76 2.77c0 1.31.97 2.08 3.36 2.67l2.04.5c3.8.9 5.37 2.42 5.37 5.13 0 3.46-2.76 5.63-7.14 5.63-4.1 0-6.87-2.12-7.05-5.46h2.85zM125.67 27.52v3.19h2.57v2.19h-2.57v7.44c0 1.16.51 1.69 1.64 1.69.28 0 .73-.04.91-.06v2.18c-.31.08-.92.13-1.54.13-2.73 0-3.8-1.03-3.8-3.64v-7.73h-1.96v-2.19h1.96v-3.19h2.79zM136.12 30.55c-3.9 0-6.4 2.67-6.4 6.91 0 4.26 2.48 6.91 6.4 6.91 3.92 0 6.4-2.66 6.4-6.91s-2.49-6.91-6.4-6.91zm0 11.54c-2.24 0-3.58-1.71-3.58-4.63 0-2.9 1.33-4.63 3.58-4.63s3.58 1.72 3.58 4.63c-.01 2.92-1.34 4.63-3.58 4.63zM144.8 30.71h2.64v2.3h.06c.42-1.53 1.65-2.44 3.25-2.44.4 0 .73.05.95.1v2.59c-.22-.09-.71-.17-1.24-.17-1.78 0-2.89 1.21-2.89 3.1v8h-2.77V30.71zM164.62 38.15v-.95c0-4.09-2.35-6.65-6.08-6.65-3.8 0-6.24 2.74-6.24 6.98 0 4.22 2.44 6.85 6.36 6.85 3.05 0 5.44-1.68 5.81-4.13h-2.63c-.37 1.17-1.58 1.9-3.12 1.9-2.18 0-3.63-1.51-3.63-3.82v-.17h9.53zm-6.08-5.36c1.92 0 3.25 1.36 3.31 3.42h-6.74c.14-2.03 1.52-3.42 3.43-3.42z"/>
        <path fill="#FFF" stroke="none" d="M57.84 11.77h-3.21v8.89h3.21c2.65 0 4.18-1.63 4.18-4.47 0-2.8-1.55-4.42-4.18-4.42zm-.16 7.64H56v-6.38h1.68c1.84 0 2.93 1.17 2.93 3.18 0 2.04-1.07 3.2-2.93 3.2zM66.75 13.82c-1.96 0-3.17 1.32-3.17 3.48 0 2.17 1.2 3.49 3.17 3.49 1.96 0 3.16-1.31 3.16-3.49 0-2.16-1.21-3.48-3.16-3.48zm0 5.79c-1.15 0-1.8-.84-1.8-2.31 0-1.45.65-2.31 1.8-2.31s1.8.85 1.8 2.31-.66 2.31-1.8 2.31zM78.32 20.66h-1.37l-1.39-4.94h-.1l-1.39 4.94h-1.36l-1.85-6.71h1.35l1.2 5.12h.1l1.38-5.12h1.27l1.38 5.12h.1l1.2-5.12h1.32zM81.72 13.95h1.27v1.07h.1c.33-.75.99-1.2 2-1.2 1.5 0 2.32.9 2.32 2.5v4.34h-1.32v-4.01c0-1.08-.47-1.61-1.45-1.61s-1.6.65-1.6 1.7v3.93h-1.32v-6.72zM89.53 11.33h1.32v9.33h-1.32zM95.86 13.82c-1.96 0-3.17 1.32-3.17 3.48 0 2.17 1.2 3.49 3.17 3.49 1.96 0 3.16-1.31 3.16-3.49 0-2.16-1.21-3.48-3.16-3.48zm0 5.79c-1.15 0-1.8-.84-1.8-2.31 0-1.45.65-2.31 1.8-2.31s1.8.85 1.8 2.31-.65 2.31-1.8 2.31zM103.42 13.82c-1.52 0-2.61.74-2.74 1.89h1.28c.15-.47.66-.75 1.4-.75.91 0 1.37.4 1.37 1.11v.58l-1.82.1c-1.6.1-2.5.8-2.5 2 0 1.23.94 2.01 2.24 2.01.88 0 1.62-.38 2.02-1.05h.1v.94h1.27v-4.58c.01-1.41-.94-2.25-2.62-2.25zm1.31 4.37c0 .83-.74 1.47-1.74 1.47-.72 0-1.24-.35-1.24-.96 0-.59.42-.91 1.34-.97l1.64-.1v.56zM112.73 11.33v3.69h-.1c-.36-.74-1.14-1.18-2.06-1.18-1.7 0-2.79 1.34-2.79 3.46 0 2.13 1.08 3.47 2.79 3.47.92 0 1.71-.44 2.11-1.17h.1v1.06h1.27v-9.33h-1.32zm-1.78 8.25c-1.12 0-1.79-.86-1.79-2.28 0-1.41.68-2.27 1.79-2.27 1.11 0 1.81.88 1.81 2.28-.01 1.41-.7 2.27-1.81 2.27zM122.7 13.82c-1.96 0-3.17 1.32-3.17 3.48 0 2.17 1.2 3.49 3.17 3.49 1.96 0 3.16-1.31 3.16-3.49 0-2.16-1.21-3.48-3.16-3.48zm0 5.79c-1.15 0-1.8-.84-1.8-2.31 0-1.45.65-2.31 1.8-2.31s1.8.85 1.8 2.31-.65 2.31-1.8 2.31zM127.64 13.95h1.27v1.07h.1c.33-.75.99-1.2 2-1.2 1.5 0 2.32.9 2.32 2.5v4.34h-1.32v-4.01c0-1.08-.47-1.61-1.45-1.61s-1.6.65-1.6 1.7v3.93h-1.32v-6.72zM140.82 12.28v1.7h1.45v1.12h-1.45v3.45c0 .7.29 1.01.95 1.01.2 0 .32-.01.5-.03v1.1c-.22.04-.46.07-.72.07-1.47 0-2.06-.52-2.06-1.81V15.1h-1.07v-1.12h1.07v-1.7h1.33zM144.08 11.33h1.31v3.7h.1c.33-.75 1.03-1.2 2.05-1.2 1.43 0 2.31.91 2.31 2.5v4.33h-1.33v-4.01c0-1.07-.5-1.61-1.43-1.61-1.09 0-1.69.68-1.69 1.7v3.92h-1.32v-9.33zM157.66 17.67v-.46c0-2.11-1.13-3.38-2.99-3.38-1.89 0-3.09 1.36-3.09 3.51 0 2.14 1.18 3.46 3.1 3.46 1.53 0 2.61-.74 2.91-1.94h-1.27c-.25.52-.79.81-1.6.81-1.06 0-1.74-.75-1.79-1.92v-.07h4.73zm-3-2.72c.98 0 1.62.68 1.65 1.74h-3.39c.07-1.05.76-1.74 1.74-1.74z"/>
      </svg>
    </a>
  </div>

  <div class="coop-form__row">
    <!-- Google Play button -->
    <a href="https://coop.uk/2kufX5Z" class="coop-btn coop-btn--app coop-btn--app-google">
      <span class="coop-u-visuallyhidden">Get it on Google Play</span>

      <!-- Button graphic -->
      <svg class="coop-btn__graphic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 195 60" aria-hidden="true" focusable="false">
        <g>
          <linearGradient id="coop-c-app-download-google-1" gradientUnits="userSpaceOnUse" x1="31.814" y1="108.056" x2="7.899" y2="84.141" gradientTransform="matrix(1 0 0 -1 0 122)"><stop offset="0" stop-color="#00a0ff"/><stop offset=".007" stop-color="#00a1ff"/><stop offset=".26" stop-color="#00beff"/><stop offset=".512" stop-color="#00d2ff"/><stop offset=".76" stop-color="#00dfff"/><stop offset="1" stop-color="#00e3ff"/></linearGradient>
          <path d="M15.62 12.27c-.41.44-.66 1.12-.66 2v31.52c0 .88.25 1.56.66 2l.11.1 17.65-17.65v-.42L15.73 12.17l-.11.1z" fill="url(#coop-c-app-download-google-1)" stroke="none"/>
          <linearGradient id="coop-c-app-download-google-2" gradientUnits="userSpaceOnUse" x1="48.963" y1="91.965" x2="14.482" y2="91.965" gradientTransform="matrix(1 0 0 -1 0 122)"><stop offset="0" stop-color="#ffe000"/><stop offset=".409" stop-color="#ffbd00"/><stop offset=".775" stop-color="orange"/><stop offset="1" stop-color="#ff9c00"/></linearGradient>
          <path d="M39.26 36.13l-5.88-5.89v-.42l5.89-5.89.13.08 6.97 3.96c1.99 1.13 1.99 2.98 0 4.11l-6.97 3.96-.14.09z" fill="url(#coop-c-app-download-google-2)" stroke="none"/>
          <linearGradient id="coop-c-app-download-google-3" gradientUnits="userSpaceOnUse" x1="36.127" y1="88.695" x2="3.697" y2="56.264" gradientTransform="matrix(1 0 0 -1 0 122)"><stop offset="0" stop-color="#ff3a44"/><stop offset="1" stop-color="#c31162"/></linearGradient>
          <path d="M39.4 36.05l-6.02-6.02-17.76 17.76c.66.69 1.74.78 2.96.09L39.4 36.05" fill="url(#coop-c-app-download-google-3)" stroke="none"/>
          <linearGradient id="coop-c-app-download-google-4" gradientUnits="userSpaceOnUse" x1="11.148" y1="120.216" x2="25.629" y2="105.734" gradientTransform="matrix(1 0 0 -1 0 122)"><stop offset="0" stop-color="#32a071"/><stop offset=".069" stop-color="#2da771"/><stop offset=".476" stop-color="#15cf74"/><stop offset=".801" stop-color="#06e775"/><stop offset="1" stop-color="#00f076"/></linearGradient>
          <path d="M39.4 24.02L18.58 12.19c-1.22-.69-2.3-.61-2.96.09l17.76 17.76 6.02-6.02z" fill="url(#coop-c-app-download-google-4)" stroke="none"/>
        </g>
        <path fill="#FFF" stroke="none" d="M68.34 15.39h-4.32v1.22h3.09c-.07.66-.3 1.19-.68 1.57-.62.62-1.4.93-2.32.93-.87 0-1.63-.31-2.27-.92-.63-.61-.96-1.42-.96-2.4s.32-1.79.96-2.4c.64-.61 1.4-.92 2.27-.92.96 0 1.72.33 2.27.98l.07.08.89-.89-.06-.07c-.34-.41-.8-.74-1.37-.98-.57-.24-1.17-.37-1.79-.37-1.26 0-2.34.44-3.21 1.31-.88.87-1.32 1.96-1.32 3.25s.45 2.38 1.32 3.25c.88.87 1.96 1.31 3.21 1.31 1.31 0 2.39-.44 3.21-1.29.72-.72 1.09-1.71 1.09-2.92 0-.21-.02-.44-.06-.66l-.02-.08zM69.8 20.15h5.18v-1.24h-3.89v-2.52h3.51v-1.22h-3.51v-2.52h3.89v-1.24H69.8zM75.94 12.65h2.39v7.5h1.29v-7.5H82v-1.24h-6.06zM86.07 11.41h1.29v8.74h-1.29zM88.55 12.65h2.39v7.5h1.29v-7.5h2.39v-1.24h-6.07zM102.51 11.22c-1.27 0-2.35.45-3.2 1.32-.85.88-1.29 1.97-1.29 3.24 0 1.27.43 2.36 1.29 3.24.85.88 1.93 1.32 3.2 1.32s2.35-.45 3.2-1.32c.85-.88 1.29-1.97 1.29-3.24 0-1.26-.43-2.35-1.29-3.23-.87-.88-1.94-1.33-3.2-1.33zm3.18 4.56c0 .96-.31 1.77-.92 2.39-.61.62-1.37.93-2.26.93-.89 0-1.64-.31-2.25-.93-.61-.62-.92-1.42-.92-2.39s.31-1.77.92-2.39c.61-.62 1.37-.93 2.25-.93.89 0 1.65.31 2.26.93.6.63.92 1.43.92 2.39zM113.84 11.41v5.1l.04 1.38-4.05-6.48h-1.48v8.74h1.29v-5.42l-.04-1.38 4.21 6.76.03.04h1.29v-8.74z"/>
        <path fill="#FFF" stroke="none" d="M97.84 32.53c-3.35 0-6.08 2.55-6.08 6.06 0 3.49 2.73 6.06 6.08 6.06s6.08-2.57 6.08-6.06c.01-3.51-2.73-6.06-6.08-6.06zm0 9.73c-1.84 0-3.42-1.52-3.42-3.67 0-2.18 1.58-3.67 3.42-3.67 1.84 0 3.42 1.49 3.42 3.67 0 2.16-1.58 3.67-3.42 3.67zM84.57 32.53c-3.35 0-6.08 2.55-6.08 6.06 0 3.49 2.73 6.06 6.08 6.06s6.08-2.57 6.08-6.06c0-3.51-2.73-6.06-6.08-6.06zm0 9.73c-1.84 0-3.42-1.52-3.42-3.67 0-2.18 1.58-3.67 3.42-3.67 1.84 0 3.42 1.49 3.42 3.67 0 2.16-1.58 3.67-3.42 3.67zM68.78 34.39v2.57h6.15c-.18 1.45-.67 2.5-1.4 3.24-.9.9-2.3 1.88-4.75 1.88-3.79 0-6.75-3.05-6.75-6.84S65 28.4 68.78 28.4c2.04 0 3.54.8 4.64 1.84l1.81-1.81c-1.54-1.47-3.58-2.59-6.45-2.59-5.19 0-9.55 4.22-9.55 9.41s4.36 9.41 9.55 9.41c2.8 0 4.91-.92 6.57-2.64 1.7-1.7 2.23-4.09 2.23-6.01 0-.6-.05-1.15-.14-1.61h-8.66zM128.46 42.26c-1.35 0-2.32-.62-2.94-1.84l8.1-3.35-.28-.69c-.5-1.35-2.04-3.86-5.19-3.86-3.12 0-5.72 2.46-5.72 6.06 0 3.4 2.57 6.06 6.01 6.06 2.78 0 4.38-1.7 5.05-2.69l-2.07-1.38c-.67 1.03-1.61 1.69-2.96 1.69zm-.21-7.39c1.06 0 1.95.53 2.25 1.29l-5.42 2.25c-.07-2.35 1.82-3.54 3.17-3.54zM118.49 26.47h2.66v17.81h-2.66zM114.13 32.9v.99h-.09c-.6-.71-1.74-1.35-3.19-1.35-3.03 0-5.81 2.66-5.81 6.08 0 3.4 2.78 6.04 5.81 6.04 1.45 0 2.59-.64 3.19-1.38h.09v.87c0 2.32-1.24 3.56-3.24 3.56-1.63 0-2.64-1.17-3.05-2.16l-2.32.96c.67 1.61 2.43 3.58 5.37 3.58 3.12 0 5.76-1.84 5.76-6.31V32.9h-2.52zm-3.05 9.36c-1.84 0-3.37-1.54-3.37-3.65 0-2.13 1.54-3.7 3.37-3.7 1.81 0 3.24 1.56 3.24 3.7 0 2.11-1.43 3.65-3.24 3.65zM145.82 26.47h-6.37v17.81h2.66v-6.75h3.71c2.95 0 5.84-2.13 5.84-5.53.01-3.4-2.89-5.53-5.84-5.53zm.07 8.58h-3.78v-6.11h3.78c1.99 0 3.12 1.65 3.12 3.05 0 1.39-1.13 3.06-3.12 3.06zM162.32 32.5c-1.93 0-3.92.85-4.74 2.73l2.36.99c.5-.99 1.44-1.31 2.43-1.31 1.38 0 2.77.83 2.8 2.29v.18c-.48-.28-1.51-.69-2.77-.69-2.54 0-5.13 1.4-5.13 4.01 0 2.38 2.09 3.92 4.42 3.92 1.79 0 2.77-.8 3.39-1.74h.09v1.38h2.57v-6.83c-.01-3.17-2.37-4.93-5.42-4.93zm-.32 9.76c-.87 0-2.09-.44-2.09-1.51 0-1.38 1.51-1.9 2.82-1.9 1.17 0 1.72.25 2.43.6-.2 1.64-1.62 2.81-3.16 2.81zM177.08 32.89l-3.04 7.72h-.1l-3.16-7.72h-2.86l4.74 10.79-2.7 6.01h2.77l7.31-16.8zM153.13 26.47h2.66v17.81h-2.66z"/>
      </svg>
    </a>
  </div>
</form>

                                

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.

See the button colours.

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.