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()
})
        
      

Button Group

Group buttons together using .btn-group to wrap a series of buttons. They may include button dropdowns as well.

        
<div class="btn-group">
  <button class="btn btn-outline">first</button>
  <button class="btn btn-outline active">active</button>
  <button class="btn btn-outline">third</button>
  <div class="dropdown">
    <button type="button" class="btn btn-outline">
      dropdown
      <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-caret-down' /></svg>
    </button>
    <ul class="dropdown-menu">
      <li><button>...</button></li>
    </ul>
  </div>
  <button class="btn btn-outline">fifth</button>
</div>
        
      

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>
        
      

Inline Confirm

Inline confirm is a jQuery widget that can be applied to any button that will require the user to confirm the action they wish to perform. Typically this is used for Delete scenario's but can be used other places. Use it as a pure jQuery Widget or you can use the widget binding in knockout.

Inline confirm buttons can be created using jQuery or a Knockout binding.

For more informations about the options and how to consume it see the inlineConfirm Code Page.

        
$(function(){
  $('.btn-danger').inlineConfirm()
})
        
        
<button class="btn btn-danger" data-bind="click: deleteHandler, widget:'inlineConfirm'">Delete</button>
        
      

Copy to Clipboard Button

The copy to clipboard button pattern allows users to copy a specified value to their system clipboard with the press of a button. This component can be useful to allow users to copy things such as keys, ids, or passwords.

See the copy to clipboard input and widget binding.

        
$("#copyBtn").copyable();
        
        
<button id="copyBtn" class="btn btn-default copyable" value="value to copy">Copy me!</button>