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.

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

Press esc to disable tab trapping

Outline buttons

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

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

Press esc to disable tab trapping

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.

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

Press esc to disable tab trapping

Sizes

Fancy larger or smaller buttons? Add size="large", size="small" for additional sizes.

<div>
  <ButtonToolbar>
    <Button variant="primary" size="lg">
      Large button
    </Button>
    <Button variant="secondary" size="lg">
      Large button
    </Button>
  </ButtonToolbar>

  <ButtonToolbar>
    <Button variant="primary" size="sm">
      Small button
    </Button>
    <Button variant="secondary" size="sm">
      Small button
    </Button>
  </ButtonToolbar>
</div>;

Press esc to disable tab trapping

Create block level buttons—those that span the full width of a parent—by adding block

<div>
  <Button variant="primary" size="lg" block>
    Block level button
  </Button>
  <Button variant="secondary" size="lg" block>
    Block level button
  </Button>
</div>;

Press esc to disable tab trapping

Active state

To set a buttons active state simply set the components active prop.

<ButtonToolbar>
  <Button variant="primary" size="lg" active>
    Primary button
  </Button>
  <Button variant="secondary" size="lg" active>
    Button
  </Button>
</ButtonToolbar>;

Press esc to disable tab trapping

Disabled state

Make buttons look inactive by adding the disabled prop to.

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

Press esc to disable tab trapping

Watch out! <a> element's 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));
}

class LoadingButton extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleClick = this.handleClick.bind(this);

    this.state = {
      isLoading: false,
    };
  }

  handleClick() {
    this.setState({ isLoading: true }, () => {
      simulateNetworkRequest().then(() => {
        this.setState({ isLoading: false });
      });
    });
  }

  render() {
    const { isLoading } = this.state;

    return (
      <Button
        variant="primary"
        disabled={isLoading}
        onClick={!isLoading ? this.handleClick : null}
      >
        {isLoading ? 'Loading…' : 'Click to load'}
      </Button>
    );
  }
}

render(<LoadingButton />);

Press esc to disable tab trapping

Checkbox / Radio

Button's 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.

Checked

ActiveRadioRadio

<div className="d-flex flex-column">
  <ButtonGroup toggle>
    <ToggleButton type="checkbox" defaultChecked value="1">
      Checked
    </ToggleButton>
  </ButtonGroup>
  <ButtonGroup toggle className="mt-3">
    <ToggleButton type="radio" name="radio" defaultChecked value="1">
      Active
    </ToggleButton>
    <ToggleButton type="radio" name="radio" value="2">
      Radio
    </ToggleButton>
    <ToggleButton type="radio" name="radio" value="3">
      Radio
    </ToggleButton>
  </ButtonGroup>
</div>;

Press esc to disable tab trapping

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

<>
  <ButtonToolbar>
    <ToggleButtonGroup type="checkbox" defaultValue={[1, 3]}>
      <ToggleButton value={1}>Checkbox 1 (pre-checked)</ToggleButton>
      <ToggleButton value={2}>Checkbox 2</ToggleButton>
      <ToggleButton value={3}>Checkbox 3 (pre-checked)</ToggleButton>
    </ToggleButtonGroup>
  </ButtonToolbar>

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

Press esc to disable tab trapping

Controlled

Option 1Option 2Option 3

class ToggleButtonGroupControlled extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: [1, 3],
    };
  }

  handleChange(value, event) {
    this.setState({ value });
  }

  render() {
    return (
      <ToggleButtonGroup
        type="checkbox"
        value={this.state.value}
        onChange={this.handleChange}
      >
        <ToggleButton value={1}>Option 1</ToggleButton>
        <ToggleButton value={2}>Option 2</ToggleButton>
        <ToggleButton value={3}>Option 3</ToggleButton>
      </ToggleButtonGroup>
    );
  }
}

render(<ToggleButtonGroupControlled />);

Press esc to disable tab trapping

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

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
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	any		The value of the input, should be unique amoungst it's siblings when nested in a `ToggleButtonGroup`.