In this section, we will explore disabled buttons with Tailwind CSS. We’ll cover styles for disabled buttons, including opacity adjustments and cursor behavior.
How to install & setup Tailwind CSS v3
Example 1
Tailwind CSS Simple Disabled Button with Color.
<button type="button" class="px-8 py-3 text-white bg-blue-300 rounded focus:outline-none" disabled>
Button
</button>
<button type="button" class="px-8 py-3 text-white bg-red-300 rounded focus:outline-none" disabled>
Button
</button>
<button type="button" class="px-8 py-3 text-white bg-pink-300 rounded focus:outline-none" disabled>
Button
</button>
<button type="button" class="px-8 py-3 text-white bg-gray-300 rounded focus:outline-none" disabled>
Button
</button>
Example 2
Tailwind CSS Disabled Button with Opacity Using "disabled:opacity-*” class.
<button type="button" class="px-8 py-3 text-white bg-blue-600 rounded focus:outline-none disabled:opacity-25" disabled>
Button 25
</button>
<button type="button" class="px-8 py-3 text-white bg-blue-600 rounded focus:outline-none disabled:opacity-50" disabled>
Button 50
</button>
<button type="button" class="px-8 py-3 text-white bg-blue-600 rounded focus:outline-none disabled:opacity-75" disabled>
Button 75
</button>
<button type="button" class="px-8 py-3 text-white bg-blue-600 rounded focus:outline-none disabled:opacity-100" disabled>
Button 100
</button>
Example 3
Tailwind CSS Disabled Button with cursor-not-allowed class.
<button type="button"
class="px-8 py-3 text-white bg-blue-600 rounded cursor-not-allowed focus:outline-none disabled:opacity-75" disabled>
cursor not allowed button
</button>
Example 4
Creating Outlined Disabled Buttons with Various Colors and the "cursor-not-allowed" Style Using Tailwind CSS.
<button class="border border-green-400 text-green-400 py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>
Disabled
</button>
<button class="border border-blue-400 text-blue-400 py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>
Disabled
</button>
<button class="border border-red-400 text-red-400 py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>
Disabled
</button>
<button class="border border-pink-400 text-pink-400 py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>
Disabled
</button>
<button class="border border-black text-black py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>
Disabled
</button>
Example 5
Creating a Disabled Button with an Icon Using Heroicons Icons and Tailwind CSS.
<button class="flex items-center bg-gray-300 text-gray-700 py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-5 h-5 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
Download
</button>
<button class="flex items-center bg-blue-300 text-blue-700 py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-5 h-5 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
Email
</button>
<button class="flex items-center bg-green-300 text-green-700 py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-5 h-5 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
</svg>
Cart
</button>
<button class="flex items-center bg-red-300 text-red-700 py-2 px-4 rounded opacity-50 cursor-not-allowed" disabled>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-5 h-5 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</button>
Example 6
Creating an "onclick" Event to Disable a Button After It’s Clicked Using Tailwind CSS and Alpine.js.
<div x-data="{ isDisabled: false }">
<button
:class="{ 'bg-gray-300 text-gray-700 cursor-not-allowed opacity-50': isDisabled, 'bg-blue-500 hover:bg-blue-700 text-white': !isDisabled }"
:disabled="isDisabled" @click="isDisabled = true; setTimeout(() => isDisabled = false, 3000)"
class="py-2 px-4 rounded">
Click Me
</button>
</div>