Buttons

Priority Disabled Loading Pagination

Priority

Buttons are categorized by importance and can be applied to a variety of html nodes. Each variation has intention and should be used sparingly.

Examples

  <button class="default-btn">
  Default</button>

  <button class="important-btn">
  Important</button>

  <button class="primary-btn">
  Primary</button>

  <button class="danger-btn">
  Danger</button>
Note

You can create buttons using the button HTML tag accompanied by the button class.

To style an anchor (a) tag as a button use the button class.

To style an input as a button use the button class and define a label by adding a value attribute.

Disabled

Examples

  <button class="default-btn"
  disabled>
  Default</button>

  <button class="important-btn"
  disabled>
  Important</button>

  <button class="primary-btn"
  disabled>
  Primary</button>

  <button class="danger-btn"
  disabled>
  Danger</button>
Note

In most situations we recommend using the semantic disabled attribute for appropriate HTML elements. If needed there is a companion disabled utility class.

Loading

These buttons are used when we have a time-intensive action on the page. We use them to provide feedback to the user and let them know the action is in progress.

Examples

  <button class="default-btn">
  Default</button>

  <button class="important-btn">
  Important</button>

  <button class="primary-btn">
  Primary</button>

  <button class="danger-btn">
  Danger</button>
Note

Dynamically add the button-loading class to the button after the first press. After the request is completed, remove the class.

It's advisable to toggle the disabled attribute as well.

Pagination

Examples

  <div class="pagination">
     <a href="#">First</a> 
        
     <a href="#">1</a> 
     <a href="#" 
      class="active">2</a> 
     <a href="#">3</a> 
     <a href="#">4</a> 
     <a href="#">5</a> 

     <a href="#">Last</a> 
  </div>
Note

There are situations when buttons are grouped for a related function. For example, in paging controls for previous-next buttons.

Wrap two or more buttons using the pagination class.

Adding the regular class to style like the example. A dark style is also available.

If the button has no accessible name or uses an icon, include an aria-label attribute.