Colors

Theme buttons are used for primary actions with .btn-primary prioritized. When used alongside primary action buttons, use .btn-outline or .btn-secondary (in case of cancel-type action).

Theme
btn btn-{primary|success}
Theme (Outline)
btn btn-outline-{primary|success}
Theme (Dark)
btn btn-{primary|success}-dark
Theme (Outline-Dark)
btn btn-outline-{primary|success}-dark
Social Media
Social Media (Outline)

Sizes

Normal form pages should use default btn sizes. In some cases, btn-lg can be used for more emphasis (like a login page) and btn-sm can be used for "inner functions" that exist on the form.

Extra-small
btn btn-{primary|success} btn-sm
Small
btn btn-{primary|success} btn-sm
Large
btn btn-{primary|success} btn-lg

Modifiers

In rare cases, you might need to override a default color for a button. Here are some options available.

Hover (Theme Color)
btn btn-hover-{primary|success}
Loading
spinner-border spinner-border-sm
Click Wave
btn-wave
White Background for Outlines
btn-bg-white

Usage

Apply the following rules for buttons as best practices.

Label
...
Good

Button labels should be what the button action performs.

...
Bad

Do not use ambiquous labels unless respond to a question.

Position
...
Good

Form submission buttons should always be right-aligned with the most important button full-color and far right. Less important buttons should use .btn-secondary or one of the .btn-outline-* classes.

...
Bad

Do not have more than one primary action button.

...
Bad

Do not separate buttons in form submissions except when using as page navigation when left buttons will imply previous action.

Padding
...
Good

When possible, expanding the width of the button is ideal, but not required. Be mindeful of smaller device sizes.

...
Bad

Don't over do it.

Combination Buttons
...
Good

Combining buttons with text buttons (as less emphasized links) is permitted.

...
Good

Alternative theme colors are permitted, although btn-secondary is suggested.

...
Good

Another option, although not common, is the use of the btn-outline-* class.

...
Bad

Do not position text-only buttons to the right of the primary actions.

Bad

Do not allow buttons to touch unless they are within btn-group parents.

...
Bad

There can only be one primary action button.

Filter Buttons
...
Good

Filter menus can contain both buttons and text links (resembling a more software menu style).

Good

Buttons, including dropdowns and search/filters, can also use btn-white to resemble button styles.