Reactstrap — Button Groups

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add button groups with Reactstrap.

Button Groups

Button groups is a container for grouping buttons together.

For example, we can write:

import React from "react";
import { Button, ButtonGroup } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <ButtonGroup>
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
    </>
  );
}

We add the ButtonGroup component with a few Button s inside.

They’ll be displayed side by side without any gaps in between them.

Button Toolbar

To group button groups, we can use the ButtonToolbar component.

For instance, we can write:

import React from "react";
import { Button, ButtonGroup, ButtonToolbar } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <ButtonToolbar>
        <ButtonGroup>
          <Button>1</Button>
          <Button>2</Button>
          <Button>3</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button>4</Button>
          <Button>5</Button>
          <Button>6</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button>7</Button>
          <Button>8</Button>
          <Button>9</Button>
        </ButtonGroup>
      </ButtonToolbar>
    </>
  );
}

We put our ButtonGroups inside the ButtonToolbar .

There won’t be any spaces between the button groups.

Sizing

We can change the sizing of the button group.

To do that, we use the size prop.

For example, we can write:

import React from "react";
import { Button, ButtonGroup } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <ButtonGroup size="lg">
        <Button>foo</Button>
        <Button>bar</Button>
        <Button>baz</Button>
      </ButtonGroup>

      <ButtonGroup>
        <Button>foo</Button>
        <Button>bar</Button>
        <Button>baz</Button>
      </ButtonGroup>

      <ButtonGroup size="sm">
        <Button>foo</Button>
        <Button>bar</Button>
        <Button>baz</Button>
      </ButtonGroup>
    </>
  );
}

We set size to lg to make the buttons large.

And we set size to sm to make the buttons small.

Omitting the size prop means we set the size to the default.

Nesting

We can nest ButtonDropdown s in ButtonGroup s.

For example, we can write:

import React from "react";
import {
  Button,
  ButtonGroup,
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <>
      <ButtonGroup>
        <Button>foo</Button>
        <Button>bar</Button>
        <ButtonDropdown isOpen={isOpen} toggle={toggle}>
          <DropdownToggle caret>Dropdown</DropdownToggle>
          <DropdownMenu>
            <DropdownItem>Link</DropdownItem>
            <DropdownItem>Link</DropdownItem>
          </DropdownMenu>
        </ButtonDropdown>
      </ButtonGroup>
    </>
  );
}

We have the ButtonDropdown in our ButtonGroup .

isOpen is the dropdown open state.

toggle lets us toggle the dropdown open state.

Vertical Variation

We can add the vertical prop to make the button group vertical.

For example, we can write:

import React from "react";
import {
  Button,
  ButtonGroup,
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <>
      <ButtonGroup vertical>
        <Button>foo</Button>
        <Button>bar</Button>
        <ButtonDropdown isOpen={isOpen} toggle={toggle}>
          <DropdownToggle caret>Dropdown</DropdownToggle>
          <DropdownMenu>
            <DropdownItem>Link</DropdownItem>
            <DropdownItem>Link</DropdownItem>
          </DropdownMenu>
        </ButtonDropdown>
      </ButtonGroup>
    </>
  );
}

to make the button group vertical.

Conclusion

We can add button groups to group buttons together.

Also, we can add button toolbars to add button groups.