React Button Group - Flowbite

Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line

The button group component from Flowbite React can be used to stack together multiple buttons and links inside a single element.

Default button group

<Button.Group>
  <Button color="gray">
    Profile
  </Button>
  <Button color="gray">
    Settings
  </Button>
  <Button color="gray">
    Messages
  </Button>
</Button.Group>

With icons

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

All colors

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

Outline with icons

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