Buttons

Figuring out where the "right" button is can be frustrating when there are too many options. Let's demystify that.

On this page

Overview

Having clear guidance for what the next actions are on a page is important to reducing decision fatigue. One huge component of this comes from button styling and organization.

Most Buttons

Most buttons should use the btn-outline-primary class. This class uses the "Call to Action" color described in the guide on colors.

HTML
<button class="btn btn-outline-primary" type="button">
  Most Buttons
</button>

Primary Action Buttons

Buttons that denote the primary (or main) action of a page should use the btn-primary class.

HTML
<button
  class="btn btn-primary"
  type="button"
>
  Primary Action
</button>

Most pages have a single primary action—often save, download, or add—and may have multiple secondary or tertiary buttons. The names are to suggest what level of importance the button has to the user.

Note: If you have a row of buttons (4+), please reconsider the design.

Download / Upload Buttons

Usually a common secondary action on a page will be a direction to download or upload data to HQ. In this case, the btn-info class should be used.

HTML
<button type="button" class="btn btn-info">
  Download / Upload
</button>
Note: There are some places in HQ, such as formdesigner, where the primary action on the page, Save, uses a btn-info style to create contrast on a dark blue background. However, consider that the rule of only using this button for Download / Upload actions should not be broken for any new feature development.

Destructive Action Buttons

For buttons which correspond to a destructive action—like Delete—the btn-outline-danger class should be used. We typically like to keep one destructive action button per group of buttons / row or per page.

HTML
<button type="button" class="btn btn-outline-danger">
  Delete
</button>

Other Buttons

If you are familiar with Bootstrap 5's button documentation, you know that there are far more button styles available. Please note that while there are a variety of options available, we purposely don't list them here because we want to keep our standard button choices limited so that there is less confusion—both for the developer and the user—when it comes to using buttons consistently in HQ and what to expect from those buttons.

Signup & Login

The signup and login pages also deviate a bit from button choices by using a purple styled button. This stylistic choice is used to create a better transition between dimagi.com and commcarehq.org.