---
title: Buttons
page-header: Buttons
menu: base.buttons
---

<div class="row row-cards">
	<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>
	<div class="col-12">
		<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>
	<div class="col-12">
		<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>
	<div class="col-12">
		<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>
	<div class="col-12">
		<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>
	<div class="col-12">
		<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>
	<div class="col-12">
		<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>
	<div class="col-12">
		<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>