Buttons

Use Bootstrap’s 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.

Result

Loading...

Live Editor

import Button from 'react-bootstrap/Button'; function TypesExample() { return ( <> <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> </> ); } export default TypesExample;

import Button from 'react-bootstrap/Button';

function TypesExample() {
  return (
    <>
      <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>
    </>
  );
}

export default TypesExample;

Outline buttons

For a lighter touch, Buttons also come in outline-* variants with no background color.

Result

Loading...

Live Editor

import Button from 'react-bootstrap/Button'; function OutlineTypesExample() { return ( <> <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> </> ); } export default OutlineTypesExample;

import Button from 'react-bootstrap/Button';

function OutlineTypesExample() {
  return (
    <>
      <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>
    </>
  );
}

export default OutlineTypesExample;

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.

Result

Loading...

Live Editor

import Button from 'react-bootstrap/Button'; function TagTypesExample() { return ( <> <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" /> </> ); } export default TagTypesExample;

import Button from 'react-bootstrap/Button';

function TagTypesExample() {
  return (
    <>
      <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" />
    </>
  );
}

export default TagTypesExample;

Sizes

Fancy larger or smaller buttons? Add size="lg", size="sm" for additional sizes.

Result

Loading...

Live Editor

import Button from 'react-bootstrap/Button'; function SizesExample() { return ( <> <div className="d-flex gap-2 mb-2"> <Button variant="primary" size="lg"> Large button </Button> <Button variant="secondary" size="lg"> Large button </Button> </div> <div className="d-flex gap-2"> <Button variant="primary" size="sm"> Small button </Button> <Button variant="secondary" size="sm"> Small button </Button> </div> </> ); } export default SizesExample;

import Button from 'react-bootstrap/Button';

function SizesExample() {
  return (
    <>
      <div className="d-flex gap-2 mb-2">
        <Button variant="primary" size="lg">
          Large button
        </Button>
        <Button variant="secondary" size="lg">
          Large button
        </Button>
      </div>
      <div className="d-flex gap-2">
        <Button variant="primary" size="sm">
          Small button
        </Button>
        <Button variant="secondary" size="sm">
          Small button
        </Button>
      </div>
    </>
  );
}

export default SizesExample;

Block buttons

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

Result

Loading...

Live Editor

import Button from 'react-bootstrap/Button'; function BlockExample() { return ( <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> ); } export default BlockExample;

import Button from 'react-bootstrap/Button';

function BlockExample() {
  return (
    <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>
  );
}

export default BlockExample;

Active state

To set a button's active state simply set the component's active prop.

Result

Loading...

Live Editor

import Button from 'react-bootstrap/Button'; function ActiveExample() { return ( <> <Button variant="primary" size="lg" active> Primary button </Button> <Button variant="secondary" size="lg" active> Button </Button> </> ); } export default ActiveExample;

import Button from 'react-bootstrap/Button';

function ActiveExample() {
  return (
    <>
      <Button variant="primary" size="lg" active>
        Primary button
      </Button>
      <Button variant="secondary" size="lg" active>
        Button
      </Button>
    </>
  );
}

export default ActiveExample;

Disabled state

Make buttons look inactive by adding the disabled prop to.

Result

Loading...

Live Editor

import Button from 'react-bootstrap/Button'; function DisabledExample() { return ( <> <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> </> ); } export default DisabledExample;

import Button from 'react-bootstrap/Button';

function DisabledExample() {
  return (
    <>
      <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>
    </>
  );
}

export default DisabledExample;

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.

Result

Loading...

Live Editor

import { useEffect, useState } from 'react'; import Button from 'react-bootstrap/Button'; function LoadingButton() { const [isLoading, setLoading] = useState(false); useEffect(() => { function simulateNetworkRequest() { return new Promise(resolve => { setTimeout(resolve, 2000); }); } 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> ); } export default LoadingButton;

import { useEffect, useState } from 'react';
import Button from 'react-bootstrap/Button';

function LoadingButton() {
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    function simulateNetworkRequest() {
      return new Promise(resolve => {
        setTimeout(resolve, 2000);
      });
    }

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

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

Result

Loading...

Live Editor

import { useState } from 'react'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import ToggleButton from 'react-bootstrap/ToggleButton'; 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> </> ); } export default ToggleButtonExample;

import { useState } from 'react';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import ToggleButton from 'react-bootstrap/ToggleButton';

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

export default 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

Result

Loading...

Live Editor

import ToggleButton from 'react-bootstrap/ToggleButton'; import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'; function ToggleButtonGroupUncontrolled() { return ( <> <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> </> ); } export default ToggleButtonGroupUncontrolled;

import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';

function ToggleButtonGroupUncontrolled() {
  return (
    <>
      <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>
    </>
  );
}

export default ToggleButtonGroupUncontrolled;

Controlled

Result

Loading...

Live Editor

import { useState } from 'react'; import ToggleButton from 'react-bootstrap/ToggleButton'; import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'; 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 id="tbg-btn-1" value={1}> Option 1 </ToggleButton> <ToggleButton id="tbg-btn-2" value={2}> Option 2 </ToggleButton> <ToggleButton id="tbg-btn-3" value={3}> Option 3 </ToggleButton> </ToggleButtonGroup> ); } export default ToggleButtonGroupControlled;

import { useState } from 'react';
import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';

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 id="tbg-btn-1" value={1}>
        Option 1
      </ToggleButton>
      <ToggleButton id="tbg-btn-2" value={2}>
        Option 2
      </ToggleButton>
      <ToggleButton id="tbg-btn-3" value={3}>
        Option 3
      </ToggleButton>
    </ToggleButtonGroup>
  );
}

export default ToggleButtonGroupControlled;

API

Button

ToggleButtonGroup

ToggleButton