course-plat/BADGE_PATTERNS.md

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:

// 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:

<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:

<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:

<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