--- title: Button summary: Buttons in every color, size and shape, with icons, loading states, social styles and button groups. description: Buttons in many colors, sizes and shapes, with icons, loading states and social styles. related: [/ui/components/dropdown] source: core/scss/ui/_buttons.scss css-vars: btn classnames: component: - class: btn desc: Container element, on a button or a link part: - class: btn-action desc: Quiet icon button for a card or a table row - class: btn-actions desc: Wrapper that groups action buttons - class: btn-list desc: Spaces several buttons in a row; add btn-list-center to center them - class: btn-group desc: Joins buttons into one control; btn-group-vertical stacks them - class: btn-toolbar desc: Groups several button groups - class: btn-check desc: Hidden input that turns a label into a toggle button style: - class: btn-outline desc: Transparent fill with a colored border - class: btn-outline-gradient desc: Gradient ring on the border; btn-outline-gradient-{color} and the named gradients change the colors - class: btn-ghost desc: No fill and no border until hovered - class: btn-link desc: Renders as a plain link modifier: - class: btn-pill desc: Fully rounded ends - class: btn-square desc: Sharp corners - class: btn-icon desc: Square button holding only an icon; it still needs an aria-label - class: btn-floating desc: Pins the button to the bottom corner of the viewport behavior: - class: btn-loading desc: Hides the label and draws a spinner; pair it with disabled and aria-busy - class: btn-animate-icon desc: Animates the icon on hover, with -pulse, -rotate, -shake, -tada or -move-start color: - class: btn-{color} desc: Any base or social color, for example btn-primary or btn-facebook size: - class: btn-sm desc: Small size - class: btn-lg desc: Large size - class: btn-xl desc: Extra large size --- import ButtonGroup from '@ui/ButtonGroup.astro'; import Example from '@components/Example.astro'; import Icon from '@ui/Icon.astro'; ## Button tag Add the `.btn` class to a ` ## Default button The default button has a white background, a border and a short hover animation. 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.
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.
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.
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.
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. Square button ## Pill buttons Add the `.btn-pill` class to give a button fully rounded ends. 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.
Primary Secondary Success Warning Danger Info Dark Light
## Outline gradient buttons `.btn-outline-gradient` keeps the fill empty, like an outline button, but draws the border as a gradient. Add a theme color, such as `.btn-outline-gradient-purple`, or one of the named gradients shared with [card gradients](/ui/components/card-gradient). The fill still follows the theme, so the ring works in dark mode without extra classes.
Default Purple Rainbow Sun Ocean Disco
Set `--tblr-btn-gradient` on the button to use your own color stops, and `--tblr-btn-gradient-direction` to change the angle.
Custom stops Left to right
## 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. ## 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).
## Social buttons Social buttons use the brand colors and icons of popular services, so a share or follow button is recognized at once.
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 ... ``` ## 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 ... ``` ## 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.
Action Another action
Action Another action
Action Another action
```html
Action Another action
``` ## 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.
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. 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.
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.
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.
Save and continue Save changes
Save and continue Save changes
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.
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.
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.
## 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.
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.
## 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.
## 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). ## 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.
## 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.