Go ahead, push our buttons

We've provided a few basic styles and guidelines for using them. In most cases, you'll need to append multiple CSS classnames to your buttons (or links that you want to look like buttons).

There are 2 sizes of buttons. The default size works in most cases, and for forms in the context of major user interactions. The small buttons, or mini, as we'll refer to them, work for quick actions on content.

The "btn" base class

Every button (input or href elements) gets a base class of "btn".This provides the base style that will apply to all buttons. From there, you can append additional classes, depending the action of the button.

Class name Use case
Use for positive actions (i.e. Submit, Go, Search, etc.)
Use for negative actions (i.e. Delete, destroy, etc.)
Use for neutral actions (i.e. Save Draft, Agree to terms, etc.)
Use to cancel actions on a form Cancel
Use to animated a button Processing
Use for disabled buttons Submit
Use for quick actions on content Add a new item