Dynamic Badge Component

Showcasing Thai/English font support and design system tokens

Dynamic Font Support

English (Plus Jakarta Sans)

IRC Platform ReadyConnectedLive Chat

Thai (Kanit + Fallback)

เข้าใจตลาดแบบทะลุปรุโปร่งเชื่อมต่อแล้วออนไลน์

Dynamic Spacing & Sizes

Small:Newใหม่
Medium:Betaเบต้า
Large:Featuredแนะนำ

Design System Color Variants

Primary Orange

Uses primary[50/800/300] tokens

Secondary

Uses primary[100/800/200] tokens

Success Green

Uses stem-green tokens

Warning Yellow

Uses sunglow tokens

Electric Green

Uses electric-green tokens

Thai Accent

Uses happy-orange tokens

Glow Effects (Original Badge Style)

IRC Dashboardเข้าใจตลาดแบบทะลุปรุโปร่งLive Updates

Real-world Usage Examples

IRC Platform Status

Server StatusOnline
Versionv2.1 Beta
Users Active1,247

สถานะแพลตฟอร์ม IRC

สถานะเซิร์ฟเวอร์ออนไลน์
เวอร์ชันv2.1 เบต้า
ผู้ใช้ที่ใช้งาน1,247

Technical Implementation

  • ✅ Dynamic Fonts: Kanit for Thai, Plus Jakarta Sans for English
  • ✅ Design System Colors: All variants use colorTokens from tokens/colors.ts
  • ✅ Dynamic Spacing: Uses spacingTokens for responsive padding/sizing
  • ✅ Typography Tokens: Font sizes and line heights from tokens/typography.ts
  • ✅ Locale-aware: Automatic font switching based on locale prop
  • ✅ Glow Effects: Optional glowing animation matching original design