<h6 class="subtitle is-6 is-uppercase has-text-grey">Component</h6><h1 class="title is-serif is-1 has-text-weight-bold">Button</h1>
<p class="subtitle is-5">
    <span class="has-text-weight-semibold">Buttons</span> allow users to take actions, and make choices.
</p>

<hr class="is-large is-visible">

<h2 class="title is-4">Types & States</h2>

<table class="table is-fullwidth">
    <tbody>
        <tr>
            <td class="has-text-centered"><br><div class="button">Button</div><br><br></td>
            <td><hr class="is-small"><code>button</code></td>
            <td><hr class="is-small">For controls, like Dropdowns.</td>
        </tr>
        <tr>
            <td class="has-text-centered"><hr class="is-smaller"><div class="button is-primary">Primary</div><br><br></td>
            <td><hr class="is-small"><code>is-primary</code></td>
            <td><hr class="is-small">For primary actions, ex: <strong>"Save"</strong>.</td>
        </tr>
        <tr>
            <td class="has-text-centered"><br><div class="button is-secondary">Secondary</div><br><br></td>
            <td><hr class="is-small"><code>is-secondary</code></td>
            <td><hr class="is-small">For secondary actions, ex: <strong>"Cancel"</strong>.</td>
        </tr>
        
        <tr>
            <td class="has-text-centered"><br><div class="button is-success">Success</div><br><br></td>
            <td><hr class="is-small"><code>is-success</code></td>
            <td><hr class="is-small">For success related things, ex: <strong>"Win a price!"</strong>.</td>
        </tr>
        <tr>
            <td class="has-text-centered"><br><div class="button is-info">Info</div><br><br></td>
            <td><hr class="is-small"><code>is-info</code></td>
            <td><hr class="is-small">For informational related links, ex: <strong>"Learn more"</strong>.</td>
        </tr>
        <tr>
            <td class="has-text-centered"><br><div class="button is-warning">Warning</div><br><br></td>
            <td><hr class="is-small"><code>is-warning</code></td>
            <td><hr class="is-small">For important actions or links, ex: <strong>"Accept conditions"</strong>.</td>
        </tr>
        <tr>
            <td class="has-text-centered"><br><div class="button is-danger">Dangerous</div><br><br></td>
            <td><hr class="is-small"><code>is-danger</code></td>
            <td><hr class="is-small">For primary dangerous actions, like <strong>"Delete"</strong>.</td>
        </tr>
        <tr>
            <td class="has-text-centered"><br><div class="button is-dark">Dark</div><br><br></td>
            <td><hr class="is-small"><code>is-dark</code></td>
            <td><hr class="is-small">Dark looking button.</td>
        </tr>
        <tr>
            <td class="has-text-centered"><br><div class="button is-light">Light</div><br><br></td>
            <td><hr class="is-small"><code>is-light</code></td>
            <td><hr class="is-small">Light looking button.</td>
        </tr>
        <tr>
            <td class="has-text-centered"><br><div class="button is-text">Text</div><br><br></td>
            <td><hr class="is-small"><code>is-text</code></td>
            <td><hr class="is-small">Text inside an invisible button.</td>
        </tr>
        <tr>
            <td class="has-text-centered"><br><div class="button is-loading is-white">Hidden text</div><br><br></td>
            <td><hr class="is-small"><code>is-loading</code></td>
            <td><hr class="is-small">Loading state, can be applied to any button.</td>  
        </tr>
        <tr>
            <td class="has-text-centered"><br><div class="button is-primary" disabled>Disabled</div><br><br></td>
            <td><hr class="is-small">Attribute <code>disabled</code></td>
            <td><hr class="is-small">Disabled or non-interactive state.</td>
        </tr>
    </tbody>
</table>

<hr class="is-large is-visible">

<h2 class="title is-4">Sizes and shapes</h2>

Use classes starting with `is-[size or shape]` to change the style of a button.

<hr class="is-small">

<div class="box is-well is-large has-text-centered">
    <div class="level">
        <div class="level-item"><span class="button is-small">Small</span></div>
        <div class="level-item"><span class="button" disabled>Normal</span></div>
        <div class="level-item"><span class="button is-medium">Medium</span></div>
        <div class="level-item"><span class="button is-large">Large</span></div>
    </div>
    <hr class="is-visible">
    <div class="button is-beefy is-black">Beefy</div> &nbsp; 
    <div class="button is-beefy is-outlined is-dark">Dark, outlined and beefy</div> &nbsp; 
    <div class="button is-beefy is-secondary is-rounded">Rounded</div>
</div>

<hr class="is-large is-visible">

<h2 class="title is-4">Button Group</h2>

<div class="box is-well is-marginless is-large">
    <div class="field has-addons">
        <p class="control">
            <a class="button">Yes</a>
        </p>
        <p class="control">
            <a class="button">No</a>
        </p>
        <p class="control">
            <a class="button">Maybe</a>
        </p>
    </div>
    <hr class="is-small">
    <div class="field has-addons">
        <p class="control">
            <a class="button has-text-grey">Option</a>
        </p>
        <p class="control">
            <a class="button has-text-grey">Option</a>
        </p>
        <p class="control">
            <a class="button is-primary">Selected</a>
        </p>
    </div>
</div>

    <div class="field has-addons">
        <p class="control">
            <a class="button">Yes</a>
        </p>
        <p class="control">
            <a class="button">No</a>
        </p>
        <p class="control">
            <a class="button">Maybe</a>
        </p>
    </div>
