# Button & Badge Component Test

## Buttons

### Primary Button
```html
<button class="btn btn-primary">Primary Action</button>
<button class="btn btn-primary" disabled>Disabled</button>
```

### Secondary Button
```html
<button class="btn btn-secondary">Secondary Action</button>
<button class="btn btn-secondary" disabled>Disabled</button>
```

### Outline Button
```html
<a href="#" class="btn btn-outline">Outline Button</a>
```

### Sizes
```html
<button class="btn btn-sm">Small Button</button>
<button class="btn">Normal Button</button>
<button class="btn btn-lg">Large Button</button>
```

### Icon Button
```html
<button class="btn btn-icon" aria-label="Close">
  <i data-feather="x"></i>
</button>
```

### With Icon
```html
<a href="#" class="btn">
  Read More
  <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
</a>
```

## Badges

### Article Type Badges
```html
<span class="badge badge-tech">Tech</span>
<span class="badge badge-life">Life</span>
<span class="badge badge-quote">Quote</span>
<span class="badge badge-link">Link</span>
<span class="badge badge-photo">Photo</span>
```

### Pinned Badge
```html
<span class="badge badge-life">📌 PINNED</span>
```

## Testing Checklist

### Visual Testing
- [ ] Buttons render with purple accent background
- [ ] Buttons have white text
- [ ] Buttons have rounded corners
- [ ] Secondary buttons show green/emerald background
- [ ] Outline buttons have border but transparent background
- [ ] Button sizes scale correctly (sm, normal, lg)
- [ ] Icon buttons are circular
- [ ] Badges show with subtle background + colored text
- [ ] All 5 type badges (tech, life, quote, link, photo) display correctly

### Interactive Testing
- [ ] Buttons lift on hover (translateY -1px)
- [ ] Buttons opacity changes on hover (0.85)
- [ ] Buttons opacity changes on active (0.75)
- [ ] Buttons return to normal opacity on release
- [ ] Focus states show ring around button
- [ ] Disabled buttons are greyed out (0.5 opacity)
- [ ] Disabled buttons don't respond to hover
- [ ] Badges have slight background change on hover

### Dark/Light Mode Testing
- [ ] Dark mode: Primary button purple on dark bg ✓
- [ ] Dark mode: Secondary button green on dark bg ✓
- [ ] Light mode: Primary button darker purple ✓
- [ ] Light mode: Secondary button green/emerald ✓
- [ ] Light mode: All text readable on button backgrounds ✓
- [ ] Light mode: Badge text readable ✓

### Responsive Testing
- [ ] Buttons stack vertically on mobile
- [ ] Button text doesn't wrap or overflow
- [ ] Icon buttons stay circular at all sizes
- [ ] Badge text doesn't wrap

### Accessibility Testing
- [ ] Button hover state clear and visible
- [ ] Focus ring visible (2px ring offset 2px)
- [ ] Disabled buttons clearly appear inactive
- [ ] Icon buttons have aria-label
- [ ] All buttons keyboard accessible (Tab, Enter)
- [ ] Focus order logical
- [ ] High contrast maintained in all states