Buttons

<!-- SASS: src/stylesheets/_components/button.scss -->

<h6>Primary Buttons</h6>
<div>
    <button>Default</button>
    <button class="usa-button-active">Active</button>
    <button class="usa-button-hover">Hover</button>
</div>
<div>
    <button class="usa-button-primary-alt">Default</button>
    <button class="usa-button-primary-alt usa-button-active">Active</button>
    <button class="usa-button-primary-alt usa-button-hover">Hover</button>
</div>

<h6>Secondary Buttons</h6>
<div>
    <button class="usa-button-secondary">Default</button>
    <button class="usa-button-secondary usa-button-active">Active</button>
    <button class="usa-button-secondary usa-button-hover">Hover</button>
</div>

<div>
    <button class="usa-button-gray">Default</button>
    <button class="usa-button-gray usa-button-active">Active</button>
    <button class="usa-button-gray usa-button-hover">Hover</button>
</div>

<div>
    <button class="usa-button-outline" type="button">Default</button>
    <button class="usa-button-outline usa-button-active">Active</button>
    <button class="usa-button-outline usa-button-hover">Hover</button>
</div>

<div>
    <button class="usa-button-outline-inverse" type="button">Default</button>
    <button class="usa-button-outline-inverse usa-button-active">Active</button>
    <button class="usa-button-outline-inverse usa-button-hover">Hover</button>
</div>

<h6>Button Focus</h6>
<div>
    <button class="usa-button-focus">Default</button>
    <button class="usa-button-primary-alt usa-button-focus">Default</button>
    <button class="usa-button-secondary usa-button-focus">Default</button>
</div>

<h6>Disabled Button</h6>
<div>
    <button class="usa-button-disabled" disabled>Default</button>
</div>

<h6>Big Button</h6>
<div>
    <button class="usa-button-big" type="button">Default</button>
</div>

<h6>Button w/ Icon</h6>

<div>
    <button class="vaux-button-icon" type="button"><i class="fa fa-file-text-o" aria-hidden="true"></i>Button</button>
</div>

<div>

    <button class="vaux-button-icon" type="button"><i class="fa fa-file-text-o" aria-hidden="true"></i>Button</button>

    <button class="usa-button-primary-alt vaux-button-icon" type="button"><i class="fa fa-file-text-o" aria-hidden="true"></i>Button</button>
</div>

<div>
    <button class="usa-button-gray vaux-button-icon" type="button"><i class="fa fa-file-text-o" aria-hidden="true"></i>Button</button>

    <button class="usa-button-secondary vaux-button-icon" type="button"><i class="fa fa-file-text-o" aria-hidden="true"></i>Button</button>
</div>

<div>
    <button class="usa-button-outline vaux-button-icon" type="button"><i class="fa fa-file-text-o" aria-hidden="true"></i>Button</button>
    <button class="usa-button-outline-inverse vaux-button-icon" type="button"><i class="fa fa-file-text-o" aria-hidden="true"></i>Button</button>
</div>

<h6>Button styled as link</h6>
<button class="vaux-link">Button</button>

<h6>Button Group</h6>
<div>
    <button>Save</button>
    <button class="usa-button-outline" type="button">Cancel</button>
</div>