Use this example to create icon buttons with icon for your Tailwind CSS project.
<button
class="middle none center rounded-lg bg-pink-500 p-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-light="true"
>
<i class="material-icons">dashboard</i>
</button>See our icon button examples below. They come in different styles and color.
<div class="flex">
<button
class="middle none center mr-4 flex items-center justify-center rounded-lg bg-pink-500 p-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-light="true"
>
<i class="fas fa-heart text-lg leading-none"></i>
</button>
<button
class="middle none center mr-4 flex items-center justify-center rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 p-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-light="true"
>
<i class="fas fa-heart text-lg leading-none"></i>
</button>
<button
class="middle none center mr-3 flex items-center justify-center rounded-lg border border-pink-500 p-3 font-sans text-xs font-bold uppercase text-pink-500 transition-all hover:opacity-75 focus:ring focus:ring-pink-200 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-dark="true"
>
<i class="fas fa-heart text-lg leading-none"></i>
</button>
<button
class="middle none center flex items-center justify-center rounded-lg p-3 font-sans text-xs font-bold uppercase text-pink-500 transition-all hover:bg-pink-500/10 active:bg-pink-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-dark="true"
>
<i class="fas fa-heart text-lg leading-none"></i>
</button>
</div>Use this example to create icon buttons in different sizes.
<div class="flex items-end">
<button
class="middle none center mr-4 h-8 max-h-[32px] w-8 max-w-[32px] rounded-lg bg-pink-500 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-light="true"
>
<i class="fas fa-heart text-xs leading-none"></i>
</button>
<button
class="middle none center mr-4 h-10 max-h-[40px] w-10 max-w-[40px] rounded-lg bg-pink-500 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-light="true"
>
<i class="fas fa-heart text-lg leading-none"></i>
</button>
<button
class="middle none center h-12 max-h-[48px] w-12 max-w-[48px] rounded-lg bg-pink-500 font-sans text-sm font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-light="true"
>
<i class="fas fa-heart text-2xl leading-none"></i>
</button>
</div>Use this example to create a simple icon button element for your Tailwind CSS project.
<div class="flex gap-4">
<button
class="middle none relative h-10 max-h-[40px] w-10 max-w-[40px] rounded-lg bg-pink-500 text-center font-sans text-xs font-medium uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
data-ripple-light="true"
>
<span class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 transform">
<i class="fas fa-heart text-lg leading-none" aria-hidden="true"></i>
</span>
</button>
<button
class="middle none relative h-10 max-h-[40px] w-10 max-w-[40px] rounded-lg bg-red-500 text-center font-sans text-xs font-medium uppercase text-white shadow-md shadow-red-500/20 transition-all hover:shadow-lg hover:shadow-red-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
data-ripple-light="true"
>
<span class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 transform">
<i class="fas fa-heart text-lg leading-none" aria-hidden="true"></i>
</span>
</button>
<button
class="middle none relative h-10 max-h-[40px] w-10 max-w-[40px] rounded-lg bg-green-500 text-center font-sans text-xs font-medium uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
data-ripple-light="true"
>
<span class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 transform">
<i class="fas fa-heart text-lg leading-none" aria-hidden="true"></i>
</span>
</button>
<button
class="middle none relative h-10 max-h-[40px] w-10 max-w-[40px] rounded-lg bg-amber-500 text-center font-sans text-xs font-medium uppercase text-black shadow-md shadow-amber-500/20 transition-all hover:shadow-lg hover:shadow-amber-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
data-ripple-light="true"
>
<span class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 transform">
<i class="fas fa-heart text-lg leading-none" aria-hidden="true"></i>
</span>
</button>
</div>You can turn on/off the ripple effect for the icon button component by changing data-ripple-light or data-ripple-dark data attributes to true/false.
<div class="flex w-max gap-4">
<button
class="middle none relative h-10 max-h-[40px] w-10 max-w-[40px] rounded-lg bg-pink-500 text-center font-sans text-xs font-medium uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
data-ripple-light="true"
>
<span class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 transform">
<i class="fas fa-heart text-lg leading-none" aria-hidden="true"></i>
</span>
</button>
<button
class="middle none relative h-10 max-h-[40px] w-10 max-w-[40px] rounded-lg bg-pink-500 text-center font-sans text-xs font-medium uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
data-ripple-light="true"
>
<span class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 transform">
<i class="fas fa-heart text-lg leading-none" aria-hidden="true"></i>
</span>
</button>
</div>The icon button component needs a required script file for ripple effect to work, you just need to add the below script file to the bottom of your html file.
<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html@latest/scripts/ripple.js"></script>
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>