Tailwind CSS 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 = {
  button: {
    styles: {
      base: {
        initial: {
          display: "flex",
        },
      },
    },
  },
};