Buttons
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 | |
|---|---|---|
.btn.btn_go |
Use for positive actions (i.e. Submit, Go, Search, etc.) | |
.btn.btn_stop |
Use for negative actions (i.e. Delete, destroy, etc.) | |
.btn.btn_neutral |
Use for neutral actions (i.e. Save Draft, Agree to terms, etc.) | |
.btn.btn_cancel |
Use to cancel actions on a form | Cancel |
.btn.btn_animated |
Use to animated a button | Processing |
.btn.btn_disabled |
Use for disabled buttons | Submit |
.btn.btn_go.btn_mini |
Use for quick actions on content | Add a new item |