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="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-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>
        
      

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-default btn-lg">
  <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-plus-circle' /></svg> add item
</button>
<button type="button" class="btn btn-default">
  <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-plus-circle' /></svg> add item
</button>
<button type="button" class="btn btn-default btn-sm">
  <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-plus-circle' /></svg> add item
</button>
<button type="button" class="btn btn-default btn-mini">
  <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>
        
      

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