Tailwind CSS 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 colorblue
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";
Edit this page on Github