Button CSS Component

Default Button

Use the btn or fake-btn class respectively, to create a minimal, default button. This default button is the foundation for all other button types.

<button class="btn">Button</button>
<a class="fake-btn" href="https://www.ebay.com"> Link </a>

Use the large modifier to increase the size of the button.

<button class="btn btn--large">Button</button>
<a class="fake-btn fake-btn--large" href="https://www.ebay.com"> Large Link </a>

Use the small modifier to decrease the size of the button.

<button class="btn btn--small">Button</button>
<a class="fake-btn fake-btn--small" href="https://www.ebay.com"> Small Link </a>

Primary Button

Use the primary modifier to create a primary button style.

<button class="btn btn--primary">Button</button>
<a class="fake-btn fake-btn--primary" href="https://www.ebay.com"> Link </a>

Secondary Button

Use the secondary modifier to create a secondary button style.

<button class="btn btn--secondary">Button</button>
<a class="fake-btn fake-btn--secondary" href="https://www.ebay.com"> Link </a>

Tertiary Button

Use the tertiary modifier to create a tertiary button style.

<button class="btn btn--tertiary">Button</button>
<a class="fake-btn fake-btn--tertiary" href="https://www.ebay.com"> Link </a>

Disabled Button

The disabled attribute is required to fully disable a button tag.

<button class="btn btn--primary" type="button" disabled>Primary Button</button>
<button class="btn btn--secondary" type="button" disabled>
  Secondary Button
</button>
<button class="btn btn--tertiary" type="button" disabled>
  Tertiary Button
</button>

Remove the href attribute to fully disable an anchor tag.

<a class="fake-btn fake-btn--primary"> Primary Link </a>
<a class="fake-btn fake-btn--secondary"> Secondary Link </a>
<a class="fake-btn fake-btn--tertiary"> Tertiary Link </a>

Partially Disabled Button

Partially disabled buttons are programmatically disabled but retain keyboard focus when disabled. This helps prevent keyboard focus being moved back to the start of the page when focus is lost.

<button aria-disabled="true" class="btn btn--primary" type="button">
  Prev
</button>
<button aria-disabled="true" class="btn btn--primary" type="button">
  Next
</button>

Destructive Button

Use the destructive modifier to create a destructive button style used for removing data.

Primary Destructive Button

<button class="btn btn--destructive">Destructive Button</button>
<a
  class="fake-btn fake-btn--primary fake-btn--destructive"
  href="https://www.ebay.com"
>
  Destructive Link
</a>

Secondary Destructive Button

<button class="btn btn--secondary btn--destructive">Secondary Button</button>
<a
  class="fake-btn fake-btn--secondary fake-btn--destructive"
  href="https://www.ebay.com"
>
  Secondary Link
</a>

Tertiary Destructive Button

<button class="btn btn--tertiary btn--destructive">Tertiary Button</button>
<a
  class="fake-btn fake-btn--tertiary fake-btn--destructive"
  href="https://www.ebay.com"
>
  Tertiary Link
</a>

Adjacent Icon Button

Any SVG icon can be placed adjacent to the button text. To flip position of text and icon, simply swap the DOM order.

<button class="btn btn--primary">
  <span class="btn__cell">
    <svg aria-hidden="true" class="icon icon--24" height="16" width="16">
      <use href="#icon-menu-24" />
    </svg>
    <span> Button </span>
  </span>
</button>
<button class="btn btn--primary">
  <span class="btn__cell">
    <span> Button </span>
    <svg aria-hidden="true" class="icon icon--24" height="16" width="16">
      <use href="#icon-menu-24" />
    </svg>
  </span>
</button>

Busy State for Button

Replace the button contents with a progress spinner to represent a busy state. Note also, that the button will need an aria-label to programmatically convey the busy state to assistive technology.

