<div class="gr grsl">

  <p>Default buttons</p>

  <div class="gu gu-1of1 gu-m-1of1">
    <a class="btn btn-default btn-small mbs mrl">Small</a>
    <a class="btn btn-default mbs mrl">Default</a>
    <a class="btn btn-default mbs mrl"><span class="vicon vicon-plus btn-icon-before"></span>before</a>
    <a class="btn btn-default mbs mrl">after<span class="vicon vicon-plus btn-icon-after"></span></a>
    <a class="btn btn-default btn-loading mbs mrl"><span>Loading</span></a>
    <a class="btn btn-default btn-disabled mbs mrl">Disable</a>
    <a class="btn btn-default btn-large mbs mrl">Large</a>
    <a class="btn btn-default btn-lead mbs mrl">Lead Button</a>
    <a class="btn btn-default btn-fat mbs mrl">Fat Button</a>

  <p>Alternate Default buttons</p>
    <a class="btn btn-default-alt btn-small mbs mrl">Small</a>
    <a class="btn btn-default-alt mbs mrl">Default</a>
    <a class="btn btn-default-alt mbs mrl"><span class="vicon vicon-plus btn-icon-before"></span>before</a>
    <a class="btn btn-default-alt mbs mrl">after<span class="vicon vicon-plus btn-icon-after"></span></a>
    <a class="btn btn-default-alt btn-loading mbs mrl"><span>Loading</span></a>
    <a class="btn btn-default-alt btn-disabled mbs mrl">Disable</a>
    <a class="btn btn-default-alt btn-large mbs mrl">Large</a>
    <a class="btn btn-default-alt btn-lead mbs mrl">Lead Button</a>
    <a class="btn btn-default-alt btn-lead-alt mbs mrl">Lead Button alt</a>
    <a class="btn btn-default-alt btn-fat mbs mrl">Fat Button</a>


<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<!-- Add btn-small to the btn class. -->
<a class="btn btn-default btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-default mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-default mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-default mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-default btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-default btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-default btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-default btn-lead">
  Lead Button
</a>

<!-- Alternative Buttons -->
<!-- Add suffic alt to the button class for alternative buttons -->
<a class="btn btn-default-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-default-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-default-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-default-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-default-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-default-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-default-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-default-alt btn-lead">
  Lead Button
</a>

