Button tags
Use the button classes on an <a>, <button>, or <input> element.
Context-specific usage
While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.
<a class="btn btn-secondary" href="#" role="button">Link</a>
<button class="btn btn-secondary" type="submit">Button</button>
<input class="btn btn-secondary" type="button" value="Input">
<input class="btn btn-secondary" type="submit" value="Submit">Options
Use any of the available button classes to quickly create a styled button.
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- DEPRECATED, kept for Bootstap 3.x support: Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Secondary inverse -->
<button class="btn btn-secondary-inverse btn-round" type="button">
<span>×</span>
</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>Sizes
Need smaller buttons? Add .btn-sm for additional sizes.
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-secondary">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
</p>Active State
For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.
<button type="button" class="btn btn-primary active">Primary button</button>
<button type="button" class="btn btn-secondary active">Button</button>
<a href="#" class="btn btn-primary active" role="button">Primary link</a>
<a href="#" class="btn btn-secondary active" role="button">Link</a>Disabled State
For <button> elements, this is done via disabled attribute or .disabled class. It's also possible to disable buttons from a parent disabled fieldset.
<button type="button" class="btn btn-primary disabled">Primary button</button>
<button type="button" class="btn btn-secondary disabled">Button</button>
<a href="#" class="btn btn-primary disabled" role="button">Primary link</a>
<a href="#" class="btn btn-secondary disabled" role="button">Link</a>
<hr>
<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<a href="#" class="btn btn-primary" disabled role="button">Primary link</a>
<a href="#" class="btn btn-secondary" disabled role="button">Link</a>
<hr>
<form>
<fieldset disabled>
<button type="button" class="btn btn-primary">Primary button</button>
<button type="button" class="btn btn-secondary">Button</button>
<a href="#" class="btn btn-primary" role="button">Primary link</a>
<a href="#" class="btn btn-secondary" role="button">Link</a>
</fieldset>
</form>Loading State
This is done via .btn-loading and it's good practice to add disabled attribute as well.
<button type="button" class="btn btn-primary btn-loading" disabled>Loading...</button>
<button type="button" class="btn btn-secondary btn-loading" disabled>Loading...</button>
<a href="#" class="btn btn-primary btn-loading" role="button" disabled>Loading...</a>
<a href="#" class="btn btn-secondary btn-loading" role="button" disabled>Loading...</a>
<button type="button" class="btn btn-secondary-inverse btn-round btn-loading" disabled>
<span>×</span>
</button>
<hr>
<button type="button" class="btn btn-sm btn-primary btn-loading" disabled>Loading...</button>
<button type="button" class="btn btn-sm btn-secondary btn-loading" disabled>Loading...</button>
<a href="#" class="btn btn-sm btn-primary btn-loading" role="button" disabled>Loading...</a>
<a href="#" class="btn btn-sm btn-secondary btn-loading" role="button" disabled>Loading...</a>
<button type="button" class="btn btn-sm btn-secondary-inverse btn-round btn-loading" disabled>
<span>×</span>
</button>Group
Wrap a series of buttons with .btn in .btn-group.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>Nesting
Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>Radio
<div class="btn-group" role="group" aria-label="...">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
</div>