The button group component from Flowbite React can be used to stack multiple button elements and group them visually together. It can often be used to create a navigation menu or a toolbar.

Choose from multiple examples and you can update properties such as the color, size, and appearance using the props from React and utility classes from Tailwind CSS.

To start using the component you need to import it from the Flowbite React library:

import { Button } from "flowbite-react";

Default button group#

Use this example of the <ButtonGroup> component by adding the Button component as a child element and stack them together. You can also use the color prop to change the color of the buttons.

Button group with icons#

Import one of the icons from the react-icons library and add it as a child element to the <Button> component to create multiple buttons with icons grouped together.

Outline button group#

By passing the outline prop to the <ButtonGroup> component you can create a button group with outline buttons with no background and solid borders.

Outline button group with icons#

Here's an example on how you can use both the outline and icon props together.

Color options#

Use the color prop to change the color of the buttons.

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "base": "inline-flex rounded-md shadow-sm"
}

References#