# Button > Buttons in every color, size and shape, with icons, loading states, social styles and button groups. Buttons in many colors, sizes and shapes, with icons, loading states and social styles. Source: https://docs.tabler.io/ui/components/button --- ## Button tag Add the `.btn` class to a ` ``` ## Default button The default button has a white background, a border and a short hover animation. ```html Link ``` ## Button variations Pick the class that matches what the button does, for example `.btn-primary` for the main action on the page or `.btn-danger` for one that deletes something. ```html

Primary Secondary Success Warning Danger Info Dark Light

``` ## Disabled buttons A disabled button shows that an action isn't available yet, for example until the required fields of a form are filled in. On a `button` element use the `disabled` attribute. On a link the `disabled` class only changes how it looks, so add `aria-disabled="true"` and `tabindex="-1"` as well - otherwise the link still takes focus and still follows on Enter. ```html

Primary Secondary Success Warning Danger Info Dark Light

``` ## Color variations Every theme color has a button class, so a button can match the color of the status, tag or chart it belongs to. ```html

Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan

``` ## Ghost buttons The `.btn-ghost-*` classes give a button no border and no background until it's hovered. Use them for secondary actions that shouldn't compete with the main button. ```html

Primary Secondary Success Warning Danger Info Dark

Light

``` ## 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. ```html Square button ``` ## Pill buttons Add the `.btn-pill` class to give a button fully rounded ends. ```html Pill button ``` ## Outline buttons The `.btn-outline-*` classes keep the color on the border and the text and leave the background empty. They work as secondary buttons next to a solid one. ```html

Primary Secondary Success Warning Danger Info Dark Light

``` ## Button sizes Add `.btn-sm`, `.btn-lg` or `.btn-xl` to change the size. A larger button draws the eye to the main action, and a smaller one fits into toolbars and table rows. ```html ``` ## Buttons with icons Put an icon in front of the label to make the action easier to recognize at a glance. The button styles add the spacing between the two. See all icons at [tabler.io/icons](https://tabler.io/icons). ```html

``` ## Social buttons Social buttons use the brand colors and icons of popular services, so a share or follow button is recognized at once. ```html

Facebook Twitter Google Youtube Vimeo Dribbble Github Instagram Pinterest VK RSS Flickr Bitbucket Tabler

``` ```html Facebook ``` You can also drop the name and keep only the icon, which fits more buttons into a small space. ```html

``` ```html ``` ## Icon buttons Add the `.btn-icon` class for a button that holds only an icon. It removes the horizontal padding so the button is square. Give it an `aria-label`, because there is no text to read. ```html

``` ```html ``` ## Dropdown buttons A [dropdown](/ui/components/dropdown) button opens a menu with more options. It can have a label with an icon, or only an icon when space is tight. ```html

``` ```html ``` ## Loading buttons Add the `.btn-loading` class while an action is in progress, so the user sees that the click was registered and doesn't press again. The class hides the label and draws a spinner in its place. It sets `pointer-events: none`, which stops the mouse but not the keyboard, so add `aria-busy="true"` and disable the control while it works. ```html

``` ```html Button ``` ## Full width buttons Add the `.w-100` class to make a button span the full width of its container, for example the submit button of a sign-in form. ```html Full width button Full width outline button ``` ## List of buttons Put several buttons in a `.btn-list` container to lay them out in a row with a consistent gap. Give one of them a color to mark it as the main action. ```html

Save changes Save and continue Cancel

``` If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced. ```html

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

``` Use `.text-center` or `.text-end` on the list to change its alignment. ```html

Save and continue Save changes

``` ```html

Save and continue Save changes

``` ```html

Delete Save and continue Save changes

``` ## Buttons with badges Add [badges](/ui/components/badge) to buttons to display additional information like counts, notifications, or status indicators. Badges automatically position themselves within the button layout. ```html

Notifications 14 Messages 3 Alerts 7

``` ## Buttons with avatars A button can hold an [avatar](/ui/components/avatar) next to the label, or only the avatar when space is tight. Use it for actions tied to a person, such as opening a profile. ```html

Avatar Avatar Avatar

