Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Default buttons
Quickly create a general button with several predefined button styles, each serving its own semantic purpose.
Soft buttons
Quickly create a general button with .btn-soft-.
Flush buttons
Quickly create a general button with .btn .btn-flush-.
Flush hover
Quickly create a general button with .btn-flush-* .flush-outline-hove/.flush-soft-hover/.btn-animated.
Animated buttons
use .btn-animated
Outline buttons
For a lighter touch, Buttons also come in outline-* variants with no background color.
Rounded button
Create rounded buttons by simply adding .btn-rounded class.
Square button
use.btn-square
Gradient buttons
Replace the default modifier class with the .btn-gradient-* once to create gradient button.
Floating buttons
Quickly create a raised button with .btn-floating.
Link buttons
Quickly create a link button with the variant="link".
Sizes
Fancy larger or smaller buttons? Add size=xl,lg,sm or xs for additional sizes.
Block buttons
Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities.
Disabled State
Make buttons look inactive by adding the disabled boolean attribute to any <Button> element.
Dropdown & dropup buttons
Any single button can be turned into a dropdown toggle with some markup changes. For dropup button, trigger dropdown menus by adding .dropup to the parent element.
Buttons with Icons
Quickly create a Icon button with .btn .btn-* .btn-wth-icon .icon-leftor.btn .btn-* .btn-wth-icon .icon-right
Buttons with Icons sizes
Quickly create a general button with several predefined button styles, each serving its own semantic purpose.
Icons buttons
Quickly create a icon button with .btn-icon
Custom Buttons with Icons
use .btn .btn-custom .btn-[value]
Social buttons
Social buttons are same as icon buttons with .btn .btn-social.
Badge on buttons
.position-top-end-overflow, .position-top-end-overflow-1.
Button Group Horizontal
Wrap a series of<Button>s in a <ButtonGroup>.
Sizing
Instead of applying button sizing props to every button in a group, just add size prop to the <ButtonGroup>.
Button Group Vertical
Make a set of buttons appear vertically stacked rather than horizontally, by adding vertical to the <ButtonGroup>. Split button dropdowns are not supported here..