<button class="btn btn--primary" aria-label="Busy...">
  <span class="btn__cell">
    <span class="progress-spinner">
      <svg aria-hidden="true" class="icon icon--24" height="24" width="24">
        <use href="#icon-spinner-24" />
      </svg>
    </span>
  </span>
</button>

Click the button below for an interactive example.

NOTE: it is recommended to use a snackbar dialog or inline-notice in order to convey any status of success or failure.

Flexible Button

Because the button cell uses flex box layout, it is fairly trivial to achieve alternate layouts, as in the example below.

<button
  class="btn btn--primary btn--fluid"
  type="button"
  style="padding-left: 16px; padding-right: 16px"
>
  <span class="btn__cell" style="justify-content: space-between">
    <span> Select </span>
    <span style="display: inline-flex">
      <span> Any </span>
      <svg aria-hidden="true" class="icon icon--16" width="8" height="8">
        <use href="#icon-chevron-down-16" />
      </svg>
    </span>
  </span>
</button>

Fixed Height Button

To ensure the same height as other controls, apply a fixed height to a button with btn--fixed-height or btn--large-fixed-height .

<span class="textbox">
  <input
    aria-label="Email Address"
    class="textbox__control"
    type="text"
    placeholder="textbox"
  />
</span>
<button class="btn btn--primary btn--fixed-height">Button</button>

Fixed Width Button

Buttons naturally grow wider with their text. The text will wrap naturally once the button width grows to exceed its constrained width.

<button class="btn btn--primary" style="width: 200px">
  Button with a lot of text that will wrap
</button>

Fixed Width and Height Button

Of course, with a constrained width and a fixed height, the text will begin to overflow.

<button class="btn btn--primary btn--fixed-height" style="width: 200px">
  Button with a lot of text that will wrap
</button>

The solution is to apply truncation, via the btn--truncated or btn--large-truncated modifiers.

<button
  class="btn btn--primary btn--fixed-height btn--truncated"
  style="width: 200px"
>
  Button with a lot of text that will wrap
</button>

Expandable Buttons

Use the "chevron-down-12" icon to create an expandable button style. Use aria-expanded to convey state.

<button class="btn btn--primary" aria-expanded="false" type="button">
  <span class="btn__cell">
    <span class="btn__text"> Button </span>
    <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
      <use href="#icon-chevron-down-16" />
    </svg>
  </span>
</button>

Use the borderless modifier to remove the border from the expandable button.

<button class="btn btn--borderless" type="button">
  <span class="btn__cell">
    <span class="btn__text"> Button </span>
    <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
      <use href="#icon-chevron-down-12" />
    </svg>
  </span>
</button>

Use the form modifier to create an expandable button style that matches the look of form controls (e.g. textbox, select).

<button class="btn btn--form" aria-expanded="false" type="button">
  <span class="btn__cell">
    <span class="btn__text"> Button </span>
    <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
      <use href="#icon-chevron-down-12" />
    </svg>
  </span>
</button>

Use the btn--slim modifier, in conjunction with btn--form , if displaying an icon only.

<button
  class="btn btn--form btn--slim"
  type="button"
  aria-expanded="false"
  aria-label="Expand/Collapse"
>
  <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
    <use href="#icon-chevron-down-12" />
  </svg>
</button>

For a floated "label", which will appear above the value, use the btn--floating-label and btn__floating-label classes.

<button class="btn btn--form btn--floating-label" style="min-width: 150px">
  <span class="btn__cell">
    <span class="btn__floating-label"> Color </span>
    <span class="btn__text"> Blue </span>
    <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
      <use href="#icon-chevron-down-12" />
    </svg>
  </span>
</button>

In a resting state, with no value, the btn__floating-label--inline modifier is required. This should be added with JavaScript

<button class="btn btn--form btn--floating-label" style="min-width: 150px">
  <span class="btn__cell">
    <span class="btn__floating-label btn__floating-label--inline"> Color </span>
    <span class="btn__text" />
    <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
      <use href="#icon-chevron-down-12" />
    </svg>
  </span>
</button>