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

Need a 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

Need a 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

Need a 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

Need a hint?

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