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>

                            

CSS

                            /* ================================================
 * Buttons - Co-op Front-end Foundations
 * ================================================ */

@import "@coopdigital/foundations-vars";

.coop-btn {
    display: inline-block;
    padding: var(--spacing-base--1-4) calc(var(--spacing-base--1-2) * 1.25);
    color: var(--color-white);
    background: var(--color-button-dark);
    font-family: var(--font-family);
    font-weight: 500;
    text-align: center;
    border: 0;
    border-radius: 7px;
    transition: all 0.15s linear;
    outline: none;
}

.coop-btn:hover,
.coop-btn:focus {
    background: var(--color-button-dark--hover);
    border: 0;
}

.coop-btn:focus {
    transition: none;
    outline: 2px dotted var(--color-link--focus);
    outline-offset: 3px;
}

.coop-btn:active {
    background: var(--color-button-dark--active);
    outline: 0;
}


.coop-btn--primary {
    background: var(--color-button-primary);
}

.coop-btn--primary:hover,
.coop-btn--primary:focus {
    background: var(--color-button-primary--hover);
}

.coop-btn--active:active {
    background: var(--color-button-primary--active);
}


.coop-btn--full {
  width: 100%;
}

.coop-btn--small {
  padding: calc(var(--spacing-base--1-4) / 3) var(--spacing-base--1-4);
  font-size: 0.8rem;
}

.coop-btn--medium {
  padding: calc(var(--spacing-base--1-4) / 2) var(--spacing-base--1-4);
}

.coop-btn--large {
  padding: var(--spacing-base--1-4) var(--spacing-base--1-2);
}

                            

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

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

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

Suggest a new pattern or a change