10 KiB
title, icon, description, bootstrap-link, done
| title | icon | description | bootstrap-link | done |
|---|---|---|---|---|
| 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 |
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 wrapper=btn-list %} Link Button {% endexample %}
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.
{% example html wrapper=btn-list %} {% for button in site.button-variants %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} {% include_cached ui/button.html color=btn-color text=btn-title %} {% endfor %} {% endexample %}
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.
{% example html wrapper=btn-list %} {% for button in site.button-variants %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} {% include_cached ui/button.html color=btn-color text=btn-title disabled=true %} {% endfor %} {% endexample %}
Color variations
The classic button, in different colors.
{% example html wrapper=btn-list %} {% for button in site.colors %} {{ button[1].title }} {% endfor %} {% endexample %}
Square buttons
Add .btn-square to button to remove border-radius.
{% example html wrapper=btn-list %} {% for button in site.button-variants %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} {% include_cached ui/button.html color=btn-color text=btn-title square=true %} {% endfor %} {% endexample %}
Pill buttons
Add .btn-pill class to any button to make them more rounded.
{% example html wrapper=btn-list %} {% for button in site.button-variants %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} {% include_cached ui/button.html color=btn-color text=btn-title pill=true %} {% 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 wrapper=btn-list %} {% for button in site.button-variants %} {% assign btn-color = button[1].class %} {% assign btn-title = button[1].title %} {% include_cached ui/button.html text=btn-title color=btn-color outline=true %} {% endfor %} {% endexample %}
Button size
Add .btn-lg or .btn-sm for additional sizes.
{% example html wrapper=btn-list %} Large button Large button {% endexample %}
{% example html wrapper=btn-list %} 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.
Icons can be found here
{% example html wrapper=btn-list %} {% include_cached ui/icon.html icon="upload" class="icon-sm" %} Upload {% include_cached ui/icon.html icon="heart" class="icon-sm" %} I like {% include_cached ui/icon.html icon="check" class="icon-sm" %} I agree {% include_cached ui/icon.html icon="plus" class="icon-sm" %} More {% include_cached ui/icon.html icon="link" class="icon-sm" %} Link {% include_cached ui/icon.html icon="message-circle" class="icon-sm" %} Comment {% endexample %}
Social buttons
A button can be formatted to link to a social website
{% example html wrapper=btn-list %} {% for button in site.socials %} {% assign btn-icon = button[1].icon %} {% assign btn-title = button[1].title %} {% assign btn-color = button[0] %} {% include_cached ui/button.html color=btn-color icon=btn-icon text=btn-title %} {% endfor %} {% endexample %}
You can use only icons.
{% example html wrapper=btn-list %} {% for button in site.socials %} {% assign btn-icon = button[1].icon %} {% assign btn-color = button[0] %} {% include_cached ui/button.html color=btn-color icon=btn-icon icon-only=true %} {% endfor %} {% endexample %}
Icon buttons
Icon only button. Add .btn-icon class to remove unnecessary padding from button.
{% example html wrapper=btn-list %} {% include_cached ui/icon.html icon="activity" class="icon-sm" %} {% include_cached ui/icon.html icon="github" class="icon-sm" %} {% include_cached ui/icon.html icon="bell" class="icon-sm" %} {% include_cached ui/icon.html icon="star" class="icon-sm" %} {% include_cached ui/icon.html icon="trash-2" class="icon-sm" %} {% include_cached ui/icon.html icon="bar-chart" class="icon-sm" %} {% include_cached ui/icon.html icon="git-merge" class="icon-sm" %} {% endexample %}
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.
{% example html wrapper=btn-list %}
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.
Since the loading spinner is implemented using the :after pseudo-element, it is not supported by the <input type="submit"> element.
{% example html wrapper=btn-list %} {% include_cached ui/button.html color="primary" text="Button" spinner=true %} {% endexample %}
List of buttons
You can now create a list of buttons with the .btn-list container.
{% example html %}
{% endexample %}If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.
{% example html %}
Use the .text-center or the .text-right modifiers to alter the alignment.
{% example html %}
{% endexample %}{% example html %}
{% endexample %}Button with avatar
{% example html wrapper=btn-list %} {% include_cached ui/avatar.html person-id="4" %} Avatar {% include_cached ui/avatar.html person-id="5" %} Avatar {% include_cached ui/avatar.html person-id="6" %} Avatar {% endexample %}