Tailwind CSS Button Component: Free Examples & Code 2026
Buttons are the most frequently used interactive elements on the web. A well-designed Tailwind CSS button component communicates its priority, state, and function at a glance. In this guide, we cover every button type, the key Tailwind classes for button design, and provide free copy-paste code for HTML and JSX.
7 Types of Tailwind CSS Button Components
Primary Button
Best for: Main page actionsHigh-contrast button, typically using your brand color. Used for the most important action on a page like 'Get Started' or 'Buy Now'.
bg-cyan-700 text-white hover:bg-cyan-800Secondary / Outline Button
Best for: Alternative actionsLess prominent than primary buttons. Often uses a border and transparent background. Used for secondary actions like 'Learn More' or 'Cancel'.
border border-cyan-700 text-cyan-700 hover:bg-cyan-50Ghost / Plain Button
Best for: Low-priority actionsNo background or border by default; background appears on hover. Used for navigation items or tertiary actions in a dense UI.
text-gray-600 hover:bg-gray-100 hover:text-gray-900Icon Button
Best for: Toolbars, compact UIsContains only an icon or an icon alongside text. Requires careful aria-labeling for accessibility if it is icon-only.
p-2 rounded-full hover:bg-gray-100Loading / Spinner Button
Best for: Form submissionsIndicates a background process is running. Typically disables the button and replaces text/icon with a spinner.
cursor-not-allowed opacity-70Gradient Button
Best for: SaaS landing pagesUses a linear or radial gradient for a modern, high-energy look. Very popular for primary CTAs in tech and Web3 designs.
bg-gradient-to-r from-cyan-600 to-blue-700 text-whiteFloating Action Button (FAB)
Best for: Mobile apps, help triggersA circular button positioned absolutely, typically in the bottom-right. Used for quick-access actions like 'Create' or 'Support'.
fixed bottom-8 right-8 shadow-xlEssential Tailwind CSS Classes for Buttons
Use these utility classes to build consistent, professional buttons:
px-4 py-2Standard padding (16px horizontal, 8px vertical)rounded-lgStandard 8px corner radiusrounded-fullPill-style or circular buttonfont-mediumStandard button text weighttransition-allEnables smooth hover effectsduration-200Sets transition time to 200mshover:scale-105Subtle scale-up effect on hoveractive:scale-95Pressed/click effect (scales down)focus:ring-2Keyboard accessibility focus ringdisabled:opacity-50Standard disabled state visualAnatomy of a Professional Tailwind CSS Button
Base Container
inline-flex items-center justify-center px-5 py-2.5Ensures the button is exactly as wide as its content + padding. items-center centers icons vertically.
Typography
text-sm font-medium leading-6Standard sizing for buttons. medium weight makes the text stand out from body copy.
Shape
rounded-lg or rounded-fullDefines the button's personality. rounded-lg is modern corporate; rounded-full is soft and friendly.
Interactivity
transition-colors duration-200 ease-in-outCrucial for smooth hover states. Prevents jarring color changes.
Accessibility
focus:outline-none focus:ring-2 focus:ring-offset-2Provides a visible indicator for keyboard users navigating your site.
Handling Hover, Active, and Disabled States
A button should change its appearance based on user interaction. Tailwind makes this easy with state modifiers:
Hover & Focus
hover:bg-cyan-800 focus:ring-cyan-500The primary way to show a button is interactive. Always ensure hover colors have sufficient contrast.
Active (Click/Press)
active:scale-95 active:bg-cyan-900Provides immediate haptic-like visual feedback that the click was registered by the browser.
Button Accessibility Checklist
- ✓Use the <button> tag for actions and <a> tag for navigation. Avoid using <div> as a button.
- ✓Icon-only buttons must have an aria-label attribute describing the action (e.g., aria-label='Close modal').
- ✓Maintain a minimum touch target size of 44x44px for mobile users.
- ✓Ensure the contrast ratio between button text and background is at least 4.5:1.
- ✓Never remove the focus ring without providing a custom visible focus style.
- ✓Disabled buttons should have aria-disabled='true' and be visually muted.
Frequently Asked Questions
How do I make a Tailwind CSS button full width?
Add the w-full class to the button element. This is useful for mobile layouts or sidebar actions where the button should span the entire container.
How do I add a loading spinner to a Tailwind button?
Place an SVG spinner inside the button alongside your text. Use Tailwind's animate-spin class on the SVG and toggle its visibility based on your application's loading state.
What is the best way to group buttons in Tailwind?
Wrap them in a div with flex gap-x-3. For a segmented button group, use flex and give the middle buttons rounded-none while rounding only the outer corners of the first and last buttons.
How do I create a custom button size in Tailwind?
Tailwind doesn't have 'sizes' like Bootstrap (btn-sm, btn-lg). Instead, you simply adjust the padding (px-2 py-1 for small, px-6 py-3 for large) and font size (text-xs vs text-lg).
Browse Free Tailwind CSS Button Components
Copy-paste button code in HTML and JSX — all variants, no account needed.