Get started easily with our IconButton component based on React and styled with Tailwind CSS.
These types of buttons provide a visually intuitive way to interact with an application or website. The use of icons can help save space on the user interface and make it easier for users to recognize and understand the action associated with the button. Think about the trash bin icon for deleting items, a pencil icon for editing content, or a magnifying glass icon for search action.
Below we showcased examples of IconButton component that you can use for your project. For the examples below we used Iconoir icons but you can use any icon library you prefer.
Here's how to implement a simple and responsive IconButton component. It can be used for the action of favoriting or liking content, given its star icon.
"use client";
import { IconButton } from "@material-tailwind/react";
import { BrightStar } from "iconoir-react";
export function IconButtonDemo() {
return (
<IconButton>
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
);
}
"use client";
import { IconButton } from "@material-tailwind/react";
We provides different IconButton variants like ghost, outline, solid, and gradient so you can adapt it easily to your needs. You can simply use the variant prop to change the IconButton variant.
In the example below, we've showcased the different IconButton variants that you can use in your project.
"use client";
import { IconButton } from "@material-tailwind/react";
import { BrightStar } from "iconoir-react";
export function IconButtonVariants() {
return (
<div className="flex gap-4">
<IconButton variant="ghost">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton variant="outline">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton variant="solid">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton variant="gradient">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
</div>
);
}
"use client";
import { IconButton } from "@material-tailwind/react";
We provide different IconButton sizes like sm, md, and lg so you can adapt it easily to your needs. You can simply use the size prop to change the IconButton size.
In the example below, we've showcased the different IconButton sizes that you can use in your project.
"use client";
import { IconButton } from "@material-tailwind/react";
import { BrightStar } from "iconoir-react";
export function IconButtonSizes() {
return (
<div className="flex items-end gap-4">
<IconButton size="xs">
<BrightStar className="h-3.5 w-3.5 stroke-2" />
</IconButton>
<IconButton size="sm">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton size="md">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton size="lg">
<BrightStar className="h-5 w-5 stroke-2" />
</IconButton>
<IconButton size="xl">
<BrightStar className="h-6 w-6 stroke-2" />
</IconButton>
</div>
);
}
"use client";
import { IconButton } from "@material-tailwind/react";
We provide different IconButton colors like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the IconButton color.
In the example below, we've showcased the different IconButton colors that you can use in your project.
"use client";
import { IconButton } from "@material-tailwind/react";
import { BrightStar } from "iconoir-react";
export function IconButtonColors() {
return (
<div className="flex gap-4">
<IconButton color="primary">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton color="secondary">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton color="info">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton color="success">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton color="warning">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton color="error">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
</div>
);
}
"use client";
import { IconButton } from "@material-tailwind/react";
Use the isCircular prop to make the IconButton circular, this can be used to represent a different visual style for the icon button specially inside a container with a more rounded corners.
In the example below, we've showcased the circular IconButton in 4 different variants that you can use in your project.
"use client";
import { IconButton } from "@material-tailwind/react";
import { BrightStar } from "iconoir-react";
export function RoundedIconButton() {
return (
<div className="flex gap-4">
<IconButton isCircular variant="ghost">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton isCircular variant="outline">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton isCircular variant="solid">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton isCircular variant="gradient">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
</div>
);
}
"use client";
import { IconButton } from "@material-tailwind/react";
You can use the IconButton component as a link by using the as prop and passing the a tag to it. This way you can use the IconButton component as a link to navigate to another page or website.
In the example below, we've showcased the IconButton as a link in 4 different variants that you can use in your project.
"use client";
import { IconButton } from "@material-tailwind/react";
import { BrightStar } from "iconoir-react";
export function IconButtonAsLink() {
return (
<div className="flex gap-4">
<IconButton as="a" href="#" variant="ghost">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton as="a" href="#" variant="outline">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton as="a" href="#" variant="solid">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
<IconButton as="a" href="#" variant="gradient">
<BrightStar className="h-4 w-4 stroke-2" />
</IconButton>
</div>
);
}
"use client";
import { IconButton } from "@material-tailwind/react";
