Buttons

Buttons express what action will occur when the user clicks or touches it.

They allow the user to submit information or initiate an action.

Basic structure

<div>
  <button type="button" class="btn btn--primary">Save</button>
</div>

Primary Button

Use for highest-priority actions that are required to complete the user’s task, for examples, saving data, confirming creation of the person profile. Use a primary button only once per page, though an additional primary button can appear within modals, dialogs or notifications when needed to signal critical actions.

  <div>
    <button type="button" class="btn btn--primary">Save</button>
    <button type="button" class="btn btn--primary">Create <i class="fa fa-plus-circle fa-sm" aria-hidden="true"></i></button>
    <button type="button" class="btn btn--primary-outline">Yes</button>
  </div>
 

Secondary Button

Use for most buttons triggering non-critical actions, such as back, cancel.

  <div>
    <button type="button" class="btn btn--secondary">Cancel</button>
    <button type="button" class="btn btn--secondary"><i class="fa fa-angle-left fa-lg" aria-hidden="true"></i> Back</button>
    <button type="button" class="btn btn--secondary-outline">No</button>
  </div>
 

Danger Button

Use for most buttons triggering critical actions that cannot be undone, such as delete.

  <div>
    <button type="button" class="btn btn--danger">Delete</button>
    <button type="button" class="btn btn--danger">Delete <i class="fa fa-trash fa-sm" aria-hidden="true"></i></button>
    <button type="button" class="btn btn--danger-outline">Delete</button>
  </div>

Action Button

Use for the actions specific for a page, like exporting, uploading files and merging.

  <div>
    <button type="button" class="btn btn--action">Merge people</button>
    <button type="button" class="btn btn--action"> Export</button>
    <button type="button" class="btn btn--action-outline">
        <i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
            Upload photo
    </button>
  </div>

Button Groups

We use flex-gap--* classes for combining alignment and spacing between (not at the end of last one) buttons. For more details and examples, check out the Flexbox section.

Combination of buttons with a form is described in the Forms section.

Design guideline

States

Default State

Save Cancel Delete Merge

Hover State

Save Cancel Delete Merge

Active State

Save Cancel Delete Merge

Disabled State

Save Cancel Delete Merge

Properties

Sizing

Small, medium and large buttons are available. Consider view density and the button’s position when choosing between the three. The default size is medium, and you can use modifier classes to make the button smaller or large.

Small

Ideal for dense interfaces or when the button's action is secondary to page content. Properties:

• Font Size: 12px / .9em
• Padding: 12px 14px / .9em 1rem
• CSS Class: btn--small

  <button type="button" class="btn btn--secondary btn--small">Cancel</button>
  <button type="button" class="btn btn--secondary btn--small"><i class="fa fa-angle-left fa-lg" aria-hidden="true"></i> Back</button>
  <button type="button" class="btn btn--secondary-outline btn--small">No</button>

Medium

As the default size, medium buttons should work in most cases.

• Font Size: 14px / 1em
• Padding: 11px 20px / 0.786em 1.43em
• CSS Class: btn--medium

  <button type="button" class="btn btn--secondary btn--medium">Cancel</button>
  <button type="button" class="btn btn--secondary btn--medium"><i class="fa fa-angle-left fa-lg" aria-hidden="true"></i> Back</button>
  <button type="button" class="btn btn--secondary-outline btn--medium">No</button>

Large

Use this for strong actions in a sparse interface.

• Font Size: 16 px / 1.2em
• Padding: 14px 23px / 1em 1.7em
• CSS Class: btn--large

  <button type="button" class="btn btn--secondary btn--large">Cancel</button>
  <button type="button" class="btn btn--secondary btn--large"><i class="fa fa-angle-left fa-lg" aria-hidden="true"></i> Back</button>
  <button type="button" class="btn btn--secondary-outline btn--large">No</button>

Other properties

• Box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2)
• Border-radius: 3px

Usage guideline

Location and Order

Put buttons where users can easily find them or expect to see. Mind the order and position of buttons. The order that buttons go in, especially if there are corresponding pairs (such as ‘previous’ and ‘next’) is important. Ensure the design puts emphasis on the primary or most important action. The primary action should be not only stronger in colour and contrast, but also should be on the right hand side of the dialog.

Length

Avoid using too many words on buttons. If something needs a longer explanation, put in on the label above the button, not inside it.

Labels

Label buttons with what they do. Add a clear message of what happens after the click.

Call to Action (CTA)

Make the most important button (especially if you use them for calls to action) look like it’s the most important one.