---
title: Buttons
page-header: Buttons
page-menu: base.buttons
layout: default
permalink: buttons.html
---

<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" show-states=true %}
			</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" show-states=true %}
			</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>