Web Application Guidelines 3.0

This version is deprecated. See the latest version.

Styling Buttons

To get the correct styling for buttons, you need to use the class names specified below. Follow the Bootstrap 2.3 class name standard. Please note that:

Link 
<a class="btn" href="#">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input"/>
<input class="btn" type="submit" value="Submit"/>

Action Semantics

Use the btn-primary class for actions where the user is creating or saving something. This includes a Login button. The btn-danger class is used for deleting actions where a warning is appropriate. For all other buttons, like Search, Cancel or Update filter, use the btn class only.

<button class="btn">Search</button>
<button class="btn btn-primary">Save</button>
<button class="btn btn-danger">Delete</button>

Sizes

<button class="btn btn-mini">Mini</button>
<button class="btn btn-small">Small</button>
<button class="btn">Regular</button>
<button class="btn btn-large">Large</button>

Disabled Buttons

<button class="btn disabled" disabled="disabled">Search</button>
<button class="btn btn-primary disabled" disabled="disabled">Save</button>
<button class="btn btn-danger disabled" disabled="disabled">Delete</button>

Button Groups

A button group is used for connected buttons, e.g. in a toolbar.

<div class="btn-group">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

Button Dropdowns

Dropdown multi action buttons.

<div class="example">
  <div class="btn-toolbar">
    <div class="btn-group">
      <button class="btn dropdown-toggle" data-toggle="dropdown">Select <span class="icon-caret-down"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">All posts</a></li>
        <li><a href="#">New posts</a></li>
        <li><a href="#">Posts with comments</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Add <span class="icon-caret-down"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">Comment</a></li>
        <li><a href="#">Post</a></li>
        <li class="divider"></li>
        <li><a href="#">Group</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Delete <span class="icon-caret-down"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">Comment</a></li>
        <li><a href="#">All comments</a></li>
      </ul>
    </div>
  </div>
</div>