Buttons

Tags

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

Link
        
<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.

as a link
        
<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.

Include Button Label Text for Accessibility

Be sure to include text inside the button element for screen readers by using .sr-only.

        
<!-- 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>
        
      

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.

Paragraph of text with an within it.

        
<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>
        
      
anchor link to top of page