Day 2 - Component Challenge
Challenge UI with Livewire & Alpine.js
Day 2
Day 2
Button Component Showcase
Complete button system with variants, sizes, icons, and loading states
Button Variants
Button Sizes
Buttons with Left Icons
Buttons with Right Icons
Icon Only Buttons
Different Variants
Different Sizes
Pill Buttons (Rounded Full)
Loading States
Livewire Integration (wire:loading)
Click buttons to see automatic loading states with wire:target
Disabled States
Block Buttons (Full Width)
Button Groups
Text Formatting
Text Alignment
Pagination
Buttons as Links
Real World Examples
Form Actions
Alert with Actions
Product successfully added to cart
Editor Toolbar
Social Actions
Call to Action
Built with Livewire v4, Tailwind CSS & Lucide Icons
Day 2 - Reusable Button Component 🚀