<h2 class="toc">Buttons</h2>

<p>Buttons support size and color variations. These can be combined in any way.</p>

<h3>Button Sizes</h3>
{% apply view_source %}
<p>
  <button type="button" class="btn btn-xs btn-light">Default</button>
  <button type="button" class="btn btn-sm btn-light">Default</button>
  <button type="button" class="btn        btn-light">Default</button>
  <button type="button" class="btn btn-lg btn-light">Default</button>
</p>
{% end %}

<h3>Button Colors</h3>
{% apply view_source %}
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
{% end %}

<h3>Button variations</h3>
{% apply view_source %}
<p>
  <button type="button" class="btn btn-primary round">Round</button>
  <button type="button" class="btn btn-primary round shadow">Round shadow</button>
  <button type="button" class="btn btn-outline-primary">Outline</button>
  <button type="button" class="btn btn-primary active">Active</button>
  <button type="button" class="btn btn-primary" disabled>Disabled</button>
  <button type="button" class="btn btn-primary"><i class="fa fa-plus"></i> Icon</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-block">Block</button>
</p>
{% end %}

<h3>Button groups</h3>
{% apply view_source %}
<p class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary active">Category</button>
  <button type="button" class="btn btn-outline-primary">Advertiser</button>
  <button type="button" class="btn btn-outline-primary">Brand</button>
</p>
{% end %}
