Button Variants and States

Buttons are one of the most interactive elements on a page, and users rely on visual cues to understand their purpose. Button variants communicate intent: a primary button drives the main action, a secondary button provides an alternative, and an outline or ghost button offers a subtle option.

With Tailwind, you achieve all of these without writing any custom CSS. Each variant is just a different combination of utility classes applied to the same <button> element.

A primary button uses a solid background color to attract maximum attention. The pattern combines padding utilities, a background color, white text, and a rounded corner class.

Adding hover:bg-blue-700 darkens the button on hover, providing clear feedback that the element is interactive. The font-semibold class increases the visual weight of the label.

A secondary button uses a lighter background to signal a less prominent action. An outline button drops the fill entirely and shows only a border, using border border-blue-600 text-blue-600 on a transparent background.

On hover, outline buttons can fill in with a light background like hover:bg-blue-50 to give visual feedback without overwhelming the primary button nearby.

A ghost button has no background and no visible border by default, appearing as styled text until the user interacts with it. This variant is ideal for low-emphasis actions like cancel or dismiss.

Applying hover:bg-gray-100 reveals a subtle fill on hover, and using text-gray-700 keeps the label readable without drawing attention away from primary actions.

A destructive button uses red tones to warn users about irreversible actions like deleting data. The color signals danger without the user needing to read the label carefully.

Combine bg-red-600 with a strong hover state hover:bg-red-700 and always pair the button with a confirmation dialog to prevent accidental actions.

When a button is not yet actionable — for example, while a form is being submitted — you should visually communicate this with a disabled state. Tailwind provides the disabled: variant prefix for exactly this purpose.

Apply disabled:opacity-50 disabled:cursor-not-allowed to dim the button and change the cursor, signaling that it cannot be clicked. Always use the HTML disabled attribute alongside these classes for proper accessibility.

A common pattern is showing a loading spinner inside a button while an async operation completes. You can use Tailwind's animate-spin on an SVG icon placed before the label text.

Use inline-flex items-center gap-2 on the button to align the spinner and text side by side, and add pointer-events-none while loading to prevent double submissions.

Different contexts call for different button sizes. A small button is useful in dense UIs like tables, while an extra-large button is effective as a hero CTA.

Define sizes by varying the px-*, py-*, and text-* values. A common scale is sm (px-3 py-1.5 text-sm), md (px-5 py-2.5 text-base), and lg (px-6 py-3 text-lg).

Icon buttons use only an icon without a visible label, so they must have an accessible aria-label attribute. Style them as a square with equal padding: p-2 creates a compact clickable area around the icon.

For icon-plus-text buttons, use inline-flex items-center gap-2 to align the SVG icon vertically with the text label at any font size.

A full-width button uses w-full to stretch across its container, common in mobile layouts and form submissions. Adding justify-center ensures the label stays centered.

A button group connects multiple buttons side by side. Remove the border radius from middle buttons and apply negative margins to merge borders: first:rounded-l-lg last:rounded-r-lg border-r-0 creates a unified pill appearance.

Every button variant needs a visible focus indicator for keyboard users. Tailwind's focus:ring-* utilities render a colored ring outside the button border without affecting layout.

A good pattern is focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2. The ring-offset-2 adds a small white gap between the button and the ring, making it pop on colored backgrounds. Use focus-visible:ring-2 to show the ring only when navigating with a keyboard.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

In this lesson you learned: primary, secondary, outline, and ghost button variants are built by combining background, border, and text color utilities; interactive states like hover, active, disabled, and loading are handled with Tailwind variant prefixes; and focus rings using focus-visible:ring-2 ensure keyboard accessibility without cluttering mouse interactions. Next up we explore card component patterns.