Tailwind CSS Icon Button - Theme

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

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

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

Icon Button Theme Object Type

interface IconButtonStyleTypes {
  defaultProps: {
    variant: string;
    size: string;
    color: string;
    ripple: boolean;
    className: string;
  };
  valid: {
    variants: string[];
    sizes: string[];
    colors: string[];
  };
  styles: {
    base: object;
    sizes: {
      sm: object;
      md: object;
      lg: object;
    };
    variants: {
      filled: object;
      gradient: object;
      outlined: object;
      text: object;
    };
  };
}

For TypeScript Only

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

Ico Button Theme Customization

const theme = {
  iconButton: {
    styles: {
      sizes: {
        sm: {
          fontSize: "text-xs",
        },
        md: {
          fontSize: "text-xs",
        },
        lg: {
          fontSize: "text-sm",
        },
      },
    },
  },
};

Examples

Checkout different examples for icon button component.

Props

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