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 |
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the
.btn-outline-* ones to remove all background images and colors on any button.
<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 me-2">
<span class="icon-base ri ri-checkbox-circle-line icon-16px me-1"></span> Primary
</button>
<button type="button" class="btn btn-secondary me-2">
<span class="icon-base ri ri-notification-4-line icon-16px me-1"></span> Secondary
</button>
<button type="button" class="btn btn-label-primary me-2">
<span class="icon-base ri ri-checkbox-circle-line icon-16px me-1"></span> Primary
</button>
<button type="button" class="btn btn-label-secondary me-2">
<span class="icon-base ri ri-notification-4-line icon-16px me-1"></span> Secondary
</button>
<button type="button" class="btn btn-outline-primary me-2">
<span class="icon-base ri ri-checkbox-circle-line icon-16px me-1"></span> Primary
</button>
<button type="button" class="btn btn-outline-secondary me-2">
<span class="icon-base ri ri-notification-4-line icon-16px 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 me-2 btn-primary">
<span class="icon-base ri ri-checkbox-circle-line icon-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-secondary">
<span class="icon-base ri ri-notification-4-line icon-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-label-primary">
<span class="icon-base ri ri-checkbox-circle-line icon-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-label-secondary">
<span class="icon-base ri ri-notification-4-line icon-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-outline-primary">
<span class="icon-base ri ri-checkbox-circle-line icon-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-outline-secondary">
<span class="icon-base ri ri-notification-4-line 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 ri ri-facebook-fill icon-16px me-1"></i> Facebook
</button>
<button type="button" class="btn btn-twitter">
<i class="icon-base ri ri-twitter-fill icon-16px me-1"></i> Twitter
</button>
<button type="button" class="btn btn-google-plus">
<i class="icon-base ri ri-google-fill icon-16px me-1"></i> Google+
</button>
<button type="button" class="btn btn-instagram">
<i class="icon-base ri ri-instagram-line icon-16px me-1"></i> Instagram
</button>
<button type="button" class="btn btn-linkedin">
<i class="icon-base ri ri-linkedin-box-fill icon-16px me-1"></i> Linkedin
</button>
<button type="button" class="btn btn-github">
<i class="icon-base ri ri-github-fill icon-16px me-1"></i> Github
</button>
<button type="button" class="btn btn-dribbble">
<i class="icon-base ri ri-dribbble-line icon-16px me-1"></i> Dribbble
</button>
<button type="button" class="btn btn-pinterest">
<i class="icon-base ri ri-pinterest-fill icon-16px me-1"></i> Pinterest
</button>
<button type="button" class="btn btn-slack">
<i class="icon-base ri ri-slack-line icon-16px me-1"></i> Slack
</button>
<button type="button" class="btn btn-reddit">
<i class="icon-base ri ri-reddit-fill icon-16px me-1"></i> Reddit
</button>
<button type="button" class="btn btn-youtube">
<i class="icon-base ri ri-youtube-fill icon-16px me-1"></i> Youtube
</button>
<button type="button" class="btn btn-vimeo">
<i class="icon-base ri ri-vimeo-fill icon-16px me-1"></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 appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to buttons as they use a pseudo-class.
However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.
<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>Make buttons look inactive by adding the disabled boolean attribute to any <button> element.
<a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.
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>