Button Components
- Create reusable and interactive button components.
What is a Button Component ?
A button component is not just a <button> with styles.
It is a system-defined UI element that:
Has consistent design
Supports multiple states
Can be reused everywhere
Behaves predictably
Button components are a core part of any design system.
Why Buttons Deserve Their Own Component
Buttons appear:
On forms
In dialogs
In navigation
In cards
Everywhere
Without components:
Styles get duplicated
Inconsistencies appear
Changes become risky
A single button component:
Solves repetition
Improves consistency
Speeds up development
Core Button States
Every professional button must support:
Default
Hover
Focus
Active (pressed)
Disabled
Loading (optional)
Base Button Styling
This button provides a foundational style with layout, spacing, focus states, and transitions for reuse.
<button
class="inline-flex items-center justify-center
px-4 py-2
text-sm font-medium
rounded-md
focus:outline-none
focus:ring-2 focus:ring-offset-2
transition"
>
Button
</button>Why This Base Works
Good click area
Clean typography
Accessible focus
Smooth interaction
This is the button skeleton.
Primary Button Component
Used for:
Main actions
Submit
Save
Continue
Primary Button Component
This button highlights the main action with strong color, hover, active scale, and focus states using Tailwind.
<button
class="inline-flex items-center justify-center
px-4 py-2
text-sm font-medium
rounded-md
bg-blue-500 text-white
hover:bg-blue-600
active:scale-95
focus:outline-none
focus:ring-2 focus:ring-blue-400
transition"
>
Primary Action
</button>UX Meaning
“This is the main thing you should do.”
Secondary Button Component
Used for:
Cancel
Back
Optional actions
Secondary Button Component
This button is styled for secondary actions with subtle borders, hover effects, and focus states using Tailwind.
<button
class="inline-flex items-center justify-center
px-4 py-2
text-sm font-medium
rounded-md
border border-gray-300
text-gray-700
hover:bg-gray-100
focus:ring-2 focus:ring-gray-300
transition"
>
Cancel
</button>UX Meaning
“This action is available, but not primary.”
Outline Button
Used when:
UI needs subtle actions
Background is strong
Outline Button Component
This button uses a bordered outline style with hover background and focus ring for subtle actions.
<button
class="inline-flex items-center justify-center
px-4 py-2
text-sm font-medium
rounded-md
border border-blue-500
text-blue-500
hover:bg-blue-50
focus:ring-2 focus:ring-blue-400
transition"
>
Outline Button
</button>Disabled Button State
Disabled buttons must:
Look inactive
Block interaction
Not respond to hover
Disabled Button Styling
This button appears inactive and prevents interaction using opacity and cursor styles in Tailwind.
<button
disabled
class="inline-flex items-center justify-center
px-4 py-2
text-sm font-medium
rounded-md
bg-blue-500 text-white
opacity-50
cursor-not-allowed"
>
Disabled
</button>Loading Button
Used when:
Form is submitting
Action is processing
Loading Button with Spinner
This button shows a loading state with a spinning icon and disabled interaction using Tailwind.
<button
disabled
class="inline-flex items-center justify-center gap-2
px-4 py-2
text-sm font-medium
rounded-md
bg-blue-500 text-white
opacity-70"
>
<span class="animate-spin">⏳</span>
Processing
</button>Button Sizes
Small
px-3 py-1.5 text-sm
Default
px-4 py-2 text-sm
Large
px-5 py-3 text-base
Choose one system, not random sizes.
Button Width Variants
Auto Width
inline-flex
Full Width (Forms)
w-full
Use full-width buttons for:
Mobile forms
Primary submit actions