Buttons

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>
</>

<>
  <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>
</>

Outline buttons

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>
</>

<>
  <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>
</>

Button tags

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.

Link

<>
  <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" />
</>

<>
  <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>
</>

<>
  <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>
</>

Block buttons

Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities.

<div className="d-grid gap-2">
  <Button variant="primary" size="lg">
    Block level button
  </Button>
  <Button variant="secondary" size="lg">
    Block level button
  </Button>
</div>

<div className="d-grid gap-2">
  <Button variant="primary" size="lg">
    Block level button
  </Button>
  <Button variant="secondary" size="lg">
    Block level button
  </Button>
</div>

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>
</>

<>
  <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.

Link

<>
  <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>
</>

<>
  <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.

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 <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 />);

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 className="mb-2">
        <ToggleButton
          id="toggle-check"
          type="checkbox"
          variant="secondary"
          checked={checked}
          value="1"
          onChange={(e) => setChecked(e.currentTarget.checked)}
        >
          Checked
        </ToggleButton>
      </ButtonGroup>
      <br />
      <ButtonGroup className="mb-2">
        {radios.map((radio, idx) => (
          <ToggleButton
            key={idx}
            id={`radio-${idx}`}
            type="radio"
            variant="secondary"
            name="radio"
            value={radio.value}
            checked={radioValue === radio.value}
            onChange={(e) => setRadioValue(e.currentTarget.value)}
          >
            {radio.name}
          </ToggleButton>
        ))}
      </ButtonGroup>
      <br />
      <ToggleButton
        className="mb-2"
        id="toggle-check"
        type="checkbox"
        variant="outline-primary"
        checked={checked}
        value="1"
        onChange={(e) => setChecked(e.currentTarget.checked)}
      >
        Checked
      </ToggleButton>
      <br />
      <ButtonGroup>
        {radios.map((radio, idx) => (
          <ToggleButton
            key={idx}
            id={`radio-${idx}`}
            type="radio"
            variant={idx % 2 ? 'outline-success' : 'outline-danger'}
            name="radio"
            value={radio.value}
            checked={radioValue === radio.value}
            onChange={(e) => setRadioValue(e.currentTarget.value)}
          >
            {radio.name}
          </ToggleButton>
        ))}
      </ButtonGroup>
    </>
  );
}

render(<ToggleButtonExample />);

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 className="mb-2">
        <ToggleButton
          id="toggle-check"
          type="checkbox"
          variant="secondary"
          checked={checked}
          value="1"
          onChange={(e) => setChecked(e.currentTarget.checked)}
        >
          Checked
        </ToggleButton>
      </ButtonGroup>
      <br />
      <ButtonGroup className="mb-2">
        {radios.map((radio, idx) => (
          <ToggleButton
            key={idx}
            id={`radio-${idx}`}
            type="radio"
            variant="secondary"
            name="radio"
            value={radio.value}
            checked={radioValue === radio.value}
            onChange={(e) => setRadioValue(e.currentTarget.value)}
          >
            {radio.name}
          </ToggleButton>
        ))}
      </ButtonGroup>
      <br />
      <ToggleButton
        className="mb-2"
        id="toggle-check"
        type="checkbox"
        variant="outline-primary"
        checked={checked}
        value="1"
        onChange={(e) => setChecked(e.currentTarget.checked)}
      >
        Checked
      </ToggleButton>
      <br />
      <ButtonGroup>
        {radios.map((radio, idx) => (
          <ToggleButton
            key={idx}
            id={`radio-${idx}`}
            type="radio"
            variant={idx % 2 ? 'outline-success' : 'outline-danger'}
            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> 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 id="tbg-check-1" value={1}>
      Checkbox 1 (pre-checked)
    </ToggleButton>
    <ToggleButton id="tbg-check-2" value={2}>
      Checkbox 2
    </ToggleButton>
    <ToggleButton id="tbg-check-3" value={3}>
      Checkbox 3 (pre-checked)
    </ToggleButton>
  </ToggleButtonGroup>
  <br />
  <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
    <ToggleButton id="tbg-radio-1" value={1}>
      Radio 1 (pre-checked)
    </ToggleButton>
    <ToggleButton id="tbg-radio-2" value={2}>
      Radio 2
    </ToggleButton>
    <ToggleButton id="tbg-radio-3" value={3}>
      Radio 3
    </ToggleButton>
  </ToggleButtonGroup>
</>

<>
  <ToggleButtonGroup type="checkbox" defaultValue={[1, 3]} className="mb-2">
    <ToggleButton id="tbg-check-1" value={1}>
      Checkbox 1 (pre-checked)
    </ToggleButton>
    <ToggleButton id="tbg-check-2" value={2}>
      Checkbox 2
    </ToggleButton>
    <ToggleButton id="tbg-check-3" value={3}>
      Checkbox 3 (pre-checked)
    </ToggleButton>
  </ToggleButtonGroup>
  <br />
  <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
    <ToggleButton id="tbg-radio-1" value={1}>
      Radio 1 (pre-checked)
    </ToggleButton>
    <ToggleButton id="tbg-radio-2" value={2}>
      Radio 2
    </ToggleButton>
    <ToggleButton id="tbg-radio-3" value={3}>
      Radio 3
    </ToggleButton>
  </ToggleButtonGroup>
</>

Controlled

Option 1Option 2Option 3

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 />);

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

Buttonview source file

import Button from 'react-bootstrap/Button'

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.
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.
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.

ToggleButtonGroupview source file

import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'

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.

ToggleButtonview source file

import ToggleButton from 'react-bootstrap/ToggleButton'

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
id required	string		`id` is required for button clicks to toggle 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'`		The `<input>` element `type`
value required	string \| arrayOf \| number		The value of the input, should be unique amongst it's siblings when nested in a `ToggleButtonGroup`.
bsPrefix	string	`'btn-check'`	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.

Buttons

Examples#

Outline buttons#

Button tags#

Sizes#

Block buttons#

Active state#

Disabled state#

Button loading state#

Checkbox / Radio#

Uncontrolled#

Controlled#

API#

Button#view source file

ToggleButtonGroup#view source file

ToggleButton#view source file