Button

Buttons in every color, size and shape, with icons, loading states, social styles and button groups.

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.

Link

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

Default button

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

Link

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

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

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

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

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

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

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

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

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

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

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

Pill buttons

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

Pill button

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

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

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

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.

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

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.

<div class="btn-list">
  <button type="button" class="btn">
    <!-- Download SVG icon from http://tabler.io/icons/icon/upload -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
      <path d="M7 9l5 -5l5 5" />
      <path d="M12 4l0 12" />
    </svg> Upload
  </button>
  <button type="button" class="btn btn-warning">
    <!-- Download SVG icon from http://tabler.io/icons/icon/heart -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
    </svg> I like
  </button>
  <button type="button" class="btn btn-success">
    <!-- Download SVG icon from http://tabler.io/icons/icon/check -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 12l5 5l10 -10" />
    </svg> I agree
  </button>
  <button type="button" class="btn btn-primary">
    <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 5l0 14" />
      <path d="M5 12l14 0" />
    </svg> More
  </button>
  <button type="button" class="btn btn-danger">
    <!-- Download SVG icon from http://tabler.io/icons/icon/link -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M9 15l6 -6" />
      <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
      <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
    </svg> Link
  </button>
  <button type="button" class="btn btn-info">
    <!-- Download SVG icon from http://tabler.io/icons/icon/message -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M8 9h8" />
      <path d="M8 13h6" />
      <path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12" />
    </svg> Comment
  </button>
</div>

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

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

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

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

A dropdown button opens a menu with more options. It can have a label with an icon, or only an icon when space is tight.

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

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

Button

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

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

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

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

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

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

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

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

Save and continue Save changes

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

Save and continue Save changes

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

Delete Save and continue Save changes

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

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.

Notifications 14 Messages 3 Alerts 7

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

Buttons with avatars

A button can hold an 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

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

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.

Save Add Notifications Settings Love Close Confirm Next Previous

<div class="btn-list">
  <a class="btn btn-animate-icon"> Save <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-right -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-end">
      <path d="M5 12l14 0" />
      <path d="M13 18l6 -6" />
      <path d="M13 6l6 6" />
    </svg>
  </a>
  <a class="btn btn-animate-icon btn-animate-icon-rotate">
    <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 5l0 14" />
      <path d="M5 12l14 0" />
    </svg> Add
  </a>
  <a class="btn btn-animate-icon btn-animate-icon-shake">
    <!-- Download SVG icon from http://tabler.io/icons/icon/bell -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
      <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
    </svg> Notifications
  </a>
  <a class="btn btn-animate-icon btn-animate-icon-rotate">
    <!-- Download SVG icon from http://tabler.io/icons/icon/settings -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065" />
      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
    </svg> Settings
  </a>
  <a class="btn btn-animate-icon btn-animate-icon-pulse">
    <!-- Download SVG icon from http://tabler.io/icons/icon/heart -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
    </svg> Love
  </a>
  <a class="btn btn-animate-icon btn-animate-icon-rotate">
    <!-- Download SVG icon from http://tabler.io/icons/icon/x -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M18 6l-12 12" />
      <path d="M6 6l12 12" />
    </svg> Close
  </a>
  <a class="btn btn-animate-icon btn-animate-icon-tada">
    <!-- Download SVG icon from http://tabler.io/icons/icon/check -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 12l5 5l10 -10" />
    </svg> Confirm
  </a>
  <a class="btn btn-animate-icon"> Next <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-end">
      <path d="M9 6l6 6l-6 6" />
    </svg>
  </a>
  <a class="btn btn-animate-icon btn-animate-icon-move-start">
    <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M15 6l-6 6l6 6" />
    </svg> Previous
  </a>
</div>

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

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

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.

