Buttons

A user clicks on a button to complete an action.

Anatomy

Button
Label
Icon

Example

Coded example (individual buttons)

Code snippet (individual buttons)

									
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary">Primary <i class="fa-regular fa-thumbs-up ml-9"></i></button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-circle"><i class="fa-regular fa-message-dots"></i><span class="sr-only">Chat with us</span></button>

									
  None required

Coded example (button group)

Code snippet (individual buttons)

									
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Submit</button>
  <button type="button" class="btn btn-secondary">Cancel</button>
</div>

									
  None required

Figma prototype

Usage guide

Dos and don'ts

To prompt a user to take an action. Like a call to action or search a website.

If you need to use two buttons together. Use the button group to get the dimensions and spacing correct.

Use the correct hierarchy. Follow the rules on when to use primary and secondary buttons.

In applications if you have several actions in a page don't use all primary buttons. Use secondary buttons to give the actions equal importance to the user.

Use icons that are not already created in buttons.

A secondary or tertiary action get a button over a primary action.