Buttons

Buttons are used as triggers for actions. Depending on the use case, buttons contain a combination of a clear label and an icon.

Navigate To:
View Bootstrap Guidelines

Buttons Types

Buttons do not have a fixed width. Instead they grow with the length of text inside them. However, please keep text short.

Main Buttons

Buttons are an extension of Bootstrap buttons. They have been customized to fit our own branding.

The .btn-default button is the standard button across the application.
The .btn-primary button is the happy path action on forms (or dialogs), and the strongest call to action on a page. It can only ever appear once per screen (not including the application header; can appear in a modal dialog, ignoring what's on the main page). Not every screen needs a primary button.
The .btn-secondary button is used for secondary actions when a primary button already exists or the action is not a strong action such as "Save", etc.
The .btn-link button is used for secondary actions, destructive actions such as "Cancel" and "Archive". Used to discourage the user from taking an action unless they must.

Alternative Buttons

Use these for special circumstances like status.

The .btn-danger button is used for the destructive action "Delete" or "Remove".
The .btn-success button is used upon a successful flow. Use sparingly as default, primary, secondary or link button may suffice.
The .btn-info button is used in cases such as an Informational alert box. Use sparingly as default, primary, secondary or link button may suffice.
The .btn-warning button is used in cases such as an Warning alert box. Use sparingly as default, primary, secondary or link button may suffice.
The .btn-upload button is used for uploading a file.

Code Snippet

Icon Buttons

Icon Buttons can contain text or no text. Use the class .btn-link to have an icon button with no background.

If you need an icon on the rightside of a button move the icon markup to the right of the text and add the class .btn-icon-right.

.btn-default

.btn-icon-right

.btn-icon

with background

.btn-link

without background

Code Snippet

Disabled State

Include the class .disabled and , for semantics, the attribute disabled to disable a button.

.btn.disabled

Progress Indicator Buttons

Animated Progress Indicator State

Include the class .fa-spin to the .fa icon to create an animated spinner progress indicator.

.btn .fa.fa-spin

Code Snippet