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 function ButtonGroupDefault() {
  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 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

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

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

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

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.

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

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

Types - Color

type color =
  | "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";

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

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",
        },
      },
    },
  },
};