Buttons
Use Taildash custom button styles for actions in forms, dialogs, and more with multiple sizes, states, and more.
Examples
Taildash button default.
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">Primary</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-green-500 border border-green-500 hover:text-white hover:bg-green-600 hover:ring-0 hover:border-green-600 focus:bg-green-600 focus:border-green-600 focus:outline-none focus:ring-0">Success</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-red-500 border border-red-500 hover:text-white hover:bg-red-600 hover:ring-0 hover:border-red-600 focus:bg-red-600 focus:border-red-600 focus:outline-none focus:ring-0">Danger</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-800 bg-yellow-300 border border-yellow-300 hover:text-gray-900 hover:bg-yellow-400 hover:ring-0 hover:border-yellow-400 focus:bg-yellow-400 focus:border-yellow-400 focus:outline-none focus:ring-0">Warning</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-800 bg-indigo-300 border border-indigo-300 hover:text-gray-900 hover:bg-indigo-500 hover:ring-0 hover:border-indigo-500 focus:bg-indigo-500 focus:border-indigo-500 focus:outline-none focus:ring-0">Info</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-800 bg-gray-100 border border-gray-100 hover:text-gray-900 hover:bg-gray-200 hover:ring-0 hover:border-gray-200 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0">Light</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-gray-900 border border-gray-900 hover:text-white hover:bg-black hover:ring-0 hover:border-black focus:bg-black focus:border-black focus:outline-none focus:ring-0">Dark</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 mr-2 cursor-not-allowed opacity-70" disabled>Primary</button>
Outline buttons
Taildash button with outline style.
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-indigo-500 bg-transparent border border-indigo-500 hover:text-gray-100 hover:bg-indigo-500 hover:ring-0 hover:border-indigo-500 focus:text-gray-100 focus:bg-indigo-500 focus:border-indigo-500 focus:outline-none focus:ring-0">Primary</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-green-500 bg-transparent border border-green-500 hover:text-white hover:bg-green-500 hover:ring-0 hover:border-green-500 focus:text-white focus:bg-green-500 focus:border-green-500 focus:outline-none focus:ring-0">Success</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-red-500 bg-transparent border border-red-500 hover:text-white hover:bg-red-500 hover:ring-0 hover:border-red-500 focus:text-white focus:bg-red-500 focus:border-red-500 focus:outline-none focus:ring-0">Danger</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-yellow-500 bg-transparent border border-yellow-500 hover:text-gray-100 hover:bg-yellow-500 hover:ring-0 hover:border-yellow-500 focus:text-gray-900 focus:bg-yellow-500 focus:border-yellow-500 focus:outline-none focus:ring-0">Warning</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-indigo-300 bg-transparent border border-indigo-300 hover:text-gray-900 hover:bg-indigo-300 hover:ring-0 hover:border-indigo-300 focus:text-gray-900 focus:bg-indigo-300 focus:border-indigo-300 focus:outline-none focus:ring-0">Info</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-transparent border border-gray-100 hover:text-gray-900 hover:bg-gray-200 hover:ring-0 hover:border-gray-200 focus:text-gray-900 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0">Light</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-900 bg-transparent border border-gray-900 hover:text-white hover:bg-black hover:ring-0 hover:border-black focus:text-white focus:bg-black focus:border-black focus:outline-none focus:ring-0">Dark</button>
Gradient button
Taildash button with background gradient style.
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 bg-gradient-to-b from-indigo-400 to-indigo-600 hover:from-indigo-500 hover:to-indigo-600 focus:from-indigo-400 focus:to-indigo-600 hover:text-white hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">Primary</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-green-500 border border-green-500 bg-gradient-to-b from-green-400 to-green-600 hover:from-green-500 hover:to-green-600 focus:from-green-500 focus:to-green-600 hover:text-white hover:bg-green-600 hover:ring-0 hover:border-green-600 focus:bg-green-600 focus:border-green-600 focus:outline-none focus:ring-0">Success</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-red-500 border border-red-500 bg-gradient-to-b from-red-400 to-red-600 hover:from-red-500 hover:to-red-600 focus:from-red-500 focus:to-red-600 hover:text-white hover:bg-red-600 hover:ring-0 hover:border-red-600 focus:bg-red-600 focus:border-red-600 focus:outline-none focus:ring-0">Danger</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-yellow-500 border border-yellow-500 bg-gradient-to-b from-yellow-400 to-yellow-600 hover:from-yellow-500 hover:to-yellow-600 focus:from-yellow-500 focus:to-yellow-600 hover:text-white hover:bg-yellow-600 hover:ring-0 hover:border-yellow-600 focus:bg-yellow-600 focus:border-yellow-600 focus:outline-none focus:ring-0">Warning</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-300 bg-gradient-to-b from-indigo-300 to-indigo-500 hover:from-indigo-300 hover:to-indigo-500 focus:from-indigo-300 focus:to-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-500 focus:bg-indigo-400 focus:border-indigo-400 focus:outline-none focus:ring-0">Info</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-800 bg-gray-100 border border-gray-100 bg-gradient-to-b from-gray-100 to-gray-300 hover:from-gray-300 hover:to-gray-100 focus:from-gray-300 focus:to-gray-100 hover:text-gray-900 hover:bg-gray-200 hover:ring-0 hover:border-gray-200 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0">Light</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-gray-800 border border-gray-800 bg-gradient-to-b from-gray-700 to-gray-900 hover:from-gray-900 hover:to-gray-700 focus:from-gray-900 focus:to-gray-700 hover:text-white hover:bg-gray-900 hover:ring-0 hover:border-gray-900 focus:bg-gray-900 focus:border-gray-900 focus:outline-none focus:ring-0">Dark</button>
Button styles and Icon
Taildash button variant and style.
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block mr-1" width="1.5rem" height="1.5rem" fill="currentColor" viewBox="0 0 512 512"><circle cx="176" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></circle><circle cx="400" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></circle><polyline points="48 80 112 80 160 352 416 352" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></polyline><path d="M160,288H409.44a8,8,0,0,0,7.85-6.43l28.8-144a8,8,0,0,0-7.85-9.57H128" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path></svg> Buy Now
</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-800 bg-gray-200 border border-gray-200 hover:text-gray-900 hover:bg-gray-300 hover:ring-0 hover:border-gray-300 focus:bg-gray-300 focus:border-gray-300 focus:outline-none focus:ring-0">
Play Now <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" class="inline-block ml-1" fill="currentColor" viewBox="0 0 512 512"><path d="M238.23,342.43l89.09-74.13a16,16,0,0,0,0-24.6l-89.09-74.13A16,16,0,0,0,212,181.86V330.14A16,16,0,0,0,238.23,342.43Z"/><path d="M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"/></svg>
</button>
<button class="p-6 inline-block text-center rounded-full mb-3 leading-normal text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" class="inline-block" fill="currentColor" viewBox="0 0 512 512"><path d="M190.06,414,353.18,274.22a24,24,0,0,0,0-36.44L190.06,98c-15.57-13.34-39.62-2.28-39.62,18.22V395.82C150.44,416.32,174.49,427.38,190.06,414Z"/></svg>
</button>
<button class="p-6 inline-block text-center rounded-full mb-3 leading-normal text-gray-800 bg-gray-200 border border-gray-200 hover:text-gray-900 hover:bg-gray-300 hover:ring-0 hover:border-gray-300 focus:bg-gray-300 focus:border-gray-300 focus:outline-none focus:ring-0">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" class="inline-block" fill="currentColor" viewBox="0 0 512 512"><path d="M190.06,414,353.18,274.22a24,24,0,0,0,0-36.44L190.06,98c-15.57-13.34-39.62-2.28-39.62,18.22V395.82C150.44,416.32,174.49,427.38,190.06,414Z"/></svg>
</button>
<!--App store button-->
<a class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-gray-900 border border-gray-900 hover:text-white hover:bg-black hover:ring-0 hover:border-black focus:bg-black focus:border-black focus:outline-none focus:ring-0" href="https://itunes.apple.com">
<span class="flex items-center">
<!--icon-->
<span class="ltr:mr-3 rtl:ml-3">
<!-- <span class="fab fa-apple font-size-2"></span> -->
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 512 512"><path d="M256,32C132.26,32,32,132.26,32,256S132.26,480,256,480,480,379.74,480,256,379.74,32,256,32ZM171,353.89a15.48,15.48,0,0,1-13.46,7.65,14.91,14.91,0,0,1-7.86-2.16,15.48,15.48,0,0,1-5.6-21.21l15.29-25.42a8.73,8.73,0,0,1,7.54-4.3h2.26c11.09,0,18.85,6.67,21.11,13.13Zm129.45-50L200.32,304H133.77a15.46,15.46,0,0,1-15.51-16.15c.32-8.4,7.65-14.76,16-14.76h48.24l57.19-97.35h0l-18.52-31.55C217,137,218.85,127.52,226,123a15.57,15.57,0,0,1,21.87,5.17l9.9,16.91h.11l9.91-16.91A15.58,15.58,0,0,1,289.6,123c7.11,4.52,8.94,14,4.74,21.22l-18.52,31.55-18,30.69-39.09,66.66v.11h57.61c7.22,0,16.27,3.88,19.93,10.12l.32.65c3.23,5.49,5.06,9.26,5.06,14.75A13.82,13.82,0,0,1,300.48,303.92Zm77.75.11H351.09v.11l19.82,33.71a15.8,15.8,0,0,1-5.17,21.53,15.53,15.53,0,0,1-8.08,2.27A15.71,15.71,0,0,1,344.2,354l-29.29-49.86-18.2-31L273.23,233a38.35,38.35,0,0,1-.65-38c4.64-8.19,8.19-10.34,8.19-10.34L333,273h44.91c8.4,0,15.61,6.46,16,14.75A15.65,15.65,0,0,1,378.23,304Z"/></svg>
</span>
<!--text-->
<span class="ltr:text-left rtl:text-right">
<span class="block">Download on the</span>
<strong>App Store</strong>
</span><!--end text-->
</span>
</a>
<!--google play-->
<a class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-800 bg-gray-200 border border-gray-200 hover:text-gray-900 hover:bg-gray-300 hover:ring-0 hover:border-gray-300 focus:bg-gray-300 focus:border-gray-300 focus:outline-none focus:ring-0" href="https://play.google.com">
<span class="flex items-center">
<!--icon-->
<span class="ltr:mr-3 rtl:ml-3">
<!-- <span class="fab fa-google-play font-size-2"></span> -->
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 512 512"><path d="M48,59.49v393a4.33,4.33,0,0,0,7.37,3.07L260,256,55.37,56.42A4.33,4.33,0,0,0,48,59.49Z"/><path d="M345.8,174,89.22,32.64l-.16-.09c-4.42-2.4-8.62,3.58-5,7.06L285.19,231.93Z"/><path d="M84.08,472.39c-3.64,3.48.56,9.46,5,7.06l.16-.09L345.8,338l-60.61-57.95Z"/><path d="M449.38,231l-71.65-39.46L310.36,256l67.37,64.43L449.38,281C468.87,270.23,468.87,241.77,449.38,231Z"/></svg>
</span>
<!--text-->
<span class="ltr:text-left rtl:text-right">
<span class="block">Get it on</span>
<strong>Google Play</strong>
</span><!--end text-->
</span>
</a>
<!--end google play-->
Button size
Taildash button size.
<button class="text-sm py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">Small</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">Normal</button>
<button class="text-2xl py-4 px-8 inline-block text-center mb-3 rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">Large</button>
Button group
Taildash button group.
<!-- button group -->
<div class="inline-flex -space-x-px" role="group">
<button class="rounded-s py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 leading-normal text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">Left</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 leading-normal text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">Middle</button>
<button class="rounded-e py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 leading-normal text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0 ltr:-ml-0.5 rtl:-mr-0.5">Right</button>
</div>
<!-- outline button group -->
<div class="inline-flex -space-x-px" role="group">
<button class="rounded-s py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 leading-normal text-indigo-500 bg-white border border-indigo-500 hover:text-gray-100 hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:text-gray-100 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">Left</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 leading-normal text-indigo-500 bg-white border border-indigo-500 hover:text-gray-100 hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:text-gray-100 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">Middle</button>
<button class="rounded-e py-2 px-4 inline-flex items-center gap-2 justify-center mb-3 leading-normal text-indigo-500 bg-white border border-indigo-500 hover:text-gray-100 hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:text-gray-100 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0 ltr:-ml-0.5 rtl:-mr-0.5">Right</button>
</div>
Button group vertical
Taildash button group vertical style.
<!-- button group vertical -->
<div class="flex flex-col float-left w-32 mr-4" role="group">
<button class="rounded-t py-2 px-4 inline-flex items-center gap-2 justify-center leading-normal text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0 -mb-0.5">Left</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center leading-normal text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">Middle</button>
<button class="rounded-b py-2 px-4 inline-flex items-center gap-2 justify-center leading-normal text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0 -mt-0.5">Right</button>
</div><div class="clear-both"></div>
<!-- outline button group vertical -->
<div class="flex flex-col float-left w-32" role="group">
<button class="rounded-t py-2 px-4 inline-flex items-center gap-2 justify-center leading-normal text-indigo-500 bg-white border border-indigo-500 hover:text-gray-100 hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:text-gray-100 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0 -mb-0.5">Left</button>
<button class="py-2 px-4 inline-flex items-center gap-2 justify-center leading-normal text-indigo-500 bg-white border border-indigo-500 hover:text-gray-100 hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:text-gray-100 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">Middle</button>
<button class="rounded-b py-2 px-4 inline-flex items-center gap-2 justify-center leading-normal text-indigo-500 bg-white border border-indigo-500 hover:text-gray-100 hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:text-gray-100 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0 -mt-0.5">Right</button>
</div><div class="clear-both"></div>