```
{{/markdown}}
{{> copy-code}}
</div>
  </div>

  <p>Primary buttons</p>

  <div class="gu gu-1of1 gu-m-1of1">
    <a class="btn btn-primary btn-small mbs mrl">Small</a>
    <a class="btn btn-primary mbs mrl">Default</a>
    <a class="btn btn-primary mbs mrl"><span class="vicon vicon-plus btn-icon-before"></span>before</a>
    <a class="btn btn-primary mbs mrl">after<span class="vicon vicon-plus btn-icon-after"></span></a>
    <a class="btn btn-primary btn-loading mbs mrl"><span>Loading</span></a>
    <a class="btn btn-primary btn-disabled mbs mrl">Disable</a>
    <a class="btn btn-primary btn-large mbs mrl">Large</a>
    <a class="btn btn-primary btn-lead mbs mrl">Lead Button</a>
    <a class="btn btn-primary btn-fat mbs mrl">Fat Button</a>

  <p>Alternate Primary buttons</p>
    <a class="btn btn-primary-alt btn-small mbs mrl">Small</a>
    <a class="btn btn-primary-alt mbs mrl">Default</a>
    <a class="btn btn-primary-alt mbs mrl"><span class="vicon vicon-plus btn-icon-before"></span>before</a>
    <a class="btn btn-primary-alt mbs mrl">after<span class="vicon vicon-plus btn-icon-after"></span></a>
    <a class="btn btn-primary-alt btn-loading mbs mrl"><span>Loading</span></a>
    <a class="btn btn-primary-alt btn-disabled mbs mrl">Disable</a>
    <a class="btn btn-primary-alt btn-large mbs mrl">Large</a>
    <a class="btn btn-primary-alt btn-lead mbs mrl">Lead Button</a>
    <a class="btn btn-primary-alt btn-lead-alt mbs mrl">Lead Button alt</a>
    <a class="btn btn-primary-alt btn-fat mbs mrl">Fat Button</a>

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html


<!-- Add btn-small to the btn class. -->
<a class="btn btn-primary btn-small">
  Small
</a>
<!-- The primary btn. -->
<a class="btn btn-primary mbs mrl">
  primary
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-primary mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-primary mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-primary btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-primary btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-primary btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-primary btn-lead">
  Lead Button
</a>

<!-- Alternative Buttons -->
<!-- Add suffic alt to the button class for alternative buttons -->
a class="btn btn-default-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-default-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-default-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-default-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-default-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-default-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-default-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-default-alt btn-lead">
  Lead Button
</a>
```
{{/markdown}}
{{> copy-code}}
</div>
  </div>


  <p>Secondary buttons</p>

  <div class="gu gu-1of1 gu-m-1of1">
    <a class="btn btn-secondary btn-small mbs mrl">Small</a>
    <a class="btn btn-secondary mbs mrl">Default</a>
    <a class="btn btn-secondary mbs mrl"><span class="vicon vicon-plus btn-icon-before"></span>before</a>
    <a class="btn btn-secondary mbs mrl">after<span class="vicon vicon-plus btn-icon-after"></span></a>
    <a class="btn btn-secondary btn-loading mbs mrl"><span>Loading</span></a>
    <a class="btn btn-secondary btn-disabled mbs mrl">Disable</a>
    <a class="btn btn-secondary btn-large mbs mrl">Large</a>
    <a class="btn btn-secondary btn-lead mbs mrl">Lead Button</a>
    <a class="btn btn-secondary btn-fat mbs mrl">Fat Button</a>

 <p>Alternate Secondary buttons</p>
    <a class="btn btn-secondary-alt btn-small mbs mrl">Small</a>
    <a class="btn btn-secondary-alt mbs mrl">Default</a>
    <a class="btn btn-secondary-alt mbs mrl"><span class="vicon vicon-plus btn-icon-before"></span>before</a>
    <a class="btn btn-secondary-alt mbs mrl">after<span class="vicon vicon-plus btn-icon-after"></span></a>
    <a class="btn btn-secondary-alt btn-loading mbs mrl"><span>Loading</span></a>
    <a class="btn btn-secondary-alt btn-disabled mbs mrl">Disable</a>
    <a class="btn btn-secondary-alt btn-large mbs mrl">Large</a>
    <a class="btn btn-secondary-alt btn-lead mbs mrl">Lead Button</a>
    <a class="btn btn-secondary-alt btn-lead-alt mbs mrl">Lead Button alt</a>
    <a class="btn btn-secondary-alt btn-fat mbs mrl">Fat Button</a>

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<!-- Add btn-small to the btn class. -->
<a class="btn btn-secondary btn-small">
  Small
</a>
<!-- The secondary btn. -->
<a class="btn btn-secondary mbs mrl">
  secondary
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-secondary mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-secondary mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-secondary btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-secondary btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-secondary btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-secondary btn-lead">
  Lead Button
</a>

<!-- Alternative Buttons -->
<!-- Add suffic alt to the button class for alternative buttons -->
<a class="btn btn-default-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-secondary-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-secondary-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-secondary-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-secondary-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-secondary-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-secondary-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-secondary-alt btn-lead">
  Lead Button
</a>
```
{{/markdown}}
{{> copy-code}}
</div>
  </div>

  <p>Tertiary buttons</p>

  <div class="gu gu-last gu-m-1of1">
    <a class="btn btn-tertiary btn-small mbs mrl">Small</a>
    <a class="btn btn-tertiary mbs mrl">Default</a>
    <a class="btn btn-tertiary mbs mrl"><span class="vicon vicon-plus btn-icon-before"></span>before</a>
    <a class="btn btn-tertiary mbs mrl">after<span class="vicon vicon-plus btn-icon-after"></span></a>
    <a class="btn btn-tertiary btn-loading mbs mrl"><span>Loading</span></a>
    <a class="btn btn-tertiary btn-disabled mbs mrl">Disable</a>
    <a class="btn btn-tertiary btn-large mbs mrl">Large</a>
    <a class="btn btn-tertiary btn-lead mbs mrl">Lead Button</a>
    <a class="btn btn-tertiary btn-fat mbs mrl">Fat Button</a>

 <p>Alternate Tertiary buttons</p>
    <a class="btn btn-tertiary-alt btn-small mbs mrl">Small</a>
    <a class="btn btn-tertiary-alt mbs mrl">Default</a>
    <a class="btn btn-tertiary-alt mbs mrl"><span class="vicon vicon-plus btn-icon-before"></span>before</a>
    <a class="btn btn-tertiary-alt mbs mrl">after<span class="vicon vicon-plus btn-icon-after"></span></a>
    <a class="btn btn-tertiary-alt btn-loading mbs mrl"><span>Loading</span></a>
    <a class="btn btn-tertiary-alt btn-disabled mbs mrl">Disable</a>
    <a class="btn btn-tertiary-alt btn-large mbs mrl">Large</a>
    <a class="btn btn-tertiary-alt btn-lead mbs mrl">Lead Button</a>
    <a class="btn btn-tertiary-alt btn-lead-alt mbs mrl">Lead Button alt</a>
    <a class="btn btn-tertiary-alt btn-fat mbs mrl">Fat Button</a>

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<!-- Add btn-small to the btn class. -->
<a class="btn btn-tertiary btn-small">
  Small
</a>
<!-- The tertiary btn. -->
<a class="btn btn-tertiary">
  tertiary
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-tertiary mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-tertiary mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-tertiary btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-tertiary btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-tertiary btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-tertiary btn-lead">
  Lead Button
</a>

<!-- Alternative Buttons -->
<!-- Add suffic alt to the button class for alternative buttons -->
<a class="btn btn-tertiary-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-tertiary-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-tertiary-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-tertiary-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-tertiary-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-tertiary-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-tertiary-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-tertiary-alt btn-lead">
  Lead Button
</a>
```
{{/markdown}}
{{> copy-code}}
</div>
  </div>
