mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
57 lines
2.8 KiB
HTML
57 lines
2.8 KiB
HTML
---
|
|
title: Buttons
|
|
done: true
|
|
---
|
|
|
|
<p>
|
|
{% include ui/button.html text="Button" %}
|
|
{% include ui/button.html text="Button value" %}
|
|
{% include ui/button.html text="Button" color="primary" %}
|
|
{% include ui/button.html text="Button" color="secondary" %}
|
|
{% include ui/button.html text="Button" color="green" %}
|
|
{% include ui/button.html text="Button" color="teal" %}
|
|
{% include ui/button.html text="Button" color="yellow" %}
|
|
{% include ui/button.html text="Button" color="dark" %}
|
|
{% include ui/button.html text="Button" color="red" element="a" %}
|
|
{% include ui/button.html text="Button" color="red" disabled=true %}
|
|
{% include ui/button.html text="Button" link=true %}
|
|
{% include ui/button.html text="Button" link=true class="text-danger" %}
|
|
</p>
|
|
<p>
|
|
{% include ui/button.html text="Button" color="red" square=true %}
|
|
{% include ui/button.html text="Button" color="red" pill=true %}
|
|
{% include ui/button.html text="Button" color="red" pill=true outline=true %}
|
|
{% include ui/button.html text="Button" color="red" outline=true %}
|
|
{% include ui/button.html text="Button" color="twitter" icon="twitter" %}
|
|
{% include ui/button.html color="facebook" icon="facebook" %}
|
|
{% include ui/button.html color="github" icon="github" %}
|
|
</p>
|
|
<p>
|
|
{% include ui/button.html text="Button" color="red" size="lg" %}
|
|
{% include ui/button.html text="Button" color="red" size="sm" %}
|
|
</p>
|
|
<p>
|
|
{% include ui/button.html text="Button" block=true color="primary" %}
|
|
{% include ui/button.html text="Button" block=true color="secondary" %}
|
|
</p>
|
|
<p>
|
|
<a href="#" class="btn btn-secondary">{% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar</a>
|
|
<a href="#" class="btn btn-secondary">{% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar</a>
|
|
<a href="#" class="btn btn-secondary">{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar</a>
|
|
</p>
|
|
<p>
|
|
<a href="#" class="btn btn-primary btn-loading"><span class="loader btn-loader"></span> Loading…</a>
|
|
<a href="#" class="btn btn-secondary btn-loading"><span class="loader btn-loader"></span> Loading…</a>
|
|
<a href="#" class="btn btn-warning btn-loading"><span class="loader btn-loader"></span> Loading…</a>
|
|
<a href="#" class="btn btn-outline-danger btn-loading"><span class="loader btn-loader"></span> Loading…</a>
|
|
</p>
|
|
|
|
<p>
|
|
{% include ui/button.html text="Button" label="star" color="primary" %}
|
|
{% include ui/button.html text="Button" label="star" color="green" %}
|
|
{% include ui/button.html text="Button" label="star" color="lime" %}
|
|
{% include ui/button.html text="Button" label="star" color="pink" %}
|
|
{% include ui/button.html text="Button" label="star" color="yellow" %}
|
|
{% include ui/button.html text="Button" label="star" color="orange" %}
|
|
</p>
|