Indicating call to action, buttons are used for various tasks like approving invoices, signing in, accelerating payments, and more. Since buttons are prevalent across applications, they should be self-explanatory, giving a clear indication of the action that will take place when clicked.
The primary button is Cornflower Blue with the primary font, Roboto. Primary buttons should be used if they trigger the most important action on the page.
<button class="btn-primary">Primary</button>
<button class="btn-primary disabled">Primary</button>
<button class="btn-primary-inverse">Primary</button>
The secondary button uses the same color and font; however, the button has an outline style. Secondary buttons are used if there are multiple buttons on a page and the attention needs to be focused on the primary button/function.
<button class="btn-secondary">Secondary</button>
<button class="btn-secondary disabled">Secondary</button>
<button class="btn-secondary-inverse">Secondary</button>