0
0
Tailwindmarkup~5 mins

Button component patterns in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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>
OutputSuccess
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.