Button component patterns in Tailwind - Mini Project: Build & Apply

Button Component Patterns with Tailwind CSS

📖 Scenario: You are building a simple webpage that needs buttons with different styles for various actions like primary, secondary, and disabled states. Using Tailwind CSS, you will create button components that look nice and respond visually to user interaction.

🎯 Goal: Create three buttons using Tailwind CSS classes: a primary button with a blue background, a secondary button with a gray background, and a disabled button that looks faded and cannot be clicked. The buttons should be accessible and responsive.

📋 What You'll Learn

Use Tailwind CSS utility classes to style buttons

Create a primary button with blue background and white text

Create a secondary button with gray background and black text

Create a disabled button that looks faded and is not clickable

Use semantic HTML button elements

Add accessible attributes like aria-disabled for the disabled button

Ensure buttons have padding, rounded corners, and hover/focus states

💡 Why This Matters

🌍 Real World

Buttons are everywhere on websites and apps. Knowing how to style them clearly and accessibly is essential for good user experience.

💼 Career

Front-end developers often build reusable button components with consistent styles and accessibility features using CSS frameworks like Tailwind.

1

Create the HTML structure with three buttons

Write the HTML code to create three <button> elements inside a <div>. Give each button these exact texts: Primary, Secondary, and Disabled.

Tailwind

Hint

Use three <button> tags inside a <div> container. Each button should have the exact text as given.

2

Add Tailwind classes for basic button styling

Add Tailwind CSS classes to all three buttons to give them padding px-4 py-2, rounded corners rounded, and a font size text-base. Add a margin mr-4 to the first two buttons for spacing.

Tailwind

  Primary
  Secondary
  Disabled

Hint

Use the same classes px-4 py-2 rounded text-base on all buttons. Add mr-4 to the first two buttons only.

3

Style each button with colors and states

Add these Tailwind classes to style each button:
- Primary button: bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500
- Secondary button: bg-gray-300 text-black hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500
- Disabled button: bg-gray-200 text-gray-500 cursor-not-allowed and add the attribute disabled.

Tailwind

  Primary
  Secondary
  Disabled

Hint

Use the exact Tailwind classes for background colors, text colors, hover and focus states. Add the disabled attribute to the disabled button.

4

Add accessibility attribute for the disabled button

Add the attribute aria-disabled="true" to the disabled button to improve accessibility.

Tailwind

  Primary
  Secondary
  Disabled

Hint

Add aria-disabled="true" exactly to the disabled button element.

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