Buttons

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

Options

<!-- Standard button -->
<button class="btn btn-default" type="submit">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button class="btn btn-primary" type="submit">Primary</button>

<!-- Indicates a successful or positive action -->
<button class="btn btn-success" type="submit">Success</button>

<!-- Contextual button for informational alert messages -->
<button class="btn btn-info" type="submit">Info</button>

<!-- Indicates caution should be taken with this action -->
<button class="btn btn-warning" type="submit">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button class="btn btn-danger" type="submit">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button class="btn btn-link" type="submit">Link</button>

Sizing

<p>
  <button class="btn btn-default btn-lg" type="submit">Large Button</button>
  <button class="btn btn-primary btn-lg" type="submit">Large Button</button>
</p>
<p>
  <button class="btn btn-default" type="submit">Large Button</button>
  <button class="btn btn-primary" type="submit">Large Button</button>
</p>
<p>
  <button class="btn btn-default btn-sm" type="submit">Small Button</button>
  <button class="btn btn-primary btn-sm" type="submit">Small Button</button>
</p>
<p>
  <button class="btn btn-default btn-xs" type="submit">Extra Small Button</button>
  <button class="btn btn-primary btn-xs" type="submit">Extra Small Button</button>
</p>
<p>
  <button class="btn btn-default btn-block" type="submit">Full Button</button>
  <button class="btn btn-primary btn-block" type="submit">Full Button</button>
</p>

States

<p>
  <button class="btn btn-default btn-lg active" type="submit">Active Button</button>
  <button class="btn btn-primary btn-lg active" type="submit">Active Button</button>
</p>
<p>
  <button class="btn btn-default btn-lg disabled" type="submit">Disabled Button</button>
  <button class="btn btn-primary btn-lg disabled" type="submit">Disabled Button</button>
</p>

Button Groups

Use a button group to lay out a set of related actions.

Guidelines for use

  • These are most often used in Popovers or Create Forms to group the save button and the cancel button
  • A button group should never contain more than one primary button
  • The cancel action must always be an rs-btn-link as shown in the example

When Submitting Forms

  • Disable primary and secondary buttons
  • Hide the "Cancel" link
  • Show the processing indicator
<div class="btn-group" role="group">
  <button class="btn btn-default" type="submit">Left</button>
  <button class="btn btn-default" type="submit">Middle</button>
  <button class="btn btn-default" type="submit">Right</button>
</div>

footer