Tailwind CSS Icon Button - React

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

Icon Button Variants

The IconButton 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>
  );
}

Icon Button Sizes

The IconButton 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>
  );
}

Icon Button Colors

The IconButton component comes with 19 different colors that you can change it using the color prop.

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>
  );
}

Icon Button Ripple Effect

You can turn on/off the ripple effect for the IconButton component using the ripple prop.

import { IconButton } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex w-max gap-4">
      <IconButton ripple={true}>
        <i className="fas fa-heart" />
      </IconButton>
      <IconButton ripple={false}>
        <i className="fas fa-heart" />
      </IconButton>
    </div>
  );
}

Font Awesome CDN Link

In case of using icon fonts rather than svg icons please add their cdn links to your project, if you're using font awesome you can use the below cdn link.

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
  integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

Props

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

Theme

Learn how to customize the theme and styles for icon button component.

dialog

input

Edit this page on Github