---
title: Buttons
layout: component.html
---
<style>
    .demo .snippet .btn {
        display: block;
        margin-bottom: 10px;
    }
</style>
<h1 class="docs--page-header">
    Buttons
</h1>

<p class="docs--page-description">
    Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.
</p>

<h2 class="docs--section-header">Button types</h2>
<p class="docs--section-description">
    Extending on the button styles provided by Bootstrap, the following button types are available
</p>

<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
    <div class="docs--example-container demo docs--prism" data-xrayhtml><button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-transparent">Transparent</button>
<button class="btn btn-link">Link</button></div>
</div>

<h2 class="docs--section-header">Button sizes</h2>
<p class="docs--section-description">
    Sometimes buttons need to stand out, or the opposite. Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.
</p>

<div class="docs--code-example">
<button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
<div class="docs--example-container demo docs--prism" data-xrayhtml><button class="btn btn-default">Large size</button>
<button class="btn btn-default">Default size</button>
<button class="btn btn-default btn-sm">Small size</button>
<button class="btn btn-default btn-xs">Tiny size</button></div>
</div>

<p class="docs--section-description">
    Create block level buttons that spans the entire width of the parent container by adding <code>.btn-block</code>
</p>

<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
    <div class="docs--example-container demo docs--prism" data-xrayhtml><button class="btn btn-default btn-block">Large size</button>
<button class="btn btn-default btn-block">Default size</button>
<button class="btn btn-default btn-sm btn-block">Small size</button>
<button class="btn btn-default btn-xs btn-block">Tiny size</button></div>
</div>

<h2 class="docs--section-header">Button states</h2>
<p class="docs--section-description">
    Want a button to appear as hovered, or active? You can add <code>.hover</code>, or <code>.active</code> and make fake pseudo states.
</p>

<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
    <div class="docs--example-container demo docs--prism" data-xrayhtml><button class="btn btn-default">Normal</button>
<button class="btn btn-default hover">Hover</button>
<button class="btn btn-default active">Active</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary hover">Hover</button>
<button class="btn btn-primary active">Active</button>
<button class="btn btn-secondary">Normal</button>
<button class="btn btn-secondary hover">Hover</button>
<button class="btn btn-secondary active">Active</button>
<button class="btn btn-info">Normal</button>
<button class="btn btn-info hover">Hover</button>
<button class="btn btn-info active">Active</button>
<button class="btn btn-success">Normal</button>
<button class="btn btn-success hover">Hover</button>
<button class="btn btn-success active">Active</button>
<button class="btn btn-warning">Normal</button>
<button class="btn btn-warning hover">Hover</button>
<button class="btn btn-warning active">Active</button>
<button class="btn btn-danger">Normal</button>
<button class="btn btn-danger hover">Hover</button>
<button class="btn btn-danger active">Active</button>
<button class="btn btn-transparent">Normal</button>
<button class="btn btn-transparent hover">Hover</button>
<button class="btn btn-transparent active">Active</button></div>
</div>

<p class="docs--section-description">
    Make buttons unclickable by adding a <code>disabled</code> attribute to <code>&lt;button&gt;</code> or <code>.disabled</code> to <code>&lt;a&gt;</code>.
</p>

<div class="docs--code-example">
    <button class="btn btn-default docs--copy-code-btn">Copy to clipboard</button>
    <div class="docs--example-container demo docs--prism" data-xrayhtml><button class="btn btn-default disabled">Disabled</button>
<button class="btn btn-primary disabled">Disabled</button>
<button class="btn btn-secondary disabled">Disabled</button>
<button class="btn btn-info disabled">Disabled</button>
<button class="btn btn-success disabled">Disabled</button>
<button class="btn btn-warning disabled">Disabled</button>
<button class="btn btn-danger disabled">Disabled</button>
<button class="btn btn-transparent disabled">Disabled</button></div>
</div>