Buttons

Primary Buttons

Default

Hover

Focus

Disabled

Secondary Buttons

Default

Hover

Focus

Disabled

Tertiary Button

Default

Hover

Focus

Disabled

Transparent Button

Make a <button> element appear like an inline link. The .button-transparent class should not be paired with the .button class.

Default

Hover

Focus

The Code:

HTML


See Usage Notes for which element to use and other requirements.

<button type="button" class="button button-primary button-lg">
    Add to Cart
</button>

<a class="button button-primary button-lg" href="url.html">
    Add to Cart
</a>

Button Class Names

Button Base Layout

  • button

Button Sizes

  • button-xl
  • button-lg
  • button-md
  • button-sm
  • button-xs

Button Themes

  • button-primary
  • button-secondary
  • button-tertiary
  • button-alert (Red Button)
  • button-place-order (Place Order Button)
  • button-transparent (Should not be chained with .button class.)

Usage Notes

All items that appear to be buttons should use either a true <button> element or an <a href=""> element.

This styling does not support the use of <input type="button" />, <input type="submit" />, or <input type="reset" />.

Do not create overrides to default styling using the standard button classes. If you must override the default button styling, create and add a custom class and attach your styling to it. The recommended naming convention for custom button related classes is to start with .button- and add a short descriptive word or two. For example: .button-place-order

Button or Link?

Short Version:

  • Does it navigate to a new page? It's a link.
  • Does it trigger an action on the page? It's a button.

Detailed Version:

  • Does it navigates to a new page? Then it is a normal link, even if it looks like a button. Use a link. Do not use role="button".
    • <a class="button" href="galaxy-far-far-away.html">Text</a>

  • Does it submit a form?
    • <button type="submit" class="button">Text</button>

  • Does it reset a form?
    • <button type="reset" class="button">Text</button>

  • Does it open or close a popup or perform some other action on the same page?
    • <button type="button" class="button">Text</button>

  • Does it have an on/off state that needs to be toggled (e.g. favorites heart)?
    • Non-Pressed State:
      <button type="button" class="button" aria-pressed="false">Text</button>

    • Pressed State:
      <button type="button" class="button" aria-pressed="true">Text</button>

  • Does it toggle something else on the page (e.g. opens non-modal dialog)?
    • Closed State:
      <button type="button" class="button" aria-controls="id-of-affected-area" aria-expanded="false">Text</button>

    • Open State:
      <button type="button" class="button" aria-controls="id-of-affected-area" aria-expanded="true">Text</button>

  • If a <button> would normally be used but you must use an <a> element instead for some reason:
    • It must include role="button" and it must be able to gain focus via mouse or keyboard:
      (An href="" or tabindex="0" is required for the <a> to be in the tab order.)
      • <a class="button" role="button" href="javascript:;">Add to Cart</a>
        or
      • <a class="button" role="button" tabindex="0">Add to Cart</a>

    • Toggle and state rules may still apply.
    • See also required Event Triggers.

Event Triggers

  • "Buttons" that are links to a different page must work when:

    • Clicked with a mouse
    • When focused via keyboard or script, with the enter key
    • When tapped on a touch screen
    • This is the default behavior for link elements.
      <a href="">Text</a>

  • Buttons that are anything else must work when:

    • Clicked with a mouse
    • When focused via keyboard or script, with the enter key
    • When focused via keyboard or script, with the space key
      (If you have used <a>, you will be required to add support for this via script.)
    • When tapped on a touch screen
    • This is the default behavior for button elements. Be sure to specify the type as submit is the default value. Most of ours should be type="button".
      (e.g. opening modal dialogs, revealing panels on the page)
      <button type="button">Text</button>

Disabled Buttons


When a button is disabled, it requires additional attributes. This will ensure that screen reader software announces the button state correctly as well as automactically apply the disabled styling. Disabled elements generally should not be focusable so apply tabindex="-1". The disabled attribute is preferred on buttons as aria only changes how the button is announced to screen reader software, it doesn't apply any functionality changes. JavaScript would have to be used to also actually disable the button while you get that for free with the disabled attribute.

  • <button disabled>Button Text</button>
  • <a role="button" href="javascript:();" aria-disabled="true" tabindex="-1">Button Text</a>

When the button is re-enabled, be sure to reset these by:

  • <button> - Removing the disabled attribute. Removing the tabindex attribute completely or setting it to zero.
    or
  • <a role="button" href="javascript:();" aria-disabled="false" tabindex="0"> - Setting their values to aria-disabled="false" tabindex="0">

One-Off Button Color Theme

Need to create a special use button? Roll your own:

  • HTML: Apply the button class and your choice of size class.
  • HTML: Apply your own custom button-whatever class
  • SCSS: Include the mixin mixin-button-oneoff()
  • SCSS: Pass the override variables, otherwise you get button-primary styles
  • CSS: Update the values to your needs.

