Button component patterns in Tailwind

Introduction

Buttons let people click to do things on a website. Using patterns helps make buttons look good and work well everywhere.

You want a clickable button that stands out on your page.

You need buttons that look different for actions like saving or canceling.

You want buttons that change style when hovered or focused for better user experience.

You want to reuse the same button style in many places easily.

You want buttons that work well on phones and computers.

Syntax

Tailwind

<button class="btn-class">Button Text</button>

Use Tailwind utility classes inside the class attribute to style buttons.

Combine colors, padding, borders, and hover states for better buttons.

Examples

A simple blue button with white text and rounded corners.

Tailwind

<button class="bg-blue-600 text-white px-4 py-2 rounded">Primary</button>

A gray button that changes shade when hovered.

Tailwind

<button class="bg-gray-200 text-gray-800 px-4 py-2 rounded hover:bg-gray-300">Secondary</button>

A button with a blue border and text, with a light blue background on hover.

Tailwind

<button class="border border-blue-600 text-blue-600 px-4 py-2 rounded hover:bg-blue-50">Outline</button>

A green button that looks faded and cannot be clicked when disabled.

Tailwind

<button class="bg-green-600 text-white px-4 py-2 rounded disabled:opacity-50" disabled>Disabled</button>

Sample Program

This page shows four button styles using Tailwind CSS. Each button has clear colors, spacing, and focus outlines for accessibility. The disabled button looks faded and cannot be clicked.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Button Patterns</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center gap-4 p-8 bg-gray-50 min-h-screen">
  <button class="bg-blue-600 text-white px-6 py-3 rounded shadow hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300" aria-label="Primary action">Primary</button>
  <button class="bg-gray-200 text-gray-800 px-6 py-3 rounded hover:bg-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-400" aria-label="Secondary action">Secondary</button>
  <button class="border border-blue-600 text-blue-600 px-6 py-3 rounded hover:bg-blue-50 focus:outline-none focus:ring-4 focus:ring-blue-200" aria-label="Outline action">Outline</button>
  <button class="bg-green-600 text-white px-6 py-3 rounded disabled:opacity-50" disabled aria-label="Disabled action">Disabled</button>
</body>
</html>

Important Notes

Always add aria-label or clear text for screen readers.

Use focus:outline-none with focus:ring for visible keyboard focus.

Use disabled attribute and style to show inactive buttons.

Summary

Buttons are clickable elements styled with Tailwind utility classes.

Use different colors and states (hover, focus, disabled) for clear user feedback.

Accessibility and responsive design are important for good button patterns.

Practice

1. Which Tailwind class is best to make a button visually indicate it is clickable?

easy

A. cursor-pointer

B. text-center

C. bg-gray-100

D. p-4

Solution

1. Step 1: Understand cursor styles in Tailwind

   The class cursor-pointer changes the mouse cursor to a hand icon, signaling clickability.

2. Step 2: Compare other classes

   text-center centers text, bg-gray-100 sets background color, and p-4 adds padding, none indicate clickability.

3. Final Answer:

   cursor-pointer -> Option A

4. Quick Check:

   Clickable cursor = cursor-pointer [OK]

Hint: Clickable buttons use cursor-pointer class [OK]

Common Mistakes:

• Confusing padding or color classes with clickability
• Using text alignment classes for button behavior
• Ignoring cursor style for user feedback

2. Which of these is the correct Tailwind syntax to create a blue button with white text and rounded corners?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Check Tailwind color and border radius classes

   bg-blue-500 is a valid blue background, text-white sets white text, and rounded adds small rounded corners.

2. Step 2: Identify incorrect syntax in other options

   blue-bg and white-text are not Tailwind classes; bg-blue is incomplete; rounded-full makes fully round shape but text is black, not white.

3. Final Answer:

   <button class='bg-blue-500 text-white rounded'>Click me</button> -> Option C

4. Quick Check:

   Correct Tailwind classes = Click me [OK]

Hint: Use bg-color, text-color, and rounded classes correctly [OK]

Common Mistakes:

• Using non-existent Tailwind class names
• Mixing text colors incorrectly
• Confusing rounded and rounded-full classes

3. What will be the visual effect of this button?

<button class='bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded'>Submit</button>

medium

A. Green button that becomes lighter on hover with normal text and square corners

B. Green button that darkens on hover with white bold text and rounded corners

C. Button with no color change on hover and black text

D. Button with red background and white text

Solution

1. Step 1: Analyze background and hover classes

   bg-green-600 sets a green background; hover:bg-green-700 makes it darker green on hover.

2. Step 2: Check text and shape styling

   text-white sets white text, font-bold makes text bold, rounded adds rounded corners.

3. Final Answer:

   Green button that darkens on hover with white bold text and rounded corners -> Option B

4. Quick Check:

   Hover darkens green, white bold text = Green button that darkens on hover with white bold text and rounded corners [OK]

Hint: Hover:bg-darken-color changes button shade on hover [OK]

Common Mistakes:

• Assuming hover makes color lighter instead of darker
• Ignoring font-bold effect
• Confusing rounded with square corners

4. Identify the error in this Tailwind button code:

<button class='bg-red-500 hover:bg-red-600 text-white rounded p-3 disabled:opacity-50 disabled:pointer-events-none' disabled>Delete</button>

medium

A. The hover:bg-red-600 class will not work when disabled

B. The disabled attribute is missing

C. The pointer-events-none class disables all clicks even when enabled

D. The opacity-50 class is applied incorrectly

Solution

1. Step 1: Understand disabled state styling

   The disabled attribute disables the button, so hover styles do not apply when disabled.

2. Step 2: Analyze hover and disabled interaction

   hover:bg-red-600 works only when button is enabled; when disabled, hover has no effect.

3. Final Answer:

   The hover:bg-red-600 class will not work when disabled -> Option A

4. Quick Check:

   Hover ignored when disabled = The hover:bg-red-600 class will not work when disabled [OK]

Hint: Hover styles don't apply on disabled buttons [OK]

Common Mistakes:

• Thinking disabled attribute is missing
• Believing pointer-events-none disables clicks always
• Misunderstanding opacity-50 usage

5. You want a responsive button that is full width on small screens but auto width on medium and larger screens. Which Tailwind class set achieves this?

hard

A. w-full w-auto md:px-6 py-3 bg-indigo-600 text-white rounded

B. w-auto md:w-full px-6 py-3 bg-indigo-600 text-white rounded

C. w-auto px-6 py-3 bg-indigo-600 text-white rounded md:w-auto

D. w-full md:w-auto px-6 py-3 bg-indigo-600 text-white rounded

Solution

1. Step 1: Understand responsive width classes

   w-full makes button full width; md:w-auto overrides width to auto on medium screens and up.

2. Step 2: Check other classes for correctness

   px-6 py-3 add padding, bg-indigo-600 sets background, text-white sets text color, rounded rounds corners.

3. Final Answer:

   w-full md:w-auto px-6 py-3 bg-indigo-600 text-white rounded -> Option D

4. Quick Check:

   Full width small, auto medium+ = w-full md:w-auto px-6 py-3 bg-indigo-600 text-white rounded [OK]

Hint: Use w-full then md:w-auto for responsive widths [OK]

Common Mistakes:

• Reversing width classes order
• Duplicating width classes without breakpoints
• Misplacing responsive prefixes