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 block level buttons—those that span the full width of a parent—by
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
<ButtonGroup toggle> component.
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.
Buttonview source file
import Button from 'react-bootstrap/Button'Copy import code for the Button component
Manually set the visual state of the button to
You can use a custom element type for this component.
Spans the full width of the Button parent
Disables the Button, preventing mouse events,
even if the underlying component is an
Specifies a large or small button.
Defines HTML button type attribute.
One or more button variant combinations
buttons may be one of a variety of visual variants such as:
as well as "outline" versions (prefixed by 'outline-*')
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
ToggleButtonGroupview source file
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'Copy import code for the ToggleButtonGroup component
Callback fired when a button is pressed, depending on whether the
The value, or array of values, of the active (pressed) buttons
ToggleButtonview source file
import ToggleButton from 'react-bootstrap/ToggleButton'Copy import code for the ToggleButton component
The checked state of the input, managed by
The disabled state of both the label and input
A ref attached to the
The HTML input name, used to group like checkboxes or radio buttons together semantically
A callback fired when the underlying input element changes. This is passed
directly to the
The value of the input, should be unique amongst it's siblings when nested in a