tabler/_docs/buttons.md

title

title
Buttons

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.

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).

{% example html %} Link Button {% endexample %}

Button variations

{% example html %} {% for button in site.button-types %} {{ button[1] }} {% endfor %} Link {% endexample %}

Color variations

{% example html %} {% for button in site.colors %} {{ button[0] }} {% endfor %} {% endexample %}

Square buttons

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

{% example html %} {% for button in site.button-types %} {{ button[1] }} {% endfor %} {% endexample %}

Pill buttons

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

{% example html %} {% for button in site.button-types %} {{ button[1] }} {% endfor %} {% endexample %}

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.

{% example html %} {% for button in site.button-types %} {{ button[1] }} {% endfor %} {% endexample %}

Button size

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

{% example html %} Large button Large button {% endexample %}

{% example html %} Small button Small button {% endexample %}

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

{% example html %} Block level button Block level button {% endexample %}

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.

{% example html wrapper=btn-list %} Upload I like I agree More Link Comment {% endexample %}

Social buttons

{% example html wrapper=btn-list %} {% for button in site.social-buttons %} {{ button[1].title }} {% endfor %} {% endexample %}

Icon buttons

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

{% example html wrapper=btn-list %} {% endexample %}