tabler/docs/content/ui/components/button.mdx

---
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
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-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';
import CodeDocs from '@components/CodeDocs.astro';

## Button tag

Add the `.btn` class to a `<button>` element. The other classes on this page change its color, shape and size, or add an icon, a badge or a loading state.

<Example centered>
<div class="btn-list">
  <a href="#" class="btn" role="button">Link</a>
  <button class="btn">Button</button>
  <input type="button" class="btn" value="Input" />
  <input type="submit" class="btn" value="Submit" />
  <input type="reset" class="btn" value="Reset" />
</div>
</Example>

## Default button

The default button has a white background, a border and a short hover animation.

<Example centered>
<a href="#" class="btn" role="button">Link</a>
</Example>

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

<Example separated centered>
<div class="btn-list">
  <a href="#" class="btn btn-primary">Primary</a>
  <a href="#" class="btn btn-secondary">Secondary</a>
  <a href="#" class="btn btn-success">Success</a>
  <a href="#" class="btn btn-warning">Warning</a>
  <a href="#" class="btn btn-danger">Danger</a>
  <a href="#" class="btn btn-info">Info</a>
  <a href="#" class="btn btn-dark">Dark</a>
  <a href="#" class="btn btn-light">Light</a>
</div>
</Example>

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

<Example separated centered>
<div class="btn-list">
  <a href="#" class="btn btn-primary disabled" aria-disabled="true" tabindex="-1">Primary</a>
  <a href="#" class="btn btn-secondary disabled" aria-disabled="true" tabindex="-1">Secondary</a>
  <a href="#" class="btn btn-success disabled" aria-disabled="true" tabindex="-1">Success</a>
  <a href="#" class="btn btn-warning disabled" aria-disabled="true" tabindex="-1">Warning</a>
  <a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Danger</a>
  <a href="#" class="btn btn-info disabled" aria-disabled="true" tabindex="-1">Info</a>
  <a href="#" class="btn btn-dark disabled" aria-disabled="true" tabindex="-1">Dark</a>
  <a href="#" class="btn btn-light disabled" aria-disabled="true" tabindex="-1">Light</a>
</div>
</Example>

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

<Example separated centered>
<div class="btn-list">
  <a href="#" class="btn btn-blue">Blue</a>
  <a href="#" class="btn btn-azure">Azure</a>
  <a href="#" class="btn btn-indigo">Indigo</a>
  <a href="#" class="btn btn-purple">Purple</a>
  <a href="#" class="btn btn-pink">Pink</a>
  <a href="#" class="btn btn-red">Red</a>
  <a href="#" class="btn btn-orange">Orange</a>
  <a href="#" class="btn btn-yellow">Yellow</a>
  <a href="#" class="btn btn-lime">Lime</a>
  <a href="#" class="btn btn-green">Green</a>
  <a href="#" class="btn btn-teal">Teal</a>
  <a href="#" class="btn btn-cyan">Cyan</a>
</div>
</Example>

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

<Example separated vertical>
<div class="btn-list">
  <a href="#" class="btn btn-ghost-primary">Primary</a>
  <a href="#" class="btn btn-ghost-secondary">Secondary</a>
  <a href="#" class="btn btn-ghost-success">Success</a>
  <a href="#" class="btn btn-ghost-warning">Warning</a>
  <a href="#" class="btn btn-ghost-danger">Danger</a>
  <a href="#" class="btn btn-ghost-info">Info</a>
  <a href="#" class="btn btn-ghost-dark">Dark</a>
  <div class="p-2 bg-dark"><a href="#" class="btn btn-ghost-light">Light</a></div>
</div>
</Example>

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

<Example centered>
<a href="#" class="btn btn-square">Square button</a>
</Example>

## Pill buttons

Add the `.btn-pill` class to give a button fully rounded ends.

<Example centered>
<a href="#" class="btn btn-pill">Pill button</a>
</Example>

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

