Buttons

Whenever semantically appropriate, anything that functions as a button should be coded as a <button>. This design system, however, does provide CSS classes to make any <span> or <a href> element look like a button.

Button Box

To enable improved layout and flexible design options with ease, buttons are placed inside of a .button-box parent div.

Design Sample

Button

Notes

Buttons are centered horizontally by default, but you can re-align buttons using either a .left or .right class on the .button-box.

html

<div class="button-box left">
  <button class="button color-one"><span class="button-label">Button</span></button>
</div>
<div class="button-box">
  <button class="button color-one"><span class="button-label">Button</span></button>
</div>
<div class="button-box right">
  <button class="button color-one"><span class="button-label">Button</span></button>
</div>

Button Classes

This design system uses two basic <button> classes: .primary and .secondary. The .primary class creates a <button> with a solid fill and a white label. The .secondary class creates a <button> with a white fill, a colored border, and a colored label. The :hover and :focus state for each class is the opposite class.

Design Sample

Primary Button Secondary Button

html

<div class="button-box left">
  <button class="button color-one"><span class="button-label">Primary Button</span></button>
  <button class="button secondary color-one"><span class="button-label">Secondary Button</span></button>
</div>
<div class="button-box left">
  <button class="button color-two"><span class="button-label">Primary Button</span></button>
  <button class="button secondary color-two"><span class="button-label">Secondary Button</span></button>
</div>

Buttons With Pre- and Post- Spans

We have included classes to make it easy to add an icon before or after the <button> label. Use the .pre <span> to include icons before the label text, and use the .post <span> to include icons after the label text

Design Sample

Primary Secondary

Notes

Available icons can be found here: Line Awesome.

html

<div class="button-box left">
  <button class="button color-one"><span class="button-label"><span class="pre"><i class="la la-angle-left"></i></span>Primary</span></button>
  <button class="button secondary color-one"><span class="button-label">Secondary<span class="post"><i class="la la-angle-right"></i></span></span></button>
</div>
<div class="button-box left">
  <button class="button color-two"><span class="button-label">Primary<span class="post"><i class="la la-paperclip"></i></span></span></button>
  <button class="button secondary color-two"><span class="button-label">Secondary<span class="post"><i class="la la-paperclip"></i></span></span></button>
</div>

Buttons With a Number

To include a number with a <button>, use the .number <span> inside the .post <span> class.

Design Sample

Primary1

html

<div class="button-box left">
  <button class="button color-one"><span class="button-label">Primary<span class="post"><span class="number">1</span></span></span></button>
</div>

Buttons With a Spinner

If there is a situation where any sort of processing delay is possible when a user clicks a <button>, we should use a <button> with a .processing <span>. When necessary we can add the .active class to that span and trigger the button's spinner.

Design Sample

Primary

Notes

Click or tap the button to see its spinner

html

<div class="button-box left">
  <button class="button color-one"><span class="button-label">Primary<span class="post"><span class="processing"><i class="la la-refresh la-spin"></i></span></span></span></button>
</div>

Expanding Delete Button

Design Sample

Delete

Are you sure? No Yes

Notes

Click or tap the button to see it expand

When the user clicks these expanding delete buttons, the class .expand is added to .expanding-button-box class which triggers a CSS transition to the button's width and exposes the yes or no confirmation buttons.

html

<div class="button-box left">
  <div class="expanding-button-box color-one">
    <div class="expanding-button small"><span class="trash-icon"><i class="la la-trash"></i></span></div>
    <div class="expanding-button large">Delete</div>
    <div class="confirm-action-box">
      <span class="confirm-action-text">Are you sure?</span>
      <span class="confirm-action secondary">No</span>
      <span class="confirm-action">Yes</span>
    </div>
  </div>
</div>