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 🚀