Overview

To create a button use the following markup:

            
<button class="button -primary">Primary</button>
<button class="button -secondary">Secondary</button>
<button class="button -link">Link</button>
<button class="button -link -link-compact">Link (compact)</button>
<button class="button -link -link-outline">Link (outline)</button>
            
          

Live example:

Other modifiers: -block

Use the -block modifier to make it full width.

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

Live example:

This might look ugly on desktop depending on the container's size, but with mobile-first and vast majority being on mobile, this may be acceptable in most cases.

Other modifiers: -small

Use the -small modifier to reduce button padding.

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

Live example:

Other modifiers: -right

Use the -right modifier to float the button to the right.

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

Live example:

Other modifiers: is-disabled

Use the is-disabled modifier to emulate a disabled look.

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

Live example:

Use with care; the in-built disabled attribute can often be more accessible/semantic. But it may also prevent certain interactions that you may want (e.g. tooltips or click actions), where is-disabled may then be more useful.

Note also the naming inconsistency; this does not have a - before it.

Using disabled attribute

Use the disabled attribute can be used.

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

Live example:

As noted earlier, the in-built disabled attribute can often be more accessible/semantic. But it may also prevent certain interactions that you may want (e.g. tooltips or click actions). Consider using is-disabled if you need interactions but research/test the accessibility implications of that in that case.

Buttons with icons

We currently use v4 of Font Awesome for the icons.

For icons in buttons add an <i> element inside the button. Use aria-hidden="true" on decorative icons. The button's CSS handles spacing automatically.

            
<button class="button -primary"><i class="fas fa-check" aria-hidden="true"></i> Confirm</button>
<button class="button -secondary"><i class="fas fa-pen" aria-hidden="true"></i> Edit</button>
<button class="button -primary">Next <i class="fas fa-arrow-right" aria-hidden="true"></i></button>
<button class="button -link"><i class="fas fa-arrow-left" aria-hidden="true"></i> Go back</button>
            
          

Live example:

Icon-only buttons: -icon-only

Use the -icon-only modifier for square icon buttons (48×48px).

            
<button class="button -primary -icon-only"><i class="fas fa-plus" aria-hidden="true"></i><span class="sr-only">Add</span></button>
<button class="button -secondary -icon-only"><i class="fas fa-times" aria-hidden="true"></i><span class="sr-only">Close</span></button>
<button class="button -link -icon-only"><i class="fas fa-trash" aria-hidden="true"></i><span class="sr-only">Delete</span></button>
            
          

Live example:

Icon-only buttons must have an accessible label via sr-only text or an aria-label attribute.

Buttons with loading spinner

Use fa-spinner fa-spin to show a loading state. Combine with disabled to prevent interaction while loading.

            
<button class="button -primary" disabled><i class="fas fa-spinner fa-spin" aria-hidden="true"></i> Loading...</button>
<button class="button -secondary" disabled><i class="fas fa-spinner fa-spin" aria-hidden="true"></i> Saving...</button>
<button class="button -primary -block" disabled><i class="fas fa-spinner fa-spin" aria-hidden="true"></i> Please wait...</button>
            
          

Live example:

For a faster spin, add the fa-spin-quicker class alongside fa-spin.