<Example centered>
<div class="btn-list">
  <a href="#" class="btn btn-outline-primary">Primary</a>
  <a href="#" class="btn btn-outline-secondary">Secondary</a>
  <a href="#" class="btn btn-outline-success">Success</a>
  <a href="#" class="btn btn-outline-warning">Warning</a>
  <a href="#" class="btn btn-outline-danger">Danger</a>
  <a href="#" class="btn btn-outline-info">Info</a>
  <a href="#" class="btn btn-outline-dark">Dark</a>
  <a href="#" class="btn btn-outline-light">Light</a>
</div>
</Example>

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

<Example separated centered vertical>
<button type="button" class="btn btn-sm">Small button</button>
<button type="button" class="btn">Default button</button>
<button type="button" class="btn btn-lg">Large button</button>
<button type="button" class="btn btn-xl">Extra large button</button>
</Example>

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

<Example centered>
<div class="btn-list">
  <button type="button" class="btn"><Icon name="upload" /> Upload</button>
  <button type="button" class="btn btn-warning"><Icon name="heart" /> I like</button>
  <button type="button" class="btn btn-success"><Icon name="check" /> I agree</button>
  <button type="button" class="btn btn-primary"><Icon name="plus" /> More</button>
  <button type="button" class="btn btn-danger"><Icon name="link" /> Link</button>
  <button type="button" class="btn btn-info"><Icon name="message" /> Comment</button>
</div>
</Example>

## Social buttons

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

<Example separated centered hideCode>
<div class="btn-list">
  <a href="#" class="btn btn-facebook"> <Icon name="brand-facebook" /> Facebook </a>
  <a href="#" class="btn btn-twitter"> <Icon name="brand-twitter" /> Twitter </a>
  <a href="#" class="btn btn-google"> <Icon name="brand-google" /> Google </a>
  <a href="#" class="btn btn-youtube"> <Icon name="brand-youtube" /> Youtube </a>
  <a href="#" class="btn btn-vimeo"> <Icon name="brand-vimeo" /> Vimeo </a>
  <a href="#" class="btn btn-dribbble"> <Icon name="brand-dribbble" /> Dribbble </a>
  <a href="#" class="btn btn-github"> <Icon name="brand-github" /> Github </a>
  <a href="#" class="btn btn-instagram"> <Icon name="brand-instagram" /> Instagram </a>
  <a href="#" class="btn btn-pinterest"> <Icon name="brand-pinterest" /> Pinterest </a>
  <a href="#" class="btn btn-vk"> <Icon name="brand-vk" /> VK </a>
  <a href="#" class="btn btn-rss"> <Icon name="rss" /> RSS </a>
  <a href="#" class="btn btn-flickr"> <Icon name="brand-flickr" /> Flickr </a>
  <a href="#" class="btn btn-bitbucket"> <Icon name="brand-bitbucket" /> Bitbucket </a>
  <a href="#" class="btn btn-tabler"> <Icon name="brand-tabler" /> Tabler </a>
</div>
</Example>

```html
<a href="#" class="btn btn-facebook">
  <svg>...</svg>
  Facebook
</a>
```

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

<Example separated vertical hideCode>
<div class="btn-list">
  <a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
    <Icon name="brand-facebook" />
  </a>
  <a href="#" class="btn btn-x btn-icon" aria-label="Button"><Icon name="brand-x" /></a>
  <a href="#" class="btn btn-google btn-icon" aria-label="Button"><Icon name="brand-google" /></a>
  <a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
    <Icon name="brand-youtube" />
  </a>
  <a href="#" class="btn btn-vimeo btn-icon" aria-label="Button"><Icon name="brand-vimeo" /></a>
  <a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
    <Icon name="brand-dribbble" />
  </a>
  <a href="#" class="btn btn-github btn-icon" aria-label="Button"><Icon name="brand-github" /></a>
  <a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
    <Icon name="brand-instagram" />
  </a>
  <a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
    <Icon name="brand-pinterest" />
  </a>
  <a href="#" class="btn btn-vk btn-icon" aria-label="Button"><Icon name="brand-vk" /></a>
  <a href="#" class="btn btn-rss btn-icon" aria-label="Button"><Icon name="rss" /></a>
  <a href="#" class="btn btn-flickr btn-icon" aria-label="Button"><Icon name="brand-flickr" /></a>
  <a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
    <Icon name="brand-bitbucket" />
  </a>
  <a href="#" class="btn btn-tabler btn-icon" aria-label="Button"><Icon name="brand-tabler" /></a>