<div class="btn-actions">
  <a href="#" class="btn btn-action" aria-label="Edit">
    <!-- Download SVG icon from http://tabler.io/icons/icon/edit -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
      <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415" />
      <path d="M16 5l3 3" />
    </svg>
  </a>
  <a href="#" class="btn btn-action" aria-label="Copy">
    <!-- Download SVG icon from http://tabler.io/icons/icon/copy -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666" />
      <path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
    </svg>
  </a>
  <a href="#" class="btn btn-action" aria-label="Settings">
    <!-- Download SVG icon from http://tabler.io/icons/icon/settings -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065" />
      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
    </svg>
  </a>
  <a href="#" class="btn btn-action" aria-label="Delete">
    <!-- Download SVG icon from http://tabler.io/icons/icon/trash -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M4 7l16 0" />
      <path d="M10 11l0 6" />
      <path d="M14 11l0 6" />
      <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
      <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
    </svg>
  </a>
</div>

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.

<div class="btn-actions">
  <a href="#" class="btn btn-action" aria-label="Refresh">
    <!-- Download SVG icon from http://tabler.io/icons/icon/refresh -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
      <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
    </svg>
  </a>
  <a href="#" class="btn btn-action" aria-label="Collapse">
    <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-up -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M6 15l6 -6l6 6" />
    </svg>
  </a>
  <a href="#" class="btn btn-action" aria-label="More actions">
    <!-- Download SVG icon from http://tabler.io/icons/icon/dots-vertical -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
      <path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
      <path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
    </svg>
  </a>
  <a href="#" class="btn btn-action" aria-label="Close">
    <!-- Download SVG icon from http://tabler.io/icons/icon/x -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M18 6l-12 12" />
      <path d="M6 6l12 12" />
    </svg>
  </a>
</div>

Button groups

A button group joins related buttons into one bar with shared borders. Use it for toolbars and segmented controls.

<div class="btn-group" role="group">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

Radio 1Radio 2Radio 3

<div class="btn-group" role="group">
  <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>
</div>

<div class="btn-group-vertical" role="group">
  <button type="button" class="btn">Top</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Bottom</button>
</div>

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.

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

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.

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

$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;

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

`btn`	component	Container element, on a button or a link
`btn-action`	part	Quiet icon button for a card or a table row
`btn-actions`	part	Wrapper that groups action buttons
`btn-list`	part	Spaces several buttons in a row; add btn-list-center to center them
`btn-group`	part	Joins buttons into one control; btn-group-vertical stacks them
`btn-toolbar`	part	Groups several button groups
`btn-check`	part	Hidden input that turns a label into a toggle button
`btn-outline`	style	Transparent fill with a colored border
`btn-ghost`	style	No fill and no border until hovered
`btn-link`	style	Renders as a plain link
`btn-pill`	modifier	Fully rounded ends
`btn-square`	modifier	Sharp corners
`btn-icon`	modifier	Square button holding only an icon; it still needs an aria-label
`btn-floating`	modifier	Pins the button to the bottom corner of the viewport
`btn-loading`	behavior	Hides the label and draws a spinner; pair it with disabled and aria-busy
`btn-animate-icon`	behavior	Animates the icon on hover, with -pulse, -rotate, -shake, -tada or -move-start
`btn-{color}`	color	Any base or social color, for example btn-primary or btn-facebook
`btn-sm`	size	Small size
`btn-lg`	size	Large size
`btn-xl`	size	Extra large size

Menu

Button

Button tag

Default button

Button variations

Disabled buttons

Color variations

Ghost buttons

Square buttons

Pill buttons

Outline buttons

Button sizes

Buttons with icons

Icon buttons

Loading buttons

Full width buttons

List of buttons

Buttons with badges

Buttons with avatars

Buttons with animations on hover

Link buttons

Action buttons

Action button groups

Button groups

Centered button list

Floating button

Accessibility

SCSS variables

Class reference

On this page

130 sleek illustrations for your startup's visual identity.

Menu

Button

Button tag

Default button

Button variations

Disabled buttons

Color variations

Ghost buttons

Square buttons

Pill buttons

Outline buttons

Button sizes

Buttons with icons

Social buttons

Icon buttons

Dropdown buttons

Loading buttons

Full width buttons

List of buttons

Buttons with badges

Buttons with avatars

Buttons with animations on hover

Link buttons

Action buttons

Action button groups

Button groups

Centered button list

Floating button

Accessibility

SCSS variables

Class reference

Related

On this page

130 sleek illustrations for your startup's visual identity.