Leverage Bootstrap’s custom button styles to handle actions in forms, dialogs, and beyond, with built-in support for various sizes, states, and more. For detailed instructions and additional options, refer to the official Bootstrap Documentation
Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-dark">Dark</button>| Class | Value |
|---|---|
class="btn btn-{value}"
|
primary | secondary | success | danger | warning | info | dark |
This loop dynamically generates customizable button styles, enabling you to effortlessly define unique classes and colors for your buttons.
@each $state in map-keys($custom-theme-colors) {
.btn-#{$state} {
--#{$prefix}btn-bg: var(--#{$prefix}#{$state});
--#{$prefix}btn-color: var(--#{$prefix}#{$state}-contrast);
--#{$prefix}btn-border-color: var(--#{$prefix}#{$state});
--#{$prefix}btn-hover-color: var(--#{$prefix}#{$state}-contrast);
--#{$prefix}btn-hover-bg: color-mix(in sRGB, #{$color-contrast-dark} #{$btn-hover-bg-shade-amount}, var(--#{$prefix}#{$state}));
--#{$prefix}btn-hover-border-color: var(--#{$prefix}btn-hover-bg);
--#{$prefix}btn-active-color: var(--#{$prefix}#{$state}-contrast);
--#{$prefix}btn-active-bg: color-mix(in sRGB, #{$color-contrast-dark} #{$btn-active-bg-shade-amount}, var(--#{$prefix}#{$state}));
--#{$prefix}btn-active-border-color: var(--#{$prefix}btn-active-bg);
--#{$prefix}btn-box-shadow-rgb: var(--#{$prefix}#{$state}-rgb);
--#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}#{$state}-rgb);
--#{$prefix}btn-active-shadow-rgb: var(--#{$prefix}#{$state}-rgb);
--#{$prefix}btn-disabled-color: var(--#{$prefix}#{$state}-contrast);
--#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$state});
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$state});
--#{$prefix}btn-group-border-color: color-mix(in sRGB, #{$color-contrast-dark} #{$btn-active-bg-shade-amount}, var(--#{$prefix}#{$state}));
--#{$prefix}btn-waves-effect-color: var(--#{$prefix}#{$state}-rgb);
}
}
Need a button with light background colors? Simply swap the default modifier classes with
.btn-label-* for a lighter look.
<button type="button" class="btn btn-label-primary">Primary</button>
<button type="button" class="btn btn-label-secondary">Secondary</button>
<button type="button" class="btn btn-label-success">Success</button>
<button type="button" class="btn btn-label-danger">Danger</button>
<button type="button" class="btn btn-label-warning">Warning</button>
<button type="button" class="btn btn-label-info">Info</button>
<button type="button" class="btn btn-label-dark">Dark</button>| Class | Value |
|---|---|
class="btn btn-label-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Looking for a button without the heavy background and border colors? Replace the default modifier classes with .btn-outline-* to remove all background images and colors, giving your button a minimalistic style.
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>| Class | Value |
|---|---|
class="btn btn-outline-{value}"
|
primary | secondary | success | danger | warning | info | dark |
In need of a button, but not the hefty background and border colors they bring? Replace the default modifier classes with the
.btn-text-* ones to remove all background images and colors on any button.
<button type="button" class="btn btn-text-primary">Primary</button>
<button type="button" class="btn btn-text-secondary">Secondary</button>
<button type="button" class="btn btn-text-success">Success</button>
<button type="button" class="btn btn-text-danger">Danger</button>
<button type="button" class="btn btn-text-warning">Warning</button>
<button type="button" class="btn btn-text-info">Info</button>
<button type="button" class="btn btn-text-dark">Dark</button>| Class | Value |
|---|---|
class="btn btn-text-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Just add extra class .rounded-pill to create rounded buttons.
<button type="button" class="btn rounded-pill me-2 btn-primary">Primary</button>
<button type="button" class="btn rounded-pill me-2 btn-secondary">Secondary</button>
<button type="button" class="btn rounded-pill me-2 btn-success">Success</button>
<button type="button" class="btn rounded-pill me-2 btn-danger">Danger</button>
<button type="button" class="btn rounded-pill me-2 btn-warning">Warning</button>
<button type="button" class="btn rounded-pill me-2 btn-info">Info</button>
<button type="button" class="btn rounded-pill me-2 btn-dark">Dark</button>
<button type="button" class="btn rounded-pill me-2 btn-label-primary">Primary</button>
<button type="button" class="btn rounded-pill me-2 btn-label-secondary">Secondary</button>
<button type="button" class="btn rounded-pill me-2 btn-label-success">Success</button>
<button type="button" class="btn rounded-pill me-2 btn-label-danger">Danger</button>
<button type="button" class="btn rounded-pill me-2 btn-label-warning">Warning</button>
<button type="button" class="btn rounded-pill me-2 btn-label-info">Info</button>
<button type="button" class="btn rounded-pill me-2 btn-label-dark">Dark</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-primary">Primary</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-secondary">Secondary</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-success">Success</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-danger">Danger</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-warning">Warning</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-info">Info</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-dark">Dark</button>Icon Default
<button type="button" class="btn btn-primary"><span class="icon-base ti tabler-star icon-xs me-1"></span></button>
<button type="button" class="btn btn-secondary"><span class="icon-base ti tabler-bell icon-xs me-1"></span>Secondary</button>
<button type="button" class="btn btn-label-primary"><span class="icon-base ti tabler-star icon-xs me-1"></span>Primary</button>
<button type="button" class="btn btn-label-secondary"><span class="icon-base ti tabler-bell icon-xs me-1"></span>Secondary</button>
<button type="button" class="btn btn-outline-primary"><span class="icon-base ti tabler-star icon-xs me-1"></span>Primary</button>
<button type="button" class="btn btn-outline-secondary"><span class="icon-base ti tabler-bell icon-xs me-1"></span>Secondary</button>Icon Only
Make icon buttons by adding only icon and add class .btn-icon. Use any icon as per your preference.
<button type="button" class="btn btn-icon btn-primary d-inline-flex">
<span class="icon-base ti tabler-star icon-22px"></span>
</button>
<button type="button" class="btn btn-icon btn-secondary d-inline-flex">
<span class="icon-base ti tabler-bell icon-22px"></span>
</button>
<button type="button" class="btn btn-icon btn-label-primary d-inline-flex">
<span class="icon-base ti tabler-star icon-22px"></span>
</button>
<button type="button" class="btn btn-icon btn-label-secondary d-inline-flex">
<span class="icon-base ti tabler-bell icon-22px"></span>
</button>
<button type="button" class="btn btn-icon btn-outline-primary d-inline-flex">
<span class="icon-base ti tabler-star icon-22px"></span>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary d-inline-flex">
<span class="icon-base ti tabler-bell icon-22px"></span>
</button>Create social icons by using respective social media class as mentioned in below table.
You can also create rounded social buttons by using .rounded-pill class, label social button by using .btn-label-{value} class and outline social buttons by using
.btn-outline-{value}
class.
<button type="button" class="btn btn-facebook"><i class="icon-base ti tabler-brand-facebook icon-xs me-2"></i> Facebook</button>
<button type="button" class="btn btn-twitter"><i class="icon-base ti tabler-brand-twitter icon-xs me-2"></i> Twitter</button>
<button type="button" class="btn btn-google-plus"><i class="icon-base ti tabler-brand-google icon-xs me-2"></i> Google+</button>
<button type="button" class="btn btn-instagram"><i class="icon-base ti tabler-brand-instagram icon-xs me-2"></i> Instagram</button>
<button type="button" class="btn btn-linkedin"><i class="icon-base ti tabler-brand-linkedin icon-xs me-2"></i> Linkedin</button>
<button type="button" class="btn btn-github"><i class="icon-base ti tabler-brand-github icon-xs me-2"></i> Github</button>
<button type="button" class="btn btn-dribbble"><i class="icon-base ti tabler-brand-dribbble icon-xs me-2"></i> Dribbble</button>
<button type="button" class="btn btn-pinterest"><i class="icon-base ti tabler-brand-pinterest icon-xs me-2"></i> Pinterest</button>
<button type="button" class="btn btn-slack"><i class="icon-base ti tabler-brand-slack icon-xs me-2"></i> Slack</button>
<button type="button" class="btn btn-reddit"><i class="icon-base ti tabler-brand-reddit icon-xs me-2"></i> Reddit</button>
<button type="button" class="btn btn-youtube"><i class="icon-base ti tabler-brand-youtube icon-xs me-2"></i> Youtube</button>
<button type="button" class="btn btn-vimeo"><i class="icon-base ti tabler-brand-vimeo icon-xs me-2"></i> Vimeo</button>| Class | Value |
|---|---|
class="btn btn-{value}"
|
facebook | twitter | google-plus | instagram | linkedin | github | dribbble | pinterest | slack | reddit | youtube | vimeo |
Want larger or smaller buttons? Use .btn-xl, .btn-lg, .btn-sm or .btn-xs to easily adjust the button size to your needs.
<button type="button" class="btn btn-xl btn-primary">Button xl</button>
<button type="button" class="btn btn-lg btn-primary">Button lg</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-sm btn-primary">Button sm</button>
<button type="button" class="btn btn-xs btn-primary">Button xs</button>| Class | Value |
|---|---|
class="btn btn-primary btn-{value}"
|
xl | lg | sm | xs |
Create responsive, full-width “block buttons” by combining Bootstrap's display and gap utilities for flexible, stackable layouts.
Buttons will display as pressed (with a darker background, border, and inset shadow) when active, using a pseudo-class, so no additional class is required.
However, if you need to programmatically replicate this state, you can manually apply the
.active class along with the aria-pressed="true" attribute.
<a href="#" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary active" role="button" aria-pressed="true">Link</a>To make buttons appear inactive, simply add the disabled boolean attribute to any <button> element.
For <a> elements, since they don't support the disabled attribute, apply the .disabled class to achieve the same visual effect.
The button plugin allows you to create simple on/off toggle buttons.
Toggle states
Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies.
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>Toggle buttons
Create button-like checkboxes and radio buttons by using .btn styles rather than .form-check-label on the <label> elements. These toggle buttons can further be grouped in a button group if needed.
<div class="d-block">
<input type="checkbox" class="btn-check" id="btn-check">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
</div>
<div class="d-block">
<input type="checkbox" class="btn-check" id="btn-check-2" checked>
<label class="btn btn-primary" for="btn-check-2">Checked</label>
</div>
<div class="d-block">
<input type="checkbox" class="btn-check" id="btn-check-3" checked>
<label class="btn btn-primary" for="btn-check-3">Checked</label>
</div>Checkbox and radio button groups
Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div><div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>Vertical button-group
<div class="btn-group-vertical" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck4" />
<label class="btn btn-outline-primary" for="btncheck4">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck5" />
<label class="btn btn-outline-primary" for="btncheck5">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck6" />
<label class="btn btn-outline-primary" for="btncheck6">Checkbox 3</label>
</div><div class="btn-group-vertical" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" checked />
<label class="btn btn-outline-primary" for="btnradio4">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio5" />
<label class="btn btn-outline-primary" for="btnradio5">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio6" />
<label class="btn btn-outline-primary" for="btnradio6">Radio 3</label>
</div>