Tailwind CSS Button Group - React

Use our ButtonGroup based on Tailwind CSS for actions.

ButtonGroup is an essential element of web design. Basically, ButtonGroup is stack of buttons. They help users navigate our websites or apps and drive them to a particular action.

See below our ButtonGroup example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors, so you can adapt it easily to your needs.

import { ButtonGroup, Button } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <ButtonGroup>
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  );
}

Button Group Variants

The ButtonGroup component comes with 4 different variants that you can change it using the variant prop.

import { ButtonGroup, Button } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex flex-col w-max gap-4">
      <ButtonGroup>
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
      <ButtonGroup variant="gradient">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
      <ButtonGroup variant="outlined">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
      <ButtonGroup variant="text">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
    </div>
  );
}

Button Group Sizes

The ButtonGroup component comes with 3 different sizes that you can change it using the size prop.

import { ButtonGroup, Button } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex flex-col w-max gap-4">
      <ButtonGroup size="sm">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
      <ButtonGroup size="md">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
      <ButtonGroup size="lg">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
    </div>
  );
}

Button Group Colors

The ButtonGroup component comes with 19 different colors that you can change it using the color prop.

import { ButtonGroup, Button } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex flex-col w-max gap-4">
      <ButtonGroup color="blue">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
      <ButtonGroup color="red">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
      <ButtonGroup color="green">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
      <ButtonGroup color="amber">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
    </div>
  );
}

Block Level Button Group

A ButtonGroup could be a block level component as well that get's all the available space in a row. You can render a ButtonGroup as a block level element using the fullWidth prop.

import { ButtonGroup, Button } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <ButtonGroup fullWidth={true}>
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  )
}

Button Group Ripple Effect

You can turn on/off the ripple effect for the ButtonGroup component using the ripple prop.

import { ButtonGroup, Button } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex flex-col w-max gap-4">
      <ButtonGroup ripple={true}>
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
      <ButtonGroup ripple={false}>
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
    </div>
  );
}

Props

Learn more about props definition and types of button group component.

Theme

Learn how to customize the theme and styles for button group component.

button

card

Edit this page on Github