buttons.md 24 KB
title: Buttons summary: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more. bootstrapLink: components/buttons/
description: Customizable buttons for user actions.
Button tag
As one of the most common elements of UI design, buttons have a very important function of engaging users within your website or app and guiding them in their actions. Use the .btn classes with the <button> element and add additional styling that will make your buttons serve their purpose and draw users' attention.
{% capture html -%} Link Button {%- endcapture -%} {%- include "docs/example.html" html=html centered %}
Default button
The standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page.
{% capture html -%} Link {%- endcapture -%} {%- include "docs/example.html" html=html centered %}
Button variations
Use the button classes that correspond to the function of your button. The big range of available colors will help you show your button's purpose and make it easy to spot.
{% capture html -%} Primary Secondary Success Warning Danger Info Dark Light {%- endcapture -%} {%- include "docs/example.html" html=html separated centered %}
Disabled buttons
Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.
{% capture html -%} Primary Secondary Success Warning Danger Info Dark Light {%- endcapture -%} {%- include "docs/example.html" html=html separated centered %}
Color variations
Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.
{% capture html -%} Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan {%- endcapture -%} {%- include "docs/example.html" html=html separated centered %}
Ghost buttons
Use the .btn-ghost-* class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, encouraging them to take action at the same time.
{% capture html -%} Primary Secondary Success Warning Danger Info Dark
Square buttons
Use the .btn-square class to remove the border radius, if you want the corners of your button to be square rather than rounded.
{% capture html -%} Square button {%- endcapture -%} {%- include "docs/example.html" html=html centered %}
Pill buttons
Add the .btn-pill class to your button to make it rounded and give it a modern and attractive look.
{% capture html -%} Pill button {%- endcapture -%} {%- include "docs/example.html" html=html centered %}
Outline buttons
Replace the default modifier class with the .btn-outline-* class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
{% capture html -%} Primary Secondary Success Warning Danger Info Dark Light {%- endcapture -%} {%- include "docs/example.html" html=html centered %}
Button size
Add .btn-lg or .btn-sm to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
{% capture html -%} Large button Large button {%- endcapture -%} {%- include "docs/example.html" html=html centered %}
{% capture html -%} Small button Small button {%- endcapture -%} {%- include "docs/example.html" html=html centered %}
Buttons with icons
Label your button with text and add an icon to communicate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and attractive look.
See all icons at tabler.io/icons.
{% capture html -%} {% 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" -%} Comment {%- endcapture -%} {%- include "docs/example.html" html=html centered %}
Social buttons
You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
{% capture html -%} {%- include "ui/icon.html" icon="brand-facebook" -%} Facebook {%- include "ui/icon.html" icon="brand-twitter" -%} Twitter {%- include "ui/icon.html" icon="brand-google" -%} Google {%- include "ui/icon.html" icon="brand-youtube" -%} Youtube {%- include "ui/icon.html" icon="brand-vimeo" -%} Vimeo {%- include "ui/icon.html" icon="brand-dribbble" -%} Dribbble {%- include "ui/icon.html" icon="brand-github" -%} Github {%- include "ui/icon.html" icon="brand-instagram" -%} Instagram {%- include "ui/icon.html" icon="brand-pinterest" -%} Pinterest {%- include "ui/icon.html" icon="brand-vk" -%} VK {%- include "ui/icon.html" icon="brand-rss" -%} RSS {%- include "ui/icon.html" icon="brand-flickr" -%} Flickr {%- include "ui/icon.html" icon="brand-bitbucket" -%} Bitbucket {%- include "ui/icon.html" icon="brand-tabler" -%} Tabler {%- endcapture -%} {%- include "docs/example.html" html=html separated centered hide-code %}
<a href="#" class="btn btn-facebook">
<svg>...</svg>
Facebook
</a>
You can also add an icon without the name of a social networking site, if you want to display more buttons in a small space.
{% capture html -%} {%- include "ui/icon.html" icon="brand-facebook" -%} {%- include "ui/icon.html" icon="brand-x" -%} {%- include "ui/icon.html" icon="brand-google" -%} {%- include "ui/icon.html" icon="brand-youtube" -%} {%- include "ui/icon.html" icon="brand-vimeo" -%} {%- include "ui/icon.html" icon="brand-dribbble" -%} {%- include "ui/icon.html" icon="brand-github" -%} {%- include "ui/icon.html" icon="brand-instagram" -%} {%- include "ui/icon.html" icon="brand-pinterest" -%} {%- include "ui/icon.html" icon="brand-vk" -%} {%- include "ui/icon.html" icon="rss" -%} {%- include "ui/icon.html" icon="brand-flickr" -%} {%- include "ui/icon.html" icon="brand-bitbucket" -%} {%- include "ui/icon.html" icon="brand-tabler" -%} {%- endcapture -%} {%- include "docs/example.html" html=html separated vertical hide-code %}
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
<svg>...</svg>
</a>
Icon buttons
Add the .btn-icon class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.
{% capture html -%} {%- include "ui/icon.html" icon="activity" -%} {%- include "ui/icon.html" icon="brand-github" -%} {%- include "ui/icon.html" icon="bell" -%} {%- include "ui/icon.html" icon="star" -%} {%- include "ui/icon.html" icon="trash" -%} {%- include "ui/icon.html" icon="chart-bar" -%} {%- include "ui/icon.html" icon="git-merge" -%} {%- endcapture -%} {%- include "docs/example.html" html=html separated centered hide-code %}
<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
<svg>...</svg>
</a>
Dropdown buttons
Create a dropdown button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.
{% capture html -%}
{%- include "ui/icon.html" icon="calendar" -%}
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
{%- include "ui/icon.html" icon="calendar" -%}
Show calendar
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
<svg>...</svg>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
Loading buttons
Add the .btn-loading class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.
{% capture html -%}
Button
Loading button with loooong content
{%- endcapture -%} {%- include "docs/example.html" html=html centered %}
{% capture html -%} Button {%- endcapture -%} {%- include "docs/example.html" html=html centered %}
Full width buttons
Add the .w-100 class to make buttons span the full width of their container. This is useful for mobile-first designs or when you want buttons to take up the entire available space.
{% capture html -%} Full width button Full width outline button {%- endcapture -%} {%- include "docs/example.html" html=html separated %}
List of buttons
Create a list of buttons using the .btn-list container to display different actions a user can take. If you add additional styling, such as colors, you will be able to focus users' attention on a particular action or suggest the result.
{% capture html -%}
If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.
{% capture html -%}
Use the .text-center or the .text-end modifiers to change the buttons' alignment and place them where they suit best.
{% capture html -%}
{% capture html -%}
{% capture html -%}
Buttons with badges
Add badges to buttons to display additional information like counts, notifications, or status indicators. Badges automatically position themselves within the button layout.
{% capture html -%} Notifications 14 Messages 3 Alerts 7 {%- endcapture -%} {%- include "docs/example.html" html=html centered %}
Buttons with avatars
Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
{% capture html -%} <span
class="avatar"
style="background-image: url(/static/avatars/002f.jpg);"
Avatar <span
class="avatar" style=" background-image: url(/static/avatars/002m.jpg); "Avatar <span
class="avatar" style=" background-image: url(/static/avatars/004f.jpg); "Avatar {%- endcapture -%} {%- include "docs/example.html" html=html centered %}
Buttons with animations on hover
Add a subtle animation effect to your buttons when users hover over them. This can enhance the interactivity and provide visual feedback to improve the user experience.
{% capture html -%}
Save {% include "ui/icon.html" icon="arrow-right" class="icon-end" %}
{% include "ui/icon.html" icon="plus" %} Add
{% include "ui/icon.html" icon="bell" %} Notifications
{% include "ui/icon.html" icon="settings" %} Settings
{% include "ui/icon.html" icon="heart" %} Love
{% include "ui/icon.html" icon="x" %} Close
{% include "ui/icon.html" icon="check" %} Confirm
Next {% include "ui/icon.html" icon="chevron-right" class="icon-end" %}
{% include "ui/icon.html" icon="chevron-left" %} Previous
Button sizes
Use size modifiers to change the size of your buttons. Available sizes: .btn-xs, .btn-sm, default, .btn-lg, .btn-xl.
{% capture html -%} Small button Default button Large button Extra large button {%- endcapture -%} {%- include "docs/example.html" html=html separated centered vertical %}
Link buttons
Use the .btn-link class to create buttons that look like links but maintain button functionality. These are useful for secondary actions that shouldn't compete with primary buttons for attention.
{% capture html -%} Link button Link button {%- endcapture -%} {%- include "docs/example.html" html=html centered %}
Action buttons
Use the .btn-action class to create subtle action buttons that are perfect for card headers, toolbars, or other interface elements where you want minimal visual impact.
{% capture html -%}
{%- include "ui/icon.html" icon="edit" -%}
{%- include "ui/icon.html" icon="copy" -%}
{%- include "ui/icon.html" icon="settings" -%}
{%- include "ui/icon.html" icon="trash" -%}
Action button groups
Use the .btn-actions container to group multiple action buttons together. This creates a cohesive set of related actions that work well in card headers, toolbars, or other interface elements.
{% capture html -%}
{%- include "ui/icon.html" icon="refresh" -%}
{%- include "ui/icon.html" icon="chevron-up" -%}
{%- include "ui/icon.html" icon="dots-vertical" -%}
{%- include "ui/icon.html" icon="x" -%}
Button groups
Use button groups to combine related buttons together. Button groups are perfect for creating toolbars, segmented controls, or any interface where multiple related actions should be visually grouped.
{% capture html -%}
{% capture html -%}
Radio 2
Radio 3
{%- endcapture -%} {%- include "docs/example.html" html=html centered %}{% capture html -%}