Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Examples
Use any of the available button style types to quickly create a styled button. Just modify the variant prop.
<>
<Button variant="primary">Primary</Button>{' '}
<Button variant="secondary">Secondary</Button>{' '}
<Button variant="success">Success</Button>{' '}
<Button variant="warning">Warning</Button>{' '}
<Button variant="danger">Danger</Button> <Button variant="info">Info</Button>{' '}
<Button variant="light">Light</Button> <Button variant="dark">Dark</Button>{' '}
<Button variant="link">Link</Button>
</>For a lighter touch, Buttons also come in outline-* variants with no background color.
<>
<Button variant="outline-primary">Primary</Button>{' '}
<Button variant="outline-secondary">Secondary</Button>{' '}
<Button variant="outline-success">Success</Button>{' '}
<Button variant="outline-warning">Warning</Button>{' '}
<Button variant="outline-danger">Danger</Button>{' '}
<Button variant="outline-info">Info</Button>{' '}
<Button variant="outline-light">Light</Button>{' '}
<Button variant="outline-dark">Dark</Button>
</>Normally <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.
<>
<Button href="#">Link</Button> <Button type="submit">Button</Button>{' '}
<Button as="input" type="button" value="Input" />{' '}
<Button as="input" type="submit" value="Submit" />{' '}
<Button as="input" type="reset" value="Reset" />
</>Sizes
Fancy larger or smaller buttons? Add size="lg", size="sm" for additional sizes.
<>
<div className="mb-2">
<Button variant="primary" size="lg">
Large button
</Button>{' '}
<Button variant="secondary" size="lg">
Large button
</Button>
</div>
<div>
<Button variant="primary" size="sm">
Small button
</Button>{' '}
<Button variant="secondary" size="sm">
Small button
</Button>
</div>
</>Create block level buttons—those that span the full width of a parent—by adding block
<>
<Button variant="primary" size="lg" block>
Block level button
</Button>
<Button variant="secondary" size="lg" block>
Block level button
</Button>
</>Active state
To set a button's active state simply set the component's active prop.
<>
<Button variant="primary" size="lg" active>
Primary button
</Button>{' '}
<Button variant="secondary" size="lg" active>
Button
</Button>
</>Disabled state
Make buttons look inactive by adding the disabled prop to.
<>
<Button variant="primary" size="lg" disabled>
Primary button
</Button>{' '}
<Button variant="secondary" size="lg" disabled>
Button
</Button>{' '}
<Button href="#" variant="secondary" size="lg" disabled>
Link
</Button>
</>Watch out! <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 yet.
React Bootstrap will prevent any onClick handlers from firing regardless of the rendered element.
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 <Button />s props from a state change like below.
function simulateNetworkRequest() {
return new Promise((resolve) => setTimeout(resolve, 2000));
}
function LoadingButton() {
const [isLoading, setLoading] = useState(false);
useEffect(() => {
if (isLoading) {
simulateNetworkRequest().then(() => {
setLoading(false);
});
}
}, [isLoading]);
const handleClick = () => setLoading(true);
return (
<Button
variant="primary"
disabled={isLoading}
onClick={!isLoading ? handleClick : null}
>
{isLoading ? 'Loading…' : 'Click to load'}
</Button>
);
}
render(<LoadingButton />);Checkbox / Radio
Buttons can also be used to style checkbox and radio form elements. This is helpful when you want a toggle button that works neatly inside an HTML form.
function ToggleButtonExample() {
const [checked, setChecked] = useState(false);
const [radioValue, setRadioValue] = useState('1');
const radios = [
{ name: 'Active', value: '1' },
{ name: 'Radio', value: '2' },
{ name: 'Radio', value: '3' },
];
return (
<>
<ButtonGroup toggle className="mb-2">
<ToggleButton
type="checkbox"
variant="secondary"
checked={checked}
value="1"
onChange={(e) => setChecked(e.currentTarget.checked)}
>
Checked
</ToggleButton>
</ButtonGroup>
<br />
<ButtonGroup toggle>
{radios.map((radio, idx) => (
<ToggleButton
key={idx}
type="radio"
variant="secondary"
name="radio"
value={radio.value}
checked={radioValue === radio.value}
onChange={(e) => setRadioValue(e.currentTarget.value)}
>
{radio.name}
</ToggleButton>
))}
</ButtonGroup>
</>
);
}
render(<ToggleButtonExample />);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.
Uncontrolled
<>
<ToggleButtonGroup type="checkbox" defaultValue={[1, 3]} className="mb-2">
<ToggleButton value={1}>Checkbox 1 (pre-checked)</ToggleButton>
<ToggleButton value={2}>Checkbox 2</ToggleButton>
<ToggleButton value={3}>Checkbox 3 (pre-checked)</ToggleButton>
</ToggleButtonGroup>
<br />
<ToggleButtonGroup type="radio" name="options" defaultValue={1}>
<ToggleButton value={1}>Radio 1 (pre-checked)</ToggleButton>
<ToggleButton value={2}>Radio 2</ToggleButton>
<ToggleButton value={3}>Radio 3</ToggleButton>
</ToggleButtonGroup>
</>Controlled
function ToggleButtonGroupControlled() {
const [value, setValue] = useState([1, 3]);
/*
* The second argument that will be passed to
* `handleChange` from `ToggleButtonGroup`
* is the SyntheticEvent object, but we are
* not using it in this example so we will omit it.
*/
const handleChange = (val) => setValue(val);
return (
<ToggleButtonGroup type="checkbox" value={value} onChange={handleChange}>
<ToggleButton value={1}>Option 1</ToggleButton>
<ToggleButton value={2}>Option 2</ToggleButton>
<ToggleButton value={3}>Option 3</ToggleButton>
</ToggleButtonGroup>
);
}
render(<ToggleButtonGroupControlled />);API
import Button from 'react-bootstrap/Button'Copy import code for the Button component
| Name |
Type |
Default |
Description |
| active |
boolean |
false |
Manually set the visual state of the button to :active |
| as |
elementType |
|
You can use a custom element type for this component. |
| block |
boolean |
|
Spans the full width of the Button parent |
| disabled |
boolean |
false |
Disables the Button, preventing mouse events, even if the underlying component is an <a> element |
| href |
string |
|
Providing a href will render an <a> element, styled as a button. |
| size |
'sm' | 'lg'
|
|
Specifies a large or small button. |
| target |
any |
|
|
| type |
'button' | 'reset' | 'submit' | null
|
'button' |
Defines HTML button type attribute. |
| variant |
string |
'primary' |
One or more button variant combinations buttons may be one of a variety of visual variants such as: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'link'
as well as "outline" versions (prefixed by 'outline-*') 'outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-dark', 'outline-light'
|
| bsPrefix |
string |
'btn' |
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. |
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'Copy import code for the ToggleButtonGroup component
| Name |
Type |
Default |
Description |
| name |
string |
|
An HTML <input> name for each child button. Required if type is set to 'radio'
|
| onChange |
function |
|
controls value
Callback fired when a button is pressed, depending on whether the type is 'radio' or 'checkbox', onChange will be called with the value or array of active values |
| size |
'sm' | 'lg'
|
|
Sets the size for all Buttons in the group. |
| type |
'checkbox' | 'radio'
|
'radio' |
The input type of the rendered buttons, determines the toggle behavior of the buttons |
| value |
any |
|
controlled by: onChange, initial prop: defaultValue
The value, or array of values, of the active (pressed) buttons |
| vertical |
boolean |
false |
Make the set of Buttons appear vertically stacked. |
import ToggleButton from 'react-bootstrap/ToggleButton'Copy import code for the ToggleButton component
| Name |
Type |
Default |
Description |
| checked |
boolean |
|
The checked state of the input, managed by <ToggleButtonGroup> automatically |
| disabled |
boolean |
|
The disabled state of both the label and input |
| inputRef |
ReactRef |
|
A ref attached to the <input> element |
| name |
string |
|
The HTML input name, used to group like checkboxes or radio buttons together semantically |
| onChange |
function |
|
A callback fired when the underlying input element changes. This is passed directly to the <input> so shares the same signature as a native onChange event. |
| type |
'checkbox' | 'radio'
|
|
|
| value required
|
string | arrayOf | number |
|
The value of the input, should be unique amongst it's siblings when nested in a ToggleButtonGroup. |