mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
99 lines
2.6 KiB
HTML
99 lines
2.6 KiB
HTML
---
|
|
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>
|