tabler/pages/_docs/buttons.md

title, icon, description, bootstrap-link, done, toc

title	icon	description	bootstrap-link	done	toc
Buttons	fe fe-plus-square	Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.	components/buttons/	true	true

Button tag

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

{% capture code %} Link Button {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Button variations

Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.

{% capture code %} {% for button in site.button-variants %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} {% include ui/button.html color=btn-color text=btn-title %} {% endfor %} {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Disabled buttons

Make buttons look inactive by adding the disabled boolean attribute to any .btn element. <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.

{% capture code %} {% for button in site.button-variants %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} {% include ui/button.html color=btn-color text=btn-title disabled=true %} {% endfor %} {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Color variations

The classic button, in different colors.

{% capture code %} {% for button in site.colors %} {{ button[1].title }} {% endfor %} {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Ghost Buttons

Use .btn-ghost-* class for ghost buttons.

{% capture code %} {% for button in site.button-variants %} {{ button[1].title }} {% endfor %} {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Square buttons

Add .btn-square to button to remove border-radius.

{% capture code %} {% for button in site.button-variants %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} {% include ui/button.html color=btn-color text=btn-title square=true %} {% endfor %} {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Pill buttons

Add .btn-pill class to any button to make them more rounded.

{% capture code %} {% for button in site.button-variants %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} {% include ui/button.html color=btn-color text=btn-title pill=true %} {% endfor %} {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

{% capture code %} {% for button in site.button-variants %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} {% include ui/button.html text=btn-title color=btn-color outline=true %} {% endfor %} {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Button size

Add .btn-lg or .btn-sm for additional sizes.

{% capture code %} Large button Large button {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

{% capture code %} Small button Small button {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

{% capture code %} Block level button Block level button {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Button with icon

Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.

Icons can be found here

{% capture code %} {% include ui/icon.html icon="upload" %} Upload {% include ui/icon.html icon="heart" %} I like {% include ui/icon.html icon="check" %} I agree {% include ui/icon.html icon="plus" %} More {% include ui/icon.html icon="link" %} Link {% include ui/icon.html icon="message-circle" %} Comment {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Social buttons

A button can be formatted to link to a social website

{% capture code %} {% for button in site.socials %} {% assign btn-icon = button[1].icon %} {% assign btn-title = button[1].title %} {% assign btn-color = button[0] %} {% include ui/button.html color=btn-color icon=btn-icon text=btn-title %} {% endfor %} {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

You can use only icons.

{% capture code %} {% for button in site.socials %} {% assign btn-icon = button[1].icon %} {% assign btn-color = button[0] %} {% include ui/button.html color=btn-color icon=btn-icon icon-only=true %} {% endfor %} {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Icon buttons

Icon only button. Add .btn-icon class to remove unnecessary padding from button.

{% capture code %} {% include ui/button.html icon="activity" color="primary" icon-only=true %} {% include ui/button.html icon="github" color="github" icon-only=true %} {% include ui/button.html icon="bell" color="success" icon-only=true %} {% include ui/button.html icon="star" color="warning" icon-only=true %} {% include ui/button.html icon="trash-2" color="danger" icon-only=true %} {% include ui/button.html icon="bar-chart" color="purple" icon-only=true %} {% include ui/button.html icon="git-merge" color="secondary" icon-only=true %} {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Button dropdown

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.

{% capture code %}

{% include ui/icon.html icon="calendar" %} {% include ui/dropdown-menu.html %}

{% include ui/icon.html icon="calendar" %}Show calendar {% include ui/dropdown-menu.html %}

Show calendar {% include ui/dropdown-menu.html %}

{% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

Loading button

Add .btn-loading to use a loading state on a button. The width of the button depends on the length of the text inside.

{% capture code %} {% include ui/button.html color="primary" text="Button" loading=true %} {% include ui/button.html color="primary" text="Loading button with loooong content" loading=true %} {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}

{% capture code %} {% include ui/button.html color="primary" text="Button" spinner=true %} {% endcapture %} {% include example.html code=code centered=true %}

List of buttons

You can now create a list of buttons with the .btn-list container.

{% capture code %}

Save changes Save and continue Cancel

{% endcapture %} {% include example.html code=code %}

If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.

{% capture code %}

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen

{% endcapture %} {% include example.html code=code %}

Use the .text-center or the .text-right modifiers to alter the alignment.

{% capture code %}

Save and continue Save changes

{% endcapture %} {% include example.html code=code %}

{% capture code %}

Save and continue Save changes

{% endcapture %} {% include example.html code=code %}

{% capture code %}

Delete Save and continue Save changes

{% endcapture %} {% include example.html code=code %}

Button with avatar

{% capture code %} {% include ui/avatar.html person-id="4" %} Avatar {% include ui/avatar.html person-id="5" %} Avatar {% include ui/avatar.html person-id="6" %} Avatar {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %}