---
title: Buttons
page-header: Buttons
done: true
menu: base.buttons
libs: tabler-buttons
---

<div class="row">
   <div class="col-12">
      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Standard Buttons</h3>
         </div>
         <div class="card-body">
            {% include parts/buttons-table.html show-link=true show-states=true %}
         </div>
      </div>

      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Outline Buttons</h3>
         </div>
         <div class="card-body">
            <p>Use <code>.btn-outline-*</code> class for outline buttons.
            </p>
            {% include parts/buttons-table.html prefix="btn-outline-" show-states=true %}
         </div>
      </div>

      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Ghost Buttons</h3>
         </div>
         <div class="card-body">
            <p>Use <code>.btn-ghost-*</code> class for ghost buttons.
            </p>
            {% include parts/buttons-table.html prefix="btn-ghost-" show-states=true %}
         </div>
      </div>

      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Square Buttons</h3>
         </div>
         <div class="card-body">
            <p>Use <code>.btn-square</code> class for square buttons.
            </p>
            {% include parts/buttons-table.html class="btn-square" %}
         </div>
      </div>

      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Pill Buttons</h3>
         </div>
         <div class="card-body">
            <p>Use <code>.btn-pill</code> class for pill buttons.
            </p>
            {% include parts/buttons-table.html class="btn-pill" %}
         </div>
      </div>

      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Extra colors</h3>
         </div>
         <div class="card-body">
            {% include parts/buttons-table.html variants=site.colors hide-labels=true icon="star" auto-columns=true %}
         </div>
      </div>

      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Icon buttons</h3>
         </div>
         <div class="card-body">
            {% include parts/buttons-table.html variants=site.socials hide-labels=true icon-only=true auto-columns=true %}
         </div>
      </div>

      <div class="card">
         <div class="card-header">
            <h3 class="card-title">Social colors</h3>
         </div>
         <div class="card-body">
            {% include parts/buttons-table.html variants=site.socials hide-labels=true icon=true auto-columns=true %}
         </div>
      </div>
   </div>
</div>