Buttons

Contents

Buttons

Feel free to use the .btn classes with a <button>, <a> or <input> element.

Link Button Text
<button class="btn ">Button Text</button>
<a href="#" class="btn">Link Button Text</a>

Order

Whenever a primary button is sitting next to a secondary button, the primary button should always be on the left, and the secondary button should be borderless.

<button class="btn btn-success">Main Button</button>
<button class="btn btn-link">Secondary Button</button>

States

<button class="btn disabled">Disabled Button</button>
<button class="btn active">Active Button</button>

Styles

Primary
Main button CTA, one per page

<button class="btn btn-success">Main Button</button>

Link
Button that looks like a link

<button class="btn btn-link">Link Button</button>

States

  • Danger: Only for deleting or cancelling something
  • Success: Main CTA, one per page
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-warning">Warning Button</button>

Button groups

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

Button dropdowns

<div class="btn-group">
  <a class="btn [modifier class] dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <i class="caret"></i>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Dropdown link</a></li>
    <li><a href="#">Dropdown link</a></li>
    <li><a href="#">Dropdown link</a></li>
  </ul>
</div><!--/btn-group-->

Button groups w/ dropdown

<div class="btn-group">
  <button class="btn">Left</button>
  <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
      Action
      <i class="caret"></i>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
  <button class="btn">Right</button>
</div>

Split button dropdowns

<div class="btn-group">
  <button class="btn">Action</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <i class="caret"></i>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Dropdown link</a></li>
    <li><a href="#">Dropdown link</a></li>
    <li><a href="#">Dropdown link</a></li>
  </ul>
</div><!--/btn-group-->

States

Success

<div class="btn-group">
  <button class="btn btn-success">Action</button>
  <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
    <i class="caret"></i>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Dropdown link</a></li>
    <li><a href="#">Dropdown link</a></li>
    <li><a href="#">Dropdown link</a></li>
  </ul>
</div><!--/btn-group-->