</div>
</Example>

```html
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
  <svg>...</svg>
</a>
```

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

<Example separated centered hideCode>
<div class="btn-list">
  <a href="#" class="btn btn-primary btn-icon" aria-label="Button"><Icon name="activity" /></a>
  <a href="#" class="btn btn-github btn-icon" aria-label="Button"><Icon name="brand-github" /></a>
  <a href="#" class="btn btn-success btn-icon" aria-label="Button"><Icon name="bell" /></a>
  <a href="#" class="btn btn-warning btn-icon" aria-label="Button"><Icon name="star" /></a>
  <a href="#" class="btn btn-danger btn-icon" aria-label="Button"><Icon name="trash" /></a>
  <a href="#" class="btn btn-purple btn-icon" aria-label="Button"><Icon name="chart-bar" /></a>
  <a href="#" class="btn btn-icon" aria-label="Button"><Icon name="git-merge" /></a>
</div>
</Example>

```html
<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
  <svg>...</svg>
</a>
```

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

<Example centered hideCode height="260px">
<div class="btn-list">
  <div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
      <Icon name="calendar" />
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
    </div>
  </div>
  <div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"><Icon name="calendar" /> Show calendar</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
    </div>
  </div>
  <div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">Show calendar</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
    </div>
  </div>
</div>
</Example>

