Tailwind CSS Button Group - React

Use our React Button Group styled with Tailwind CSS to group together a series of buttons in a single layout.

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

See below our Button Group examples that you can use in your Tailwind CSS and React project. These example comes in different styles and colors, so you can adapt them easily to your needs.


Button Group Examples

Default Button Group

This React component example demonstrates a straightforward usage of the Button Group to create a cohesive set of actions.

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

Button Group Variants

This Button Group component comes with 4 different variants that you can change using the variant prop.

import { ButtonGroup, Button } from "@material-tailwind/react";
 
export function ButtonGroupVariants() {
  return (
    <div className="flex w-max flex-col 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

This Tailwind CSS Button Group component comes with 3 different sizes, small (sm), medium (md), and large (lg), that you can change using the size prop.

import { ButtonGroup, Button } from "@material-tailwind/react";
 
export function ButtonGroupSizes() {
  return (
    <div className="flex w-max flex-col 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

This Button Group component comes with 19 different colors (for example: blue, red, green, amber) that you can change using the color prop.

import { ButtonGroup, Button } from "@material-tailwind/react";
 
export function ButtonGroupColors() {
  return (
    <div className="flex w-max flex-col 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

Our React Button Group could be implemented as a block level component, as well, that gets 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 function BlockLevelButtonGroup() {
  return (
    <ButtonGroup fullWidth>
      <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. The ripple effect is used to provide an intuitive and visually pleasing indication of interaction for the user (like a subtle visual cue).

import { ButtonGroup, Button } from "@material-tailwind/react";
 
export function ButtonGroupRippleEffect() {
  return (
    <div className="flex w-max flex-col 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>
  );
}

Button Group Custom Styles

You can use the className prop to add custom styles to the ButtonGroup component. Material Tailwind comes with the ability to blend pre-defined design principles with extensive styling flexibility.

import { ButtonGroup, Button } from "@material-tailwind/react";
 
export function ButtonGroupCustomStyles() {
  return (
    <ButtonGroup className="gap-1 bg-blue-500/25 p-1">
      <Button className="rounded-none">One</Button>
      <Button className="rounded-none">Two</Button>
      <Button className="rounded-none">Three</Button>
    </ButtonGroup>
  );
}

Button Group Props

The following props are available for button group component. These are the custom props that we've added for the button group component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
variantVariantChange buttons variantfilled
sizeSizeChange buttons sizemd
colorColorChange buttons colorgray
fullWidthbooleanChange buttons to a block level elementsfalse
ripplebooleanAdd ripple effect for buttonstrue
classNamestringAdd custom className for button group''
childrennodeAdd content for button groupNo default value it's a required prop.


For TypeScript Only

import type { ButtonGroupProps } from "@material-tailwind/react";

Types - Variant

type variant = "filled" | "outlined" | "gradient" | "text";

Types - Size

Check out Material Tailwind’s set of predefined sizes available for the Button Group component.

type size = "sm" | "md" | "lg";

Types - Color

Set of predefined colors available for our Button Group component. Choose from our extensive 20+ list of colors like: orange, brown, amber, yellow, blue, etc. Customize the component to fit your web project’s needs.

type color =
  | "white"
  | "black"
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

Button Group Theme

Learn how to customize the theme and styles for button group component, the theme object for button group component has three main objects:

A. The defaultProps object for setting up the default value for props of button group component.
B. The valid object for customizing the valid values for button group component props.
C. The styles object for customizing the theme and styles of button group component.

You can customize the theme and styles of button group component by adding Tailwind CSS classes as key paired values for objects.



Button Group Theme Object Type

interface ButtonStyleTypes {
  defaultProps: {
    variant: string;
    size: string;
    color: string;
    fullWidth: boolean;
    ripple: boolean;
    className: string;
  };
  valid: {
    variants: string[];
    sizes: string[];
    colors: string[];
  };
  styles: {
    base: {
      initial: object;
      fullWidth: object;
    };
    dividerColor: object;
  };
}


For TypeScript Only

import type { ButtonGroupStyleTypes } from "@material-tailwind/react";

Button Group Theme Customization

Whether you're looking to modify the color palette, adjust the border styles, or apply custom animations, the theme customization options are both robust and intuitive.

The button group design can be further enhanced using Material Tailwind's utility classes for a more refined look.

const theme = {
  buttonGroup: {
    defaultProps: {
      variant: "filled",
      size: "md",
      color: "blue",
      fullWidth: false,
      ripple: true,
      className: "",
    },
    valid: {
      variants: ["filled", "outlined", "gradient", "text"],
      sizes: ["sm", "md", "lg"],
      colors: [
        "white",
        "blue-gray",
        "gray",
        "brown",
        "deep-orange",
        "orange",
        "amber",
        "yellow",
        "lime",
        "light-green",
        "green",
        "teal",
        "cyan",
        "light-blue",
        "blue",
        "indigo",
        "deep-purple",
        "purple",
        "pink",
        "red",
      ],
    },
    styles: {
      base: {
        initial: {
          display: "flex",
          flexDirection: "row",
        },
        fullWidth: {
          width: "w-full",
        },
      },
      dividerColor: {
        white: {
          divideColor: "divide-blue-gray-50",
        },
        "blue-gray": {
          divideColor: "divide-blue-gray-600",
        },
        gray: {
          divideColor: "divide-gray-600",
        },
        brown: {
          divideColor: "divide-brown-600",
        },
        "deep-orange": {
          divideColor: "divide-deep-orange-600",
        },
        orange: {
          divideColor: "divide-orange-600",
        },
        amber: {
          divideColor: "divide-amber-600",
        },
        yellow: {
          divideColor: "divide-yellow-600",
        },
        lime: {
          divideColor: "divide-lime-600",
        },
        "light-green": {
          divideColor: "divide-light-green-600",
        },
        green: {
          divideColor: "divide-green-600",
        },
        teal: {
          divideColor: "divide-teal-600",
        },
        cyan: {
          divideColor: "divide-cyan-600",
        },
        "light-blue": {
          divideColor: "divide-light-blue-600",
        },
        blue: {
          divideColor: "divide-blue-600",
        },
        indigo: {
          divideColor: "divide-indigo-600",
        },
        "deep-purple": {
          divideColor: "divide-deep-purple-600",
        },
        purple: {
          divideColor: "divide-purple-600",
        },
        pink: {
          divideColor: "divide-pink-600",
        },
        red: {
          divideColor: "divide-red-600",
        },
      },
    },
  },
};