Buttons
Ready to use Tailwind CSS button components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Buttons are everywhere in a UI and the details really do matter, size, color, rounding, whether they have an icon, whether they look right when disabled. We have a solid set here covering the main styles you'll actually need: solid fills, outlines, soft/light backgrounds, icon-only, icon-plus-label, loading states, and a few with dropdown arrows. They come in different sizes too. All Tailwind CSS, no dependencies, just copy what you need.
Tailwind
<!-- button-xl -->
<button type="button" class="rounded-md bg-pink-500 px-4 py-3 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
<!-- button-lg -->
<button type="button" class="rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
<!-- button-base -->
<button type="button" class="rounded-md bg-pink-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
<!-- button-sm -->
<button type="button" class="rounded-md bg-pink-500 px-2.5 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
<!-- button-xs -->
<button type="button" class="rounded-md bg-pink-500 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button><!-- button-xl -->
<button type="button" class="rounded-md bg-white px-4 py-3 text-base font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button>
<!-- button-lg -->
<button type="button" class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button>
<!-- button-base -->
<button type="button" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button>
<!-- button-sm -->
<button type="button" class="rounded-md bg-white px-2.5 py-1.5 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button>
<!-- button-xs -->
<button type="button" class="rounded-md bg-white px-2 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button><!-- button-xl -->
<button type="button" class="rounded-md bg-pink-50 px-4 py-3 text-base font-semibold text-pink-500 shadow-sm hover:bg-pink-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button>
<!-- button-lg -->
<button type="button" class="rounded-md bg-pink-50 px-3.5 py-2.5 text-sm font-semibold text-pink-500 shadow-sm hover:bg-pink-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button>
<!-- button-base -->
<button type="button" class="rounded-md bg-pink-50 px-3 py-2 text-sm font-semibold text-pink-500 shadow-sm hover:bg-pink-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button>
<!-- button-sm -->
<button type="button" class="rounded-md bg-pink-50 px-2.5 py-1.5 text-xs font-semibold text-pink-500 shadow-sm hover:bg-pink-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button>
<!-- button-xs -->
<button type="button" class="rounded-md bg-pink-50 px-2 py-1 text-xs font-semibold text-pink-500 shadow-sm hover:bg-pink-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button><!-- button-xl -->
<button type="button" class="cursor-not-allowed rounded-md bg-gray-100 px-4 py-3 text-base font-semibold text-gray-400 shadow-sm ring-1 ring-inset ring-gray-200" disabled>Button text</button>
<!-- button-lg -->
<button type="button" class="cursor-not-allowed rounded-md bg-gray-100 px-3.5 py-2.5 text-sm font-semibold text-gray-400 shadow-sm ring-1 ring-inset ring-gray-200" disabled>Button text</button>
<!-- button-base -->
<button type="button" class="cursor-not-allowed rounded-md bg-gray-100 px-3 py-2 text-sm font-semibold text-gray-400 shadow-sm ring-1 ring-inset ring-gray-200" disabled>Button text</button>
<!-- button-sm -->
<button type="button" class="cursor-not-allowed rounded-md bg-gray-100 px-2.5 py-1.5 text-xs font-semibold text-gray-400 shadow-sm ring-1 ring-inset ring-gray-200" disabled>Button text</button>
<!-- button-xs -->
<button type="button" class="cursor-not-allowed rounded-md bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-400 shadow-sm ring-1 ring-inset ring-gray-200" disabled>Button text</button><!-- button-xl -->
<button type="button" class="rounded-md bg-gray-900 px-4 py-3 text-base font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-white">Button text</button>
<!-- button-lg -->
<button type="button" class="rounded-md bg-gray-900 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-white">Button text</button>
<!-- button-base -->
<button type="button" class="rounded-md bg-gray-900 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-white">Button text</button>
<!-- button-sm -->
<button type="button" class="rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-white">Button text</button>
<!-- button-xs -->
<button type="button" class="rounded-md bg-gray-900 px-2 py-1 text-xs font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-white">Button text</button><!-- button-xl -->
<button type="button" class="flex items-center gap-x-2.5 rounded-md bg-pink-500 px-4 py-3 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<svg class="h-5 w-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm5.676,8.237-6,5.5a1,1,0,0,1-1.383-.03l-3-3a1,1,0,1,1,1.414-1.414l2.323,2.323,5.294-4.853a1,1,0,1,1,1.352,1.474Z" />
</svg>
Button text
</button>
<!-- button-lg -->
<button type="button" class="flex items-center gap-x-2 rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<svg class="h-5 w-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm5.676,8.237-6,5.5a1,1,0,0,1-1.383-.03l-3-3a1,1,0,1,1,1.414-1.414l2.323,2.323,5.294-4.853a1,1,0,1,1,1.352,1.474Z" />
</svg>
Button text
</button>
<!-- button-base -->
<button type="button" class="flex items-center gap-x-2 rounded-md bg-pink-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<svg class="h-5 w-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm5.676,8.237-6,5.5a1,1,0,0,1-1.383-.03l-3-3a1,1,0,1,1,1.414-1.414l2.323,2.323,5.294-4.853a1,1,0,1,1,1.352,1.474Z" />
</svg>
Button text
</button><!-- button-xl -->
<button type="button" class="flex items-center gap-x-2.5 rounded-md bg-pink-500 px-4 py-3 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
Button text
<svg class="h-5 w-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm5.676,8.237-6,5.5a1,1,0,0,1-1.383-.03l-3-3a1,1,0,1,1,1.414-1.414l2.323,2.323,5.294-4.853a1,1,0,1,1,1.352,1.474Z" />
</svg>
</button>
<!-- button-lg -->
<button type="button" class="flex items-center gap-x-2 rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
Button text
<svg class="h-5 w-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm5.676,8.237-6,5.5a1,1,0,0,1-1.383-.03l-3-3a1,1,0,1,1,1.414-1.414l2.323,2.323,5.294-4.853a1,1,0,1,1,1.352,1.474Z" />
</svg>
</button>
<!-- button-base -->
<button type="button" class="flex items-center gap-x-2 rounded-md bg-pink-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
Button text
<svg class="h-5 w-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm5.676,8.237-6,5.5a1,1,0,0,1-1.383-.03l-3-3a1,1,0,1,1,1.414-1.414l2.323,2.323,5.294-4.853a1,1,0,1,1,1.352,1.474Z" />
</svg>
</button><!-- button-xl -->
<button type="button" class="rounded-full bg-pink-500 px-4 py-3 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
<!-- button-lg -->
<button type="button" class="rounded-full bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
<!-- button-base -->
<button type="button" class="rounded-full bg-pink-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
<!-- button-sm -->
<button type="button" class="rounded-full bg-pink-500 px-2.5 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
<!-- button-xs -->
<button type="button" class="rounded-full bg-pink-500 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button><!-- button-xl -->
<button type="button" class="rounded-full bg-white px-4 py-3 text-base font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button>
<!-- button-lg -->
<button type="button" class="rounded-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button>
<!-- button-base -->
<button type="button" class="rounded-full bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button>
<!-- button-sm -->
<button type="button" class="rounded-full bg-white px-2.5 py-1.5 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button>
<!-- button-xs -->
<button type="button" class="rounded-full bg-white px-2 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Button text</button><!-- button-xl -->
<button type="button" class="rounded-md bg-pink-500 p-3 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<span class="sr-only">Button text</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M512.481 421.906L850.682 84.621c25.023-24.964 65.545-24.917 90.51.105s24.917 65.545-.105 90.51L603.03 512.377 940.94 850c25.003 24.984 25.017 65.507.033 90.51s-65.507 25.017-90.51.033L512.397 602.764 174.215 940.03c-25.023 24.964-65.545 24.917-90.51-.105s-24.917-65.545.105-90.51l338.038-337.122L84.14 174.872c-25.003-24.984-25.017-65.507-.033-90.51s65.507-25.017 90.51-.033L512.48 421.906z" />
</svg>
</button>
<!-- button-lg -->
<button type="button" class="rounded-md bg-pink-500 p-2.5 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<span class="sr-only">Button text</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M512.481 421.906L850.682 84.621c25.023-24.964 65.545-24.917 90.51.105s24.917 65.545-.105 90.51L603.03 512.377 940.94 850c25.003 24.984 25.017 65.507.033 90.51s-65.507 25.017-90.51.033L512.397 602.764 174.215 940.03c-25.023 24.964-65.545 24.917-90.51-.105s-24.917-65.545.105-90.51l338.038-337.122L84.14 174.872c-25.003-24.984-25.017-65.507-.033-90.51s65.507-25.017 90.51-.033L512.48 421.906z" />
</svg>
</button>
<!-- button-base -->
<button type="button" class="rounded-md bg-pink-500 p-2 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<span class="sr-only">Button text</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M512.481 421.906L850.682 84.621c25.023-24.964 65.545-24.917 90.51.105s24.917 65.545-.105 90.51L603.03 512.377 940.94 850c25.003 24.984 25.017 65.507.033 90.51s-65.507 25.017-90.51.033L512.397 602.764 174.215 940.03c-25.023 24.964-65.545 24.917-90.51-.105s-24.917-65.545.105-90.51l338.038-337.122L84.14 174.872c-25.003-24.984-25.017-65.507-.033-90.51s65.507-25.017 90.51-.033L512.48 421.906z" />
</svg>
</button>
<!-- button-sm -->
<button type="button" class="rounded-md bg-pink-500 p-1.5 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<span class="sr-only">Button text</span>
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M512.481 421.906L850.682 84.621c25.023-24.964 65.545-24.917 90.51.105s24.917 65.545-.105 90.51L603.03 512.377 940.94 850c25.003 24.984 25.017 65.507.033 90.51s-65.507 25.017-90.51.033L512.397 602.764 174.215 940.03c-25.023 24.964-65.545 24.917-90.51-.105s-24.917-65.545.105-90.51l338.038-337.122L84.14 174.872c-25.003-24.984-25.017-65.507-.033-90.51s65.507-25.017 90.51-.033L512.48 421.906z" />
</svg>
</button>
<!-- button-xs -->
<button type="button" class="rounded-md bg-pink-500 p-1 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<span class="sr-only">Button text</span>
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M512.481 421.906L850.682 84.621c25.023-24.964 65.545-24.917 90.51.105s24.917 65.545-.105 90.51L603.03 512.377 940.94 850c25.003 24.984 25.017 65.507.033 90.51s-65.507 25.017-90.51.033L512.397 602.764 174.215 940.03c-25.023 24.964-65.545 24.917-90.51-.105s-24.917-65.545.105-90.51l338.038-337.122L84.14 174.872c-25.003-24.984-25.017-65.507-.033-90.51s65.507-25.017 90.51-.033L512.48 421.906z" />
</svg>
</button><!-- button-xl -->
<button type="button" class="rounded-full bg-pink-500 p-3 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<span class="sr-only">Button text</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M576.477 448.471l349.649.621c35.346.041 63.967 28.728 63.926 64.074s-28.728 63.967-64.074 63.926l-349.429-.621.194 349.647c.013 35.346-28.63 64.01-63.977 64.023s-64.01-28.63-64.023-63.977l-.195-349.921-349.622-.621C63.58 575.581 34.959 546.894 35 511.548s28.728-63.967 64.074-63.926l349.402.621-.194-349.361c-.013-35.346 28.63-64.01 63.977-64.023s64.01 28.63 64.023 63.977l.194 349.635z" />
</svg>
</button>
<!-- button-lg -->
<button type="button" class="rounded-full bg-pink-500 p-2.5 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<span class="sr-only">Button text</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M576.477 448.471l349.649.621c35.346.041 63.967 28.728 63.926 64.074s-28.728 63.967-64.074 63.926l-349.429-.621.194 349.647c.013 35.346-28.63 64.01-63.977 64.023s-64.01-28.63-64.023-63.977l-.195-349.921-349.622-.621C63.58 575.581 34.959 546.894 35 511.548s28.728-63.967 64.074-63.926l349.402.621-.194-349.361c-.013-35.346 28.63-64.01 63.977-64.023s64.01 28.63 64.023 63.977l.194 349.635z" />
</svg>
</button>
<!-- button-base -->
<button type="button" class="rounded-full bg-pink-500 p-2 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<span class="sr-only">Button text</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M576.477 448.471l349.649.621c35.346.041 63.967 28.728 63.926 64.074s-28.728 63.967-64.074 63.926l-349.429-.621.194 349.647c.013 35.346-28.63 64.01-63.977 64.023s-64.01-28.63-64.023-63.977l-.195-349.921-349.622-.621C63.58 575.581 34.959 546.894 35 511.548s28.728-63.967 64.074-63.926l349.402.621-.194-349.361c-.013-35.346 28.63-64.01 63.977-64.023s64.01 28.63 64.023 63.977l.194 349.635z" />
</svg>
</button>
<!-- button-sm -->
<button type="button" class="rounded-full bg-pink-500 p-1.5 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<span class="sr-only">Button text</span>
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M576.477 448.471l349.649.621c35.346.041 63.967 28.728 63.926 64.074s-28.728 63.967-64.074 63.926l-349.429-.621.194 349.647c.013 35.346-28.63 64.01-63.977 64.023s-64.01-28.63-64.023-63.977l-.195-349.921-349.622-.621C63.58 575.581 34.959 546.894 35 511.548s28.728-63.967 64.074-63.926l349.402.621-.194-349.361c-.013-35.346 28.63-64.01 63.977-64.023s64.01 28.63 64.023 63.977l.194 349.635z" />
</svg>
</button>
<!-- button-xs -->
<button type="button" class="rounded-full bg-pink-500 p-1 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<span class="sr-only">Button text</span>
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M576.477 448.471l349.649.621c35.346.041 63.967 28.728 63.926 64.074s-28.728 63.967-64.074 63.926l-349.429-.621.194 349.647c.013 35.346-28.63 64.01-63.977 64.023s-64.01-28.63-64.023-63.977l-.195-349.921-349.622-.621C63.58 575.581 34.959 546.894 35 511.548s28.728-63.967 64.074-63.926l349.402.621-.194-349.361c-.013-35.346 28.63-64.01 63.977-64.023s64.01 28.63 64.023 63.977l.194 349.635z" />
</svg>
</button><!-- button-xl -->
<button type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700 hover:bg-gray-50 hover:text-gray-900">
<span class="sr-only">Open menu</span>
<svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<!-- button-lg -->
<button type="button" class="-m-2 flex items-center justify-center rounded-lg p-2 text-gray-700 hover:bg-gray-50 hover:text-gray-900">
<span class="sr-only">Open menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<!-- button-base -->
<button type="button" class="-m-1.5 flex items-center justify-center rounded-lg p-1.5 text-gray-700 hover:bg-gray-50 hover:text-gray-900">
<span class="sr-only">Open menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<!-- button-sm -->
<button type="button" class="-m-1 flex items-center justify-center rounded-lg p-1 text-gray-700 hover:bg-gray-50 hover:text-gray-900">
<span class="sr-only">Open menu</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<!-- button-xs -->
<button type="button" class="-m-1 flex items-center justify-center rounded-lg p-1 text-gray-700 hover:bg-gray-50 hover:text-gray-900">
<span class="sr-only">Open menu</span>
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>Frequently asked questions
-
Solid fill, outline/ghost, soft background, icon-only, icon-with-label, loading spinner state, and a few with a dropdown caret. Multiple sizes across most styles.
-
Yes. Just swap the button element for an anchor tag and keep the same classes. Tailwind classes work the same on any element.
-
Most buttons use color utility classes like bg-indigo-600 or bg-pink-500. Just swap those for whatever color from the Tailwind palette you want, or define your own.
-
Yes. The code includes focus-visible and hover classes so they're keyboard accessible and feel interactive.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.