```html
<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 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.

<Example centered>
<div class="btn-list">
  <button type="button" class="btn btn-primary btn-loading" aria-busy="true" disabled>Button</button>
  <button type="button" class="btn btn-primary btn-loading" aria-busy="true" disabled>Loading button with loooong content</button>
</div>
</Example>

<Example centered>
<a href="#" class="btn btn-primary"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a>
</Example>

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

<Example separated>
<a href="#" class="btn btn-primary w-100">Full width button</a> <a href="#" class="btn btn-outline-secondary w-100">Full width outline button</a>
</Example>

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

<Example centered>
<div class="btn-list">
  <a href="#" class="btn btn-success">Save changes</a>
  <a href="#" class="btn">Save and continue</a>
  <a href="#" class="btn btn-danger">Cancel</a>
</div>
</Example>

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

<Example centered>
<div class="btn-list">
  <a href="#" class="btn">One</a>
  <a href="#" class="btn">Two</a>
  <a href="#" class="btn">Three</a>
  <a href="#" class="btn">Four</a>
  <a href="#" class="btn">Five</a>
  <a href="#" class="btn">Six</a>
  <a href="#" class="btn">Seven</a>
  <a href="#" class="btn">Eight</a>
  <a href="#" class="btn">Nine</a>
  <a href="#" class="btn">Ten</a>
  <a href="#" class="btn">Eleven</a>
  <a href="#" class="btn">Twelve</a>
  <a href="#" class="btn">Thirteen</a>
  <a href="#" class="btn">Fourteen</a>
  <a href="#" class="btn">Fifteen</a>
  <a href="#" class="btn">Sixteen</a>
  <a href="#" class="btn">Seventeen</a>
  <a href="#" class="btn">Eighteen</a>
  <a href="#" class="btn">Nineteen</a>
</div>
</Example>

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

<Example>
<div class="btn-list justify-content-center">
  <a href="#" class="btn">Save and continue</a>
  <a href="#" class="btn btn-primary">Save changes</a>
</div>
</Example>

<Example>
<div class="btn-list justify-content-end">
  <a href="#" class="btn">Save and continue</a>
  <a href="#" class="btn btn-primary">Save changes</a>
</div>
</Example>

<Example>
<div class="btn-list">
  <a href="#" class="btn btn-outline-danger me-auto">Delete</a>
  <a href="#" class="btn">Save and continue</a>
  <a href="#" class="btn btn-primary">Save changes</a>
</div>
</Example>

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

<Example centered>
<div class="btn-list">
  <a href="#" class="btn"> Notifications <span class="badge ms-2">14</span> </a>
  <a href="#" class="btn"> Messages <span class="badge ms-2">3</span> </a>
  <a href="#" class="btn"> Alerts <span class="badge ms-2">7</span> </a>
</div>
</Example>

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

<Example centered>
<div class="btn-list">
  <a href="#" class="btn"> <span class="avatar" style="background-image: url(/static/avatars/002f.jpg);"></span> Avatar </a>
  <a href="#" class="btn"> <span class="avatar" style=" background-image: url(/static/avatars/002m.jpg); "></span> Avatar </a>
  <a href="#" class="btn"> <span class="avatar" style=" background-image: url(/static/avatars/004f.jpg); "></span> Avatar </a>
</div>
</Example>

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

<Example>
<div class="btn-list">
  <button type="button" class="btn btn-animate-icon"> Save <Icon name="arrow-right" class="icon-end" /> </button>
  <button type="button" class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="plus" /> Add </button>
  <button type="button" class="btn btn-animate-icon btn-animate-icon-shake"> <Icon name="bell" /> Notifications </button>
  <button type="button" class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="settings" /> Settings </button>
  <button type="button" class="btn btn-animate-icon btn-animate-icon-pulse"> <Icon name="heart" /> Love </button>
  <button type="button" class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="x" /> Close </button>
  <button type="button" class="btn btn-animate-icon btn-animate-icon-tada"> <Icon name="check" /> Confirm </button>
  <button type="button" class="btn btn-animate-icon"> Next <Icon name="chevron-right" class="icon-end" /> </button>
  <button type="button" class="btn btn-animate-icon btn-animate-icon-move-start"> <Icon name="chevron-left" /> Previous </button>
</div>
</Example>

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

<Example centered>
<div class="btn-list">
  <a href="#" class="btn btn-link">Link button</a>
  <button type="button" class="btn btn-link">Link button</button>
</div>
</Example>

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

<Example centered>
<div class="btn-actions">
  <a href="#" class="btn btn-action" aria-label="Edit"><Icon name="edit" /></a>
  <a href="#" class="btn btn-action" aria-label="Copy"><Icon name="copy" /></a>
  <a href="#" class="btn btn-action" aria-label="Settings"><Icon name="settings" /></a>
  <a href="#" class="btn btn-action" aria-label="Delete"><Icon name="trash" /></a>
</div>
</Example>

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

<Example centered>
<div class="btn-actions">
  <a href="#" class="btn btn-action" aria-label="Refresh"><Icon name="refresh" /></a>
  <a href="#" class="btn btn-action" aria-label="Collapse"><Icon name="chevron-up" /></a>
  <a href="#" class="btn btn-action" aria-label="More actions"><Icon name="dots-vertical" /></a>
  <a href="#" class="btn btn-action" aria-label="Close"><Icon name="x" /></a>
</div>
</Example>

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

<Example centered>
<ButtonGroup>
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</ButtonGroup>
</Example>

<Example centered>
<ButtonGroup>
  <input type="radio" class="btn-check" name="btn-radio" id="btn-radio-1" autocomplete="off" checked />
  <label class="btn" for="btn-radio-1">Radio 1</label>
  <input type="radio" class="btn-check" name="btn-radio" id="btn-radio-2" autocomplete="off" />
  <label class="btn" for="btn-radio-2">Radio 2</label>
  <input type="radio" class="btn-check" name="btn-radio" id="btn-radio-3" autocomplete="off" />
  <label class="btn" for="btn-radio-3">Radio 3</label>
</ButtonGroup>
</Example>

<Example centered>
<ButtonGroup vertical={true}> <button type="button" class="btn">Top</button> <button type="button" class="btn">Middle</button> <button type="button" class="btn">Bottom</button> </ButtonGroup>
</Example>

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

<Example>
<div class="btn-list btn-list-center">
  <button type="button" class="btn btn-primary">Save</button>
  <button type="button" class="btn">Cancel</button>
</div>
</Example>

## 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
<a href="#" class="btn btn-primary btn-icon btn-floating" aria-label="New message">
  <!-- SVG icon -->
</a>
```

## 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:

<CodeDocs name="btn-variables" file="core/scss/_variables.scss" />