Buttons

Tags

Use the button classes on button, a, and input elements.

        
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="reset" value="Reset">
<input class="btn btn-default" type="submit" value="Submit">
        
      

Types

Six different button types are available for most situations.

        
<button type="button" class="btn btn-default">btn-default</button>
<button type="button" class="btn btn-primary">btn-primary</button>
<button type="button" class="btn btn-warning">btn-warning</button>
<button type="button" class="btn btn-danger">btn-danger</button>
<button type="button" class="btn btn-inverse">btn-inverse</button>
<button type="button" class="btn btn-outline">btn-outline</button>
<button type="button" class="btn btn-link">link</button>
        
      

Outline Buttons

Color outline style buttons using modifier classes.

        
<button type="button" class="btn btn-outline">default</button>
<button type="button" class="btn btn-outline btn-primary">primary</button>
<button type="button" class="btn btn-outline btn-warning">warning</button>
<button type="button" class="btn btn-outline btn-danger">danger</button>
        
      

Sizes

Add a .btn-lg, .btn-sm, or .btn-mini class for additional sizing options.

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

Disabled Buttons

Adding the disabled attribute to a button element will disable it.

        
<button type="button" class="btn btn-default" disabled>btn-default</button>
<button type="button" class="btn btn-primary" disabled>btn-primary</button>
<button type="button" class="btn btn-danger" disabled>btn-danger</button>
<button type="button" class="btn btn-inverse" disabled>btn-inverse</button>
<button type="button" class="btn btn-outline" disabled>btn-outline</button>
<button type="button" class="btn btn-link" disabled>link</button>
        
      

Block Level Button

Adding .btn-block will span the width of the button to 100% of it's parent.

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

Buttons with Icons

Svg icons maybe placed within a button or a tag, and will be automatically sized based on the button size specified.

        
<button type="button" class="btn btn-primary">
  <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-plus-circle' /></svg> add item
</button>
        
      

Icon Buttons

To use an svg icon as a button, wrap the <svg> with <button> and apply .btn and .btn-* to apply the approprite fill color. Icon buttons may also be sized using .btn-sm and .btn-lg.

        
<!-- small grey x icon button -->
<button class="btn btn-default btn-sm btn-icon">
  <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-times' /></svg>
  <span class="sr-only">remove</span>
</button>

<!-- default sized green x icon button -->
<button class="btn btn-primary btn-icon">
  <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-times' /></svg>
  <span class="sr-only">remove</span>
</button>

<!-- large red x icon button -->
<button class="btn btn-danger btn-lg btn-icon">
  <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-times' /></svg>
  <span class="sr-only">remove</span>
</button>
        
      

Dropdown

To make a dropdown button wrap the tigger button in a container with the class dropdown and add a ul with class dropdow-menu. By default the menu is left aligned but can be changed by adding the class dropdown-menu-right to the dropdown menu.

To use dropdowns in navbars please see the Page Header Navigation section of the components section.

        
<div class="dropdown">
   <button type="button" class="btn btn-default">
     Dropdown
     <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-caret-down' /></svg>
   </button>
   <ul class="dropdown-menu">
     <li><a href="#">Action 1</a></li>
     <li><a href="#">Action 2</a></li>
     <li><a href="#">Action 3</a></li>
     <li><button>HTML Button</button></li>
   </ul>
 </div>

 <div class="dropdown">
   <button type="button" class="btn btn-default">
     Right Aligned
     <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-caret-down' /></svg>
   </button>
   <ul class="dropdown-menu dropdown-menu-right">
     <li><a href="#">Action 1</a></li>
     <li><a href="#">Action 2</a></li>
     <li><a href="#">Action 3</a></li>
     <li role="separator" class="divider"></li>
     <li><a href="#">Action 4</a></li>
     <li><button>HTML Button</button></li>
   </ul>
 </div>
        
        
<!-- If the html is not present on page load you will need to
     either use the widget binding or call the widget directly
     on the button -->
$(function(){
  $('.dropdown button').dropdown()
})
        
      

Inline Text Button

When semantically it makes more sense to use a button instead of an a tag within a block of text, add the .btn-text-link class to match the text styles.

        
<p>Paragraph of text with an <button class="btn btn-link-text">inline button link</button> within it.</p>