# Badge/Label Patterns - Course Platform

## Overview

This document defines the standardized badge/label patterns used throughout the course platform application. All badges should follow these patterns to ensure consistency across the UI.

## Base Badge Style

All badges use a modern UI pattern with:
- **Size**: `px-2.5 py-0.5` (horizontal padding 0.625rem, vertical padding 0.125rem)
- **Shape**: `rounded-full` (fully rounded corners)
- **Typography**: `text-[11px] tracking-wide uppercase` (11px font, wide letter spacing, uppercase text)
- **Layout**: `inline-flex items-center` (flexbox with centered items)
- **Transition**: `transition-colors` (smooth color transitions)

## Color Patterns

### Emerald (Success/Active Status)

**Light Mode:**
- Background: `bg-emerald-50`
- Text: `text-emerald-700`
- Border: `border border-emerald-200/60`

**Dark Mode:**
- Background: `dark:bg-emerald-500/10`
- Text: `dark:text-emerald-400`
- Border: `dark:border-emerald-500/20`

**Usage:** Active status, completed items, success states, positive indicators

---

### Blue (Info/Primary Status)

**Light Mode:**
- Background: `bg-blue-50`
- Text: `text-blue-700`
- Border: `border border-blue-200/60`

**Dark Mode:**
- Background: `dark:bg-blue-500/10`
- Text: `dark:text-blue-400`
- Border: `dark:border-blue-500/20`

**Usage:** Informational status, primary actions, neutral indicators

---

### Red (Error/Danger Status)

**Light Mode:**
- Background: `bg-red-50`
- Text: `text-red-700`
- Border: `border border-red-200/60`

**Dark Mode:**
- Background: `dark:bg-red-500/10`
- Text: `dark:text-red-400`
- Border: `dark:border-red-500/20`

**Usage:** Error states, danger warnings, negative indicators, failed status

---

### Amber (Warning Status)

**Light Mode:**
- Background: `bg-amber-50`
- Text: `text-amber-700`
- Border: `border border-amber-200/60`

**Dark Mode:**
- Background: `dark:bg-amber-500/10`
- Text: `dark:text-amber-400`
- Border: `dark:border-amber-500/20`

**Usage:** Warning states, caution indicators, pending actions

---

### Yellow (Caution Status)

**Light Mode:**
- Background: `bg-yellow-50`
- Text: `text-yellow-700`
- Border: `border border-yellow-200/60`

**Dark Mode:**
- Background: `dark:bg-yellow-500/10`
- Text: `dark:text-yellow-400`
- Border: `dark:border-yellow-500/20`

**Usage:** Caution indicators, attention needed, minor warnings

---

### Purple (Special/Featured Status)

**Light Mode:**
- Background: `bg-purple-50`
- Text: `text-purple-700`
- Border: `border border-purple-200/60`

**Dark Mode:**
- Background: `dark:bg-purple-500/10`
- Text: `dark:text-purple-400`
- Border: `dark:border-purple-500/20`

**Usage:** Featured items, special categories, premium content

---

### Indigo (Secondary Status)

**Light Mode:**
- Background: `bg-indigo-50`
- Text: `text-indigo-700`
- Border: `border border-indigo-200/60`

**Dark Mode:**
- Background: `dark:bg-indigo-500/10`
- Text: `dark:text-indigo-400`
- Border: `dark:border-indigo-500/20`

**Usage:** Secondary status, alternative categories, supplementary info

---

### Gray (Neutral/Default Status)

**Light Mode:**
- Background: `bg-gray-50`
- Text: `text-gray-700`
- Border: `border border-gray-200/60`

**Dark Mode:**
- Background: `dark:bg-gray-500/10`
- Text: `dark:text-gray-400`
- Border: `dark:border-gray-500/20`

**Usage:** Default status, neutral indicators, inactive states

---

## Usage with @apply Classes

To reduce HTML class clutter, use the predefined CSS classes in `globals.css`:

```jsx
// Emerald badge
<span className="badge-emerald">Active</span>

// Blue badge
<span className="badge-blue">Info</span>

// Red badge
<span className="badge-red">Error</span>

// Amber badge
<span className="badge-amber">Warning</span>

// Yellow badge
<span className="badge-yellow">Caution</span>

// Purple badge
<span className="badge-purple">Featured</span>

// Indigo badge
<span className="badge-indigo">Secondary</span>

// Gray badge
<span className="badge-gray">Inactive</span>
```

## Full Tailwind Classes (Reference)

If you need to use the full Tailwind classes directly:

```jsx
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] tracking-wide uppercase bg-emerald-50 text-emerald-700 border border-emerald-200/60 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/20 transition-colors">
  Status
</span>
```

## Common Use Cases

### Status Badges

| Status | Color | Class |
|--------|-------|-------|
| Active | Emerald | `badge-emerald` |
| Inactive | Gray | `badge-gray` |
| Pending | Amber | `badge-amber` |
| Completed | Emerald | `badge-emerald` |
| Cancelled | Red | `badge-red` |
| Draft | Gray | `badge-gray` |
| Published | Emerald | `badge-emerald` |

### Payment Status

| Status | Color | Class |
|--------|-------|-------|
| Paid | Emerald | `badge-emerald` |
| Unpaid | Red | `badge-red` |
| Partial | Amber | `badge-amber` |
| Overdue | Red | `badge-red` |

### Attendance Status

| Status | Color | Class |
|--------|-------|-------|
| Present | Emerald | `badge-emerald` |
| Absent | Red | `badge-red` |
| Late | Amber | `badge-amber` |
| Excused | Blue | `badge-blue` |

### Exam Status

| Status | Color | Class |
|--------|-------|-------|
| Available | Emerald | `badge-emerald` |
| Completed | Blue | `badge-blue` |
| Graded | Purple | `badge-purple` |
| Pending | Amber | `badge-amber` |

### Content Categories

| Category | Color | Class |
|----------|-------|-------|
| Slides | Blue | `badge-blue` |
| Exercises | Emerald | `badge-emerald` |
| Reading | Purple | `badge-purple` |
| Videos | Red | `badge-red` |
| Audio | Amber | `badge-amber` |
| Assignments | Indigo | `badge-indigo` |
| Other | Gray | `badge-gray` |

## Implementation Notes

1. **Always use the @apply classes** (`badge-emerald`, `badge-blue`, etc.) instead of inline Tailwind classes for consistency
2. **Badge text should be short** (1-2 words) and in uppercase
3. **Use semantic colors** based on the meaning (emerald for success, red for danger, etc.)
4. **Ensure accessibility** by maintaining good contrast ratios in both light and dark modes
5. **Test in both themes** to verify proper appearance

## Migration Guide

When updating existing badges:

1. Replace long Tailwind class strings with the appropriate `badge-*` class
2. Ensure text content is uppercase
3. Verify the color matches the semantic meaning
4. Test in both light and dark themes

### Before:
```jsx
<span className="text-xs px-2 py-1 rounded-full border bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800">
  Active
</span>
```

### After:
```jsx
<span className="badge-emerald">Active</span>
```

## Related Files

- `src/app/globals.css` - Contains all badge CSS classes with @apply
- `STYLE_GUIDE.md` - Overall style guide for the application