<p>White buttons (useful on dark background)</p>
<div class="gu gu-last gu-m-1of1 pll pts bg-gray mbl">
    <a class="btn btn-white-alt btn-small mbs mrl">Small</a>
    <a class="btn btn-white-alt mbs mrl">Default</a>
    <a class="btn btn-white-alt mbs mrl"><span class="vicon vicon-plus btn-icon-before"></span>before</a>
    <a class="btn btn-white-alt mbs mrl">after<span class="vicon vicon-plus btn-icon-after"></span></a>
    <a class="btn btn-white-alt btn-loading mbs mrl"><span>Loading</span></a>
    <a class="btn btn-white-alt btn-disabled mbs mrl">Disable</a>
    <a class="btn btn-white-alt btn-large mbs mrl">Large</a>
    <a class="btn btn-white-alt btn-lead mbs mrl">Lead Button</a>
    <a class="btn btn-white-alt btn-lead-alt mbs mrl">Lead Button alt</a>
    <a class="btn btn-white-alt btn-fat mbs mrl">Fat Button</a>

  </div>
<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<a class="btn btn-white-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-white-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-white-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-white-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-white-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-white-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-white-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-white-alt btn-lead">
  Lead Button
</a>

```
{{/markdown}}
{{ copy-code}}
</div>
<p>Icons buttons</p>

<a class="btn btn-icon btn-primary mrs"><span class="vicon vicon-request-add"></span></a>
<a class="btn btn-icon btn-default mrs"><span class="vicon vicon-plus"></span></a>
<a class="btn btn-icon btn-default btn-disabled mrs"><span class="vicon vicon-plus"></span></a>
<a class="btn btn-icon btn-secondary mrs"><span class="vicon vicon-close"></span></a>
<a class="btn btn-icon btn-tertiary mrs"><span class="vicon vicon-star"></span></a>

<p>Alternative Style</p>

<a class="btn btn-icon btn-primary-alt mrs"><span class="vicon vicon-request-add"></span></a>
<a class="btn btn-icon btn-default-alt mrs"><span class="vicon vicon-plus"></span></a>
<a class="btn btn-icon btn-default-alt btn-disabled mrs"><span class="vicon vicon-plus"></span></a>
<a class="btn btn-icon btn-secondary-alt mrs"><span class="vicon vicon-close"></span></a>
<a class="btn btn-icon btn-tertiary-alt mrs"><span class="vicon vicon-star"></span></a>
<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<a class="btn btn-icon btn-primary mrs"><span class="vicon vicon-request-add"></span></a>
<a class="btn btn-icon btn-default mrs"><span class="vicon vicon-plus"></span></a>
<a class="btn btn-icon btn-default btn-disabled mrs"><span class="vicon vicon-plus"></span></a>
<a class="btn btn-icon btn-secondary mrs"><span class="vicon vicon-close"></span></a>
<a class="btn btn-icon btn-tertiary mrs"><span class="vicon vicon-star"></span></a>
```
{{/markdown}}
{{> copy-code}}
</div>

<p>Link button</p>

<button class="btn-link">link example</button>

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<button class="btn-link">link example</button>
```
{{/markdown}}
{{> copy-code}}
</div>
