Solid buttons
Buttons with solid background colorLight button
Light button is considered default in the UI. Use
.btn.btn-light classes in anchor, button or
input element
Light with icon
Light button can be used with text, icons or combination of both. There is no limit in number of icons per button
Light with menu
Light button also supports dropdown menus in various
directions. Use .dropdown-toggle to display
directional arrow
Solid button
Solid button supports 14 predefined colors. Use
.btn.btn-[color] classes in anchor, button or
input element
Solid with icon
Solid button can be used with text, icons or combination of both. There is no limit in number of icons per button
Solid with menu
Solid button also supports dropdown menus in various
directions. Use .dropdown-toggle to display
directional arrow
Rounded button
Use a combination of .btn and
.rounded-pill classes in button, anchor or
input element to make any button fully rounded
Rounded with icon
Rounded button can be also used with text label, icons and/or combination of both. No extra adjustments are required
Rounded with menu
Rounded button with dropdown menu. In certain cases horizontal padding can be extended with utility classes
Labeled button
In labeled button icons are separated from text label with slightly darker background color. This color can be adjusted via utility classes
Rounded with label
Rounded labeled button requires
.rounded-pill class to be added to both button
and icon elements
Labeled with menu
Labeled button with dropdown menu. Supports left and right alignment. All other options also work in this button type
Icon button
Button can be used with icon only. For better sizing (width
= height), use optional .btn-icon class in
button element
Rounded with icon
Add .rounded-pill to .btn-icon to
show perfectly rounded button in 38x38 size. Works with all
button styles and sizes
Icon button with menu
Icon button has variable width and is controlled by padding.
Add .dropdown-toggle to
.btn-icon to show directional arrow
Floating button
Button in slightly bigger size to stand out and attract more attention to specific actions. Supports all button colors and options
Floating with text
In floating buttons text label is displayed on the second line. Adjust text alignment or spacing with our utility classes
Rounded floating buttons
Floating buttons without text label can be displayed in
fully rounded style. Just add .rounded-pill to
the button element
Outline buttons
Buttons in outline styles with transparent background in default stateOutline button
Use .btn.btn-outline-[color] classes on button
element to remove background color in default state
Outline with icon
Outline button can be used with text, icons or combination of both. There is no limit in number of icons per button
Outline with menu
Outline button also supports dropdown menus in various
directions. Use .dropdown-toggle to display
directional arrow
Static outline button
Static outline button has no background color in all states.
Use .link-[color] and
.border-[color] classes on
.btn element
Solid with icon
Static outline button can be used with text, icons or combination of both. There is no limit in number of icons per button
Solid with menu
Static outline button also supports dropdown menus in
various directions. Use .dropdown-toggle to
display directional arrow
Rounded outline button
Use a combination of .btn-outline-[color] and
.rounded-pill classes to make any button fully
rounded
Rounded outline with icon
Rounded button can be also used with text label, icons and/or combination of both. No extra adjustments are required
Outline with menu
Rounded button with dropdown menu. In certain cases horizontal padding can be extended with utility classes
Labeled outline button
In labeled outline button icons are separated from text label with slightly darker background color. This color can be adjusted via utility classes
Outline rounded with label
Rounded labeled outline button requires
.rounded-pill class to be added to both button
and icon elements
Labeled outline with menu
Labeled outline button with dropdown menu. Supports left and right alignment. All other options also work in this button type
Icon outline button
Outline button can be used with icon only. For better sizing
(width = height), use optional .btn-icon class
in button element
Rounded outline with icon
Add .rounded-pill to .btn-icon to
show perfectly rounded button in 38x38 size. Works with all
button styles and sizes
Outline icon button with menu
Icon button has variable width and is controlled by padding.
Add .dropdown-toggle to .btn-icon to show
directional arrow
Floating outline button
Button in slightly bigger size to stand out and attract more attention to specific actions. Supports all button colors and options
Floating outline with text
In floating buttons text label is displayed on the second line. Adjust text alignment or spacing with our utility classes
Rounded floating outline buttons
Floating buttons without text label can be displayed in
fully rounded style. Just add .rounded-pill to
the button element
Transparent border
Use .border-transparent class in addition to
.btn-outline-[color] to make border transparent
in all button states
Default border
All outline buttons have 1px border width by
default and don't require any additional border utility
classes
Thick border
You can control border width in outline buttons with our
.border-width-[size] utility classes. Here
border width is 2px
Flat buttons
Buttons with light backgrounds in various typesFlat button
Use .btn.btn-flat-[color] classes on button
element to show semi transparent background color
Flat with icon
Flat button can be used with text, icons or combination of both. There is no limit in number of icons per button
Flat with menu
Flat button also supports dropdown menus in various
directions. Use .dropdown-toggle to display
directional arrow
Rounded flat button
Use a combination of .btn-flat-[color] and
.rounded-pill classes to make any button fully
rounded
Rounded flat with icon
Rounded button can be also used with text label, icons and/or combination of both. No extra adjustments are required
Rounded flat with menu
Rounded button with dropdown menu. In certain cases horizontal padding can be extended with utility classes
Labeled flat button
In labeled flat button icons are separated from text label with slightly darker background color. This color can be adjusted via utility classes
Rounded flat with label
Rounded labeled flat button requires
.rounded-pill class to be added to both button
and icon elements
Labeled flat with menu
Labeled flat button with dropdown menu. Supports left and right alignment. All other options also work in this button type
Icon flat button
Flat button can be used with icon only. For better sizing
(width = height), use optional .btn-icon class
in button element
Rounded flat with icon
Add .rounded-pill to .btn-icon to
show perfectly rounded button in 38x38 size. Works with all
button styles and sizes
Flat icon button with menu
Icon button has variable width and is controlled by padding.
Add .dropdown-toggle to
.btn-icon to show directional arrow
Floating flat button
Button in slightly bigger size to stand out and attract more attention to specific actions. Supports all button colors and options
Floating flat with text
In floating buttons text label is displayed on the second line. Adjust text alignment or spacing with our utility classes
Rounded floating flat buttons
Floating buttons without text label can be displayed in
fully rounded style. Just add .rounded-pill to
the button element
Transparent border
Use .border-transparent class in addition to
.btn-flat-[color] to make border transparent in
all button states
Default border
All flat buttons have 1px border width by default and don't require any additional border utility classes
Thick border
You can control border width in flat buttons with our
.border-width-[size] utility classes. Here
border width is 2px
Link buttons
Buttons with default text link stylesLink button
Link button has same size as other buttons, but background and border colors are transparent and text color is similar to text link color
Link button with icon
Link button can be used with text, icons or combination of both. There is no limit in number of icons per button
Link button with menu
Link button also supports dropdown menus in various
directions. Use .dropdown-toggle to display
directional arrow
Labeled link button
In labeled link button icons are separated from text label with custom background color. This color can be adjusted via utility classes
Link button with rounded label
Rounded labeled link button requires
.rounded-pill class to be added to icon element
Labeled link button with menu
Labeled link button with dropdown menu. Supports left and right alignment. All other options also work in this button type
Button sizes
Buttons in large, medium and small sizesSolid button sizes
Use .btn-[color].btn-[sm|lg] classes to control
solid button size. Default button size doesn't require
additional class names
Solid button with label
Use .btn-[color].btn-[sm|lg] and
.btn-labeled.btn-labeled-[start|end] classes to
control labeled solid button size
Rounded solid button
Use .btn-[color].btn-[sm|lg] and
.rounded-pill classes to control rounded solid
button size
Outline button sizes
Use .btn-outline-[color].btn-[sm|lg] classes to
control outline button size. Default button size doesn't
require additional class names
Outline button with label
Use .btn-outline-[color].btn-[sm|lg] and
.btn-labeled.btn-labeled-[start|end] classes to
control labeled outline button size
Rounded outline button
Use .btn-outline-[color].btn-[sm|lg] and
.rounded-pill classes to control rounded
outline button size
Default button sizes
Use .btn-flat-[color].btn-[sm|lg] classes to
control flat button size. Default button size doesn't
require additional class names
Labeled button sizes
Use .btn-flat-[color].btn-[sm|lg] and
.btn-labeled.btn-labeled-[start|end] classes to
control labeled flat button size
Outline button sizes
Use .btn-flat-[color].btn-[sm|lg] and
.rounded-pill classes to control rounded flat
button size
Button colors
Predefined button sizing optionsLight button
Use .btn-[light|outline-light|flat-light] class
with the base .btn in any input, anchor or
button element
Dark button
Use .btn-[dark|outline-dark|flat-dark] class
with the base .btn in any input, anchor or
button element
Primary button
Use
.btn-[primary|outline-primary|flat-primary]
class with the base .btn in any input, anchor
or button element
Secondary button
Use
.btn-[secondary|outline-secondary|flat-secondary]
class with the base .btn in any input, anchor
or button element
Danger button
Use
.btn-[danger|outline-danger|flat-danger] class
with the base .btn in any input, anchor or
button element
Success button
Use
.btn-[success|outline-success|flat-success]
class with the base .btn in any input, anchor
or button element
Warning button
Use
.btn-[warning|outline-warning|flat-warning]
class with the base .btn in any input, anchor
or button element
Info button
Use .btn-[info|outline-info|flat-info] class
with the base .btn in any input, anchor or
button element
Indigo button
Use
.btn-[indigo|outline-indigo|flat-indigo] class
with the base .btn in any input, anchor or
button element
Pink button
Use .btn-[pink|outline-pink|flat-pink] class
with the base .btn in any input, anchor or
button element
Purple button
Use
.btn-[purple|outline-purple|flat-purple] class
with the base .btn in any input, anchor or
button element
Yellow button
Use
.btn-[yellow|outline-yellow|flat-yellow] class
with the base .btn in any input, anchor or
button element
Teal button
Use .btn-[teal|outline-teal|flat-teal] class
with the base .btn in any input, anchor or
button element
White button
Use .btn-[white|outline-white|flat-white] class
with the base .btn in any input, anchor or
button element
Link button
Use .btn-link class with the base
.btn in any input, anchor or button element
Icon alignment
Examples of left and right icon alignment in buttonsLeft icon alignment
Add icon markup before button text and add
optional .me-2 class to add extra spacing
between them
Right icon alignment
Add icon markup after button text and add
optional .ms-2 class to add extra spacing
between them
Right in dropdown
Icons with left and right alignment work well in button with dropdown menu, directional arrow doesn't overlap custom icons
Left label position
Use .btn-labeled.btn-labeled-start classes in
button element to align icon label to the left
Right label position
Use .btn-labeled.btn-labeled-end classes in
button element to align icon label to the right
Right in dropdown
Labeled button with icon is also adapted for use in button with dropdown menu. Here icon is displayed after directional arrow
Button dropdowns
Dropdown menus attached to buttonsButton dropdown
Use .dropdown-toggle class to show directional
arrow in button dropdown and
data-bs-toggle="dropdown" to trigger the menu
Menu with icon
Button with dropdown can be used with text, icons or combination of both. There is no limit in number of icons per button
Segmented button
A split button with dropdown. Use additional
.dropdown-toggle-split class for proper spacing
around the dropdown caret
Button dropup
Trigger dropdown menus above elements by adding
.dropup to the parent element of dropdown
toggler
Drop right
Trigger dropdown menus at the right of the elements by
adding .dropend to the parent element of
dropdown toggler
Drop left
Trigger dropdown menus at the left of the elements by adding
.dropstart to the parent element of dropdown
toggler
Rounded button dropup
Trigger dropdown menus above rounded button by adding
.dropup to the parent element of dropdown
toggler
Rounded button menu
Rounded button with dropdown can be used with text, icons or combination of both. There is no limit in number of icons per button
Rounded segmented
A split rounded button with dropdown. Use additional
.dropdown-toggle-split class for proper spacing
around the dropdown caret
Labeled button dropup
Trigger dropdown menus above labeled button by adding
.dropup to the parent element of dropdown
toggler
Labeled segmented
A split labeled button with dropdown. Use additional
.dropdown-toggle-split class for proper spacing
around the dropdown caret
Segmented dropup
A split labeled button with dropup. Use additional
.dropdown-toggle-split class for proper spacing
around the dropdown caret
Icon button dropup
Dropup menu can be attached to any button, including buttons with icons only. Logic and markup are the same
Segmented dropdown icon
Example of segmented button with dropdown menu, attached to button with icon only. Works best in button toolbars
Segmented dropup button
Dropup is dynamic, meaning if there's not enough space above or below the button, it automatically flips
Additional options
Button toolbars, groups and controlsLoading button
Custom loading state
Radio button group
Bootstrap radio button group
Button group
Group of buttons in btn-group
Single toggle button
Using data-toggle="button"
Button group nesting
Example of nested button groups
Button toolbar
Complex btn-group components
Checkbox button group
Bootstrap checkbox button group
Justified button group
Justified buttons in button group
