React Button Group - Flowbite

Button groups allow you to stack together multiple buttons in a single line horizontally based on multiple styles and sizes using React and Tailwind CSS

Table of Contents#

Default button group#

Use this example of the <Button.Group> 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.

Edit on GitHub
  • React TypeScript
'use client';

import { Button } from 'flowbite-react';

export default function DefaultButtonGroup() {
  return (
    <Button.Group>
      <Button color="gray">
        Profile
      </Button>
      <Button color="gray">
        Settings
      </Button>
      <Button color="gray">
        Messages
      </Button>
    </Button.Group>
  )
}

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.

Edit on GitHub
  • React TypeScript
'use client';

import { Button } from 'flowbite-react';
import { HiAdjustments, HiCloudDownload, HiUserCircle } from 'react-icons/hi';

export default function WithIcons() {
  return (
    <Button.Group>
      <Button color="gray">
        <HiUserCircle className="mr-3 h-4 w-4" />
        <p>
          Profile
        </p>
      </Button>
      <Button color="gray">
        <HiAdjustments className="mr-3 h-4 w-4" />
        <p>
          Settings
        </p>
      </Button>
      <Button color="gray">
        <HiCloudDownload className="mr-3 h-4 w-4" />
        <p>
          Messages
        </p>
      </Button>
    </Button.Group>
  )
}

Outline button group#

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

Edit on GitHub
  • React TypeScript
'use client';

import { Button } from 'flowbite-react';

export default function Outline() {
  return (
    <>
      <Button.Group outline>
        <Button color="gray">
          Profile
        </Button>
        <Button color="gray">
          Settings
        </Button>
        <Button color="gray">
          Messages
        </Button>
      </Button.Group>
      <Button.Group outline>
        <Button gradientMonochrome="info">
          Profile
        </Button>
        <Button gradientMonochrome="info">
          Settings
        </Button>
        <Button gradientMonochrome="info">
          Messages
        </Button>
      </Button.Group>
      <Button.Group outline>
        <Button gradientDuoTone="cyanToBlue">
          Profile
        </Button>
        <Button gradientDuoTone="cyanToBlue">
          Settings
        </Button>
        <Button gradientDuoTone="cyanToBlue">
          Messages
        </Button>
      </Button.Group>
    </>
  )
}

Color options#

Use the color prop to change the color of the buttons. You can also use the gradientMonochrome and gradientDuoTone props to apply a gradient color to the buttons.

Edit on GitHub
  • React TypeScript
'use client';

import { Button } from 'flowbite-react';

export default function AllColors() {
  return (
    <>
      <Button.Group>
        <Button color="info">
          Profile
        </Button>
        <Button color="info">
          Settings
        </Button>
        <Button color="info">
          Messages
        </Button>
      </Button.Group>
      <Button.Group>
        <Button gradientMonochrome="info">
          Profile
        </Button>
        <Button gradientMonochrome="info">
          Settings
        </Button>
        <Button gradientMonochrome="info">
          Messages
        </Button>
      </Button.Group>
      <Button.Group>
        <Button gradientDuoTone="greenToBlue">
          Profile
        </Button>
        <Button gradientDuoTone="greenToBlue">
          Settings
        </Button>
        <Button gradientDuoTone="greenToBlue">
          Messages
        </Button>
      </Button.Group>
    </>
  )
}

Outline button group with icons#

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

Edit on GitHub
  • React TypeScript
'use client';

import { Button } from 'flowbite-react';
import { HiAdjustments, HiCloudDownload, HiUserCircle } from 'react-icons/hi';

export default function OutlineWithIcons() {
  return (
    <>
      <Button.Group outline>
        <Button color="gray">
          <HiUserCircle className="mr-3 h-4 w-4" />
          <p>
            Profile
          </p>
        </Button>
        <Button color="gray">
          <HiAdjustments className="mr-3 h-4 w-4" />
          <p>
            Settings
          </p>
        </Button>
        <Button color="gray">
          <HiCloudDownload className="mr-3 h-4 w-4" />
          <p>
            Messages
          </p>
        </Button>
      </Button.Group>
      <Button.Group outline>
        <Button gradientMonochrome="info">
          <HiUserCircle className="mr-3 h-4 w-4" />
          <p>
            Profile
          </p>
        </Button>
        <Button gradientMonochrome="info">
          <HiAdjustments className="mr-3 h-4 w-4" />
          <p>
            Settings
          </p>
        </Button>
        <Button gradientMonochrome="info">
          <HiCloudDownload className="mr-3 h-4 w-4" />
          <p>
            Messages
          </p>
        </Button>
      </Button.Group>
      <Button.Group outline>
        <Button gradientDuoTone="cyanToBlue">
          <HiUserCircle className="mr-3 h-4 w-4" />
          <p>
            Profile
          </p>
        </Button>
        <Button gradientDuoTone="cyanToBlue">
          <HiAdjustments className="mr-3 h-4 w-4" />
          <p>
            Settings
          </p>
        </Button>
        <Button gradientDuoTone="cyanToBlue">
          <HiCloudDownload className="mr-3 h-4 w-4" />
          <p>
            Messages
          </p>
        </Button>
      </Button.Group>
    </>
  )
}

Theme#

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

{
  "base": "inline-flex",
  "position": {
    "none": "focus:ring-2",
    "start": "rounded-r-none",
    "middle": "rounded-none border-l-0 pl-0",
    "end": "rounded-l-none border-l-0 pl-0"
  }
}

References#