``` ## Buttons with animations on hover Add `.btn-animate-icon` to move the icon on hover. The `-rotate`, `-shake`, `-pulse`, `-tada` and `-move-start` variants change the motion, and `icon-end` places the icon after the text. ```html

Save Add Notifications Settings Love Close Confirm Next Previous

``` ## Link buttons The `.btn-link` class makes a button look like a link while it keeps the button behavior. Use it for a secondary action next to a solid button, such as Cancel. ```html

Link button

``` ## Action buttons The `.btn-action` class makes a small, quiet button for card headers and toolbars. Always combine it with the `btn` class: use `btn btn-action`, never `btn-action` on its own. Add `btn-sm` for a smaller one. ```html

``` ## Action button groups Put several action buttons in a `.btn-actions` container to group them with a consistent gap, for example in a card header. ```html

``` ## Button groups A button group joins related buttons into one bar with shared borders. Use it for toolbars and [segmented controls](/ui/components/segmented-control). ```html

``` ```html

Radio 1 Radio 2 Radio 3

``` ```html

``` ## Centered button list `btn-list` lays buttons out in a row with a consistent gap. Add `btn-list-center` to center that row, for example under an empty state or at the end of a form. ```html

``` ## Floating button Add `btn-floating` to pin a button to the bottom corner of the viewport. It stays there while the page scrolls, casts a dropdown shadow, and is hidden when the page is printed. Pair it with `btn-icon` for the usual round action button. ```html ``` ## Accessibility - Use `button` for an action and `a` for navigation. A link styled as a button still navigates, and a `button` inside a form still submits unless you set `type="button"`. - An icon-only button has no text, so give it an `aria-label` that says what it does. `btn-icon` only removes the horizontal padding; it does not add a name. - Mark a disabled link with `aria-disabled="true"` and `tabindex="-1"`. The `disabled` class is styling only. - Pair `btn-loading` with `aria-busy="true"` and a disabled state. The class blanks the label with `color: transparent`, so the old text is still what a screen reader reads. - A button that toggles something needs `aria-pressed`; one that opens a panel needs `aria-expanded`. Bootstrap sets `aria-expanded` for you on dropdown and collapse triggers. - Color alone should not carry the meaning. `btn-danger` looks alarming, but the label has to say what happens. ## SCSS variables Use these SCSS variables to customize buttons. The default values are: ```scss $btn-border-width: $input-btn-border-width; $btn-font-weight: var(--font-weight-medium); $btn-box-shadow: var(--shadow-input); $btn-focus-box-shadow: $focus-ring-box-shadow; $btn-disabled-opacity: 0.4; $btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125); $btn-link-color: var(--link-color); $btn-link-hover-color: var(--link-hover-color); $btn-link-disabled-color: $gray-600; $btn-border-radius: var(--border-radius); $btn-border-radius-sm: var(--border-radius-sm); $btn-border-radius-lg: var(--border-radius-lg); $btn-floating-offset: 1rem; $btn-pill-icon-padding-y: 0.375rem; $btn-pill-icon-padding-x: 15px; $btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; $btn-hover-bg-shade-amount: 15%; $btn-hover-bg-tint-amount: 15%; $btn-hover-border-shade-amount: 20%; $btn-hover-border-tint-amount: 10%; $btn-active-bg-shade-amount: 20%; $btn-active-bg-tint-amount: 20%; $btn-active-border-shade-amount: 25%; $btn-active-border-tint-amount: 10%; $btn-border-color: var(--border-color); $btn-color: var(--body-color); $btn-padding-y: $input-btn-padding-y; $btn-padding-x: $input-btn-padding-x; $btn-font-family: $input-btn-font-family; $btn-font-size: $input-btn-font-size; $btn-line-height: $input-btn-line-height; $btn-white-space: null; // Set to `nowrap` to prevent text wrapping $btn-font-size-sm: $input-btn-font-size-sm; $btn-font-size-lg: $input-btn-font-size-lg; $btn-padding-y-sm: $input-btn-padding-y-sm; $btn-padding-x-sm: $input-btn-padding-x-sm; $btn-padding-y-lg: $input-btn-padding-y-lg; $btn-padding-x-lg: $input-btn-padding-x-lg; ``` _Source: `core/scss/_variables.scss`_