Default

Hover

Focus

Disabled

HTML


See Usage Notes for which element to use and other requirements.

<button type="button" class="button button-alert button-lg">
    One-Off
</button>

<a class="button button-alert button-lg" href="javascript:;">
    One-Off
</a>

SCSS


.button-alert {
    @include mixin-button-oneoff(
        /* One-Off Buttons - Default */
        $button-oneoff-border: #b00,
        $button-oneoff-background: #b00,
        $button-oneoff-color: #fff,
        /* One-Off Buttons - Hover */
        $button-oneoff-border-hover: #A80000,
        $button-oneoff-background-hover: #A80000,
        $button-oneoff-color-hover: #fff,
        /* One-Off Buttons - Focus */
        $button-oneoff-border-focus: #b00,
        $button-oneoff-background-focus: #b00,
        $button-oneoff-color-focus: #fff,
        $button-oneoff-ring-color-focus: #b00,
        $button-oneoff-box-shadow-focus: none,
        /* One-Off Buttons - Disabled */
        $button-oneoff-border-disabled: #caa,
        $button-oneoff-background-disabled: #caa,
        $button-oneoff-color-disabled: #eee
        $button-oneoff-ring-color-disabled-focus: #caa
    );
}


.button-place-order {
    @include mixin-button-oneoff(
        /* One-Off Buttons - Default */
        $button-oneoff-border: #008000,
        $button-oneoff-background: #008000,
        $button-oneoff-color: #fff,
        /* One-Off Buttons - Hover */
        $button-oneoff-border-hover: #006400,
        $button-oneoff-background-hover: #006400,
        $button-oneoff-color-hover: #fff,
        /* One-Off Buttons - Focus */
        $button-oneoff-border-focus: #008000,
        $button-oneoff-background-focus: #008000,
        $button-oneoff-color-focus: #fff,
        $button-oneoff-ring-color-focus: #fff,
        $button-oneoff-box-shadow-focus: none,
        /* One-Off Buttons - Disabled */
        $button-oneoff-border-disabled: #b0bca7,
        $button-oneoff-background-disabled: #b0bca7,
        $button-oneoff-color-disabled: #fff
        $button-oneoff-ring-color-disabled-focus: #fff
    );
}

CSS


/* One-Off Button */
/* One-Off Buttons - Default */
.button-whatever {
    border-color: #b00;
    background: #b00;
    color: #fff;
}
/* One-Off Buttons - Hover */
.button-whatever.hover,
.button-whatever:hover {
    border-color: #A80000;
    background: #A80000;
    color: #fff;
}
/* One-Off Buttons - Focus */
.button-whatever.focus,
.button-whatever:focus {
    border-color: #b00;
    background: #b00;
    color: #fff;
    box-shadow: none;
}
/* One-Off Buttons - Focus Ring */
.button-whatever.focus::before,
.button-whatever:focus::before {
    display: block;
    content: "";
    border-color: #b00;
    border-width: 1px;
    border-radius: 4px;
    border-style: solid;
    position: absolute;
    top: -3px;
    right: -3px;
    bottom: -3px;
    left: -3px;
}
/* One-Off Buttons - Disabled */
.button-whatever.disabled,
.button-whatever[disabled],
.button-whatever[aria-disabled="true"] {
    border-color: #caa;
    background: #caa;
    color: #eee;
    cursor: default;
}
/* One-Off Buttons - Disabled Hover */
.button-whatever.disabled.hover,
.button-whatever.disabled:hover,
.button-whatever[disabled].hover,
.button-whatever[disabled]:hover,
.button-whatever[aria-disabled="true"].hover,
.button-whatever[aria-disabled="true"]:hover {
    border-color: #caa;
    background: #caa;
    color: #eee;
}
/* One-Off Buttons - Disabled Focus */
.button-whatever.disabled.focus,
.button-whatever.disabled:focus,
.button-whatever[disabled].focus,
.button-whatever[disabled]:focus,
.button-whatever[aria-disabled="true"].focus,
.button-whatever[aria-disabled="true"]:focus {
    border-color: #caa;
    background: #caa;
    color: #eee;
    box-shadow: none;
}
/* One-Off Buttons - Disabled Focus Ring */
.button-whatever.disabled.focus::before,
.button-whatever.disabled:focus::before,
.button-whatever[disabled].focus::before,
.button-whatever[disabled]:focus::before,
.button-whatever[aria-disabled="true"].focus::before,
.button-whatever[aria-disabled="true"]:focus::before {
    display: block;
    content: "";
    border-color: #caa;
    border-width: 1px;
    border-radius: 4px;
    border-style: solid;
    position: absolute;
    top: -3px;
    right: -3px;
    bottom: -3px;
    left: -3px;
}