Buttons

Buttons are mildly skeuomorphic, interactive elements that utilize shape and color to guide users to take actions or make choices. They should have a clear and appropriate verb that describes the choice the user is being presented with. Icons may be used in conjunction with text, but they must be contextually appropriate and send the same message if the text were hidden.

Button Styles

There are 6 button styles:

Default, the general button style.
Primary, indicates the critical, or most important action on a form/page.
Danger, indicates a dangerous, generally destructive action, such as deleting.
Success, indicates a positive action.
Warning, indicates an action that may have some side effects, such as giving a user admin access.
Link, used for non-critical actions. Useful for keeping the interface simple.

All buttons are prefixed with the btn class. The btn class can be applied to any element. Try to use <button> elements when an action won’t change the URL/route, and <a> elements when the action will change the URL/route.

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-link">Link</button>

Disabled state

<button disabled type="button" class="btn btn-default">Default</button>
<button disabled type="button" class="btn btn-primary">Primary</button>
<button disabled type="button" class="btn btn-success">Success</button>
<button disabled type="button" class="btn btn-info">Info</button>
<button disabled type="button" class="btn btn-danger">Danger</button>
<button disabled type="button" class="btn btn-warning">Warning</button>
<button disabled type="button" class="btn btn-link">Link</button>

Button Sizes

There are 4 different button sizes:

Large - use the btn-lg class
Normal - no extra classes necessary
Small - use the btn-sm class
Extra small - use the btn-xs class

<button type="button" class="btn btn-lg btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-sm btn-default">Button</button>
<button type="button" class="btn btn-xs btn-default">Button</button>

Block Level Buttons

Use the btn-block class for buttons that fill the width of their container. These are useful for narrow containers and cleaning up alignment.

<button type="button" class="btn btn-default btn-block">Block level</button>

Toggle Buttons

Similar to a checkbox, toggle buttons can be toggled between active or not active.

Add the active class and the aria-pressed="true" attribute to a button to visually hold a depressed state.

<button type="button" class="btn btn-default active" aria-pressed="true">Active</button>
<button type="button" class="btn btn-default">Normal</button>
<div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default active" aria-pressed="true">Active</button>
    <button type="button" class="btn btn-default">Right</button>
</div>

Dropdown buttons can provide a menu or popover when clicked.

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Split Buttons

Split buttons contain both a button and a dropdown. Clicking the button performs the action. Clicking the dropdown reveals other actions. Generally, the button is the primary or most common action, and items in the dropdown are secondary or less common actions.

<div class="btn-group">
  <button type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Icon Buttons

Icon buttons are buttons with an icon inside. An icon button may or may not have text. Icon buttons can help save space or improve the ability to scan/find buttons quickly.

Use btn-icon-only for buttons with only an icon in it. This optimizes the padding.

For an icon without a border, use a btn-hover.

<button type="button" class="btn btn-default">
    <i class="fa fa-comment"></i> &nbsp;Comment
</button>
<button type="button" class="btn btn-icon-only btn-default">
    <i class="fa fa-print"></i>
    <span class="sr-only">Print</span>
</button>
<button type="button" class="btn btn-icon-only btn-primary">
    <i class="fa fa-inverse fa-floppy-o"></i>
    <span class="sr-only">Save</span>
</button>
<button type="button" class="btn btn-icon-only btn-hover">
    <i class="fa fa-calendar-o"></i>
    <span class="sr-only">Calendar</span>
</button>
<button type="button" class="btn btn-default">
    Lock&nbsp;
    <i class="fa fa-arrow-right"></i>
</button>