Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Use any of the available button style types to quickly create a styled
button. Just modify the
For a lighter touch, Buttons also come in
variants with no background color.
<Button> components will render a HTML
<button> element. However you can render whatever you'd
like, adding a
href prop will automatically render an
<a /> element. You can use the
as prop to
render whatever your heart desires. React Bootstrap will take care of
the proper ARIA roles for you.
Fancy larger or smaller buttons? Add
size="sm" for additional sizes.
Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities.
To set a button's active state simply set the component's
Make buttons look inactive by adding the
disabled prop to.
<a> elements don't naturally support a
disabled attribute. In browsers that support it this is handled with a
point-events: none style but not all browsers support it
React Bootstrap will prevent any
onClick handlers from
firing regardless of the rendered element.
Button loading state
When activating an asynchronous action from a button it is a good UX
pattern to give the user feedback as to the loading state, this can
easily be done by updating your
props from a state change like below.
Checkbox / Radio
Buttons can also be used to style
radio form elements. This is helpful when you want a toggle
button that works neatly inside an HTML form.
The above handles styling, But requires manually controlling the
checked state for each radio or checkbox in the group.
For a nicer experience with checked state management use the
<ToggleButtonGroup> instead of a
The group behaves as a form component, where the
value is an array of the selected
values for a named checkbox group or the single toggled
value in a similarly named radio group.