Tailwind CSS Icon Button - React

Use this example to create user-friendly buttons with icon for your Tailwind CSS and React project.

import { IconButton } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <IconButton>
      <i className="fas fa-heart" />
    </IconButton>
  );
}

Button Variants

The icon button component comes with 4 different variants that you can change it using the variant prop.

import { IconButton } from "@material-tailwind/react";
 
export default function Variants() {
  return (
    <div className="flex gap-4">
      <IconButton>
        <i className="fas fa-heart" />
      </IconButton>
      <IconButton variant="gradient">
        <i className="fas fa-heart" />
      </IconButton>
      <IconButton variant="outlined">
        <i className="fas fa-heart" />
      </IconButton>
      <IconButton variant="text">
        <i className="fas fa-heart" />
      </IconButton>
    </div>
  );
}

Button Sizes

The icon button component comes with 3 different sizes that you can change it using the size prop.

import { IconButton } from "@material-tailwind/react";
 
export default function Sizes() {
  return (
    <div className="flex items-end gap-4">
      <IconButton size="sm">
        <i className="fas fa-heart" />
      </IconButton>
      <IconButton size="md">
        <i className="fas fa-heart" />
      </IconButton>
      <IconButton size="lg">
        <i className="fas fa-heart fa-lg" />
      </IconButton>
    </div>
  );
}

Button Colors

The icon button component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.

import { IconButton } from "@material-tailwind/react";
 
export default function Colors() {
  return (
    <div className="flex gap-4">
      <IconButton color="blue">
        <i className="fas fa-heart" />
      </IconButton>
      <IconButton color="red">
        <i className="fas fa-heart" />
      </IconButton>
      <IconButton color="green">
        <i className="fas fa-heart" />
      </IconButton>
      <IconButton color="amber">
        <i className="fas fa-heart" />
      </IconButton>
    </div>
  );
}

Props

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

Attribute	Type	Description	Default
`variant`	Variant	Change icon button variant	`filled`
`size`	Size	Change icon button size	`md`
`color`	Color	Change icon button color	`blue`
`ripple`	`boolean`	Add ripple effect for icon button	`true`
`className`	`string`	Add custom className for icon button	`''`
`children`	`node`	Add content for icon button	No default value its a required prop.

Types

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

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

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

dialog

input