Buttons

Go to the installation documentation
    <button class="coop-btn coop-btn--primary">Add to basket</button>
    
    <button class="coop-btn coop-btn--white">Add to basket</button>
    
    <button class="coop-btn">Save and exit</button>
    
    <button class="coop-btn coop-btn--grey">Save and exit</button>
    
    <button class="coop-btn coop-btn--small">Small button</button>
    
    <button class="coop-btn coop-btn--loading coop-btn--primary">Loading button</button>
    
    <button class="coop-t-link">Sign out</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>
        <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>
    
    <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>
        <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>