Buttons are used to perform actions that are called out and described by text, an icon, or both. There are also text-only buttons that are de-emphasized compared to a normal button.
<button type="button" class="btn btn-default">Default</button>
There are four types of standard buttons provided. Normal buttons, primary buttons, positive buttons, and negative buttons. Primary buttons are used to emphasize the primary action on a page. In some situations the primary action may be a positive or negative action, in which case that button type would be the primary action. Positive and negative buttons should be used sparingly and only in situations where those actions need to be emphasized, such as adding something would be positive, and deleting something would be negative. Buttons come in three sizes, small, normal, and large. The normal size should suffice in most situations. Large and small should be used sparingly, and only to emphasize or de-emphasize the importance of the button.
| Normal | Hover | Down | Focus | Class |
|---|---|---|---|---|
| btn-default | ||||
| btn-primary/btn-info | ||||
| btn-success | ||||
| btn-success-subdued | ||||
| btn-destructive btn-danger |
||||
| btn-destructive-subdued | ||||
| btn-warning |
These buttons are used when buttons are necessary, but they need, to be de-emphasized. A good example of this use case is attachments listed below the header of forms.
| Normal | Hover | Down | Focus | Class |
|---|---|---|---|---|
| btn-link |
<button type="button" class="btn btn-default disabled">Default</button>
Large buttons are taller and wider than standard buttons and are used to emphasize an action. A use case would be a continue button at the bottom of a survey, or the button below. They have the same styles as normal-sized buttons.
<p>
<button type="button" class="btn btn-default btn-lg">I'm Huge!</button>
<button type="button" class="btn btn-destructive btn-lg">I'm Huge!</button>
</p>
<p>
<button type="button" class="btn btn-default btn-sm">I'm Little...</button>
<button type="button" class="btn btn-primary btn-sm">I'm Little...</button>
</p>
<p>
<button type="button" class="btn btn-default btn-xs">I'm itty bitty</button>
<button type="button" class="btn btn-warning btn-xs">I'm itty bitty</button>
</p>
The mixture and layout of buttons should be consistent across the platform. Typically there should only ever be one main call to action within a view. The main call to action would show up as a primary, positive, or negative button. These three should not be used together. If there is a need to use both types of buttons together, use the subdued version of the less important buttons. Positive and Negative buttons have two different styles. If the action being represented is the primary action then use the normal red or green states. If the action is secondary but still positive or negative use the gray version which contains all the same styles on hover, down, focus, and disabled states.
If the primary action is destructive use the destructive style
Don't mix primary and positive or negative buttons. New should be a positive subdued button if submit is the primary action.
Don't use large button in places where normal buttons are used make sure their size is appropriate for the space they are being used in.