Badge

Use badges to highlight important information, display statuses, categorize content, or draw attention to specific metadata. They are perfect for labels, counts, notifications, and status indicators.

Badges work well in tables, cards, lists, and navigation elements where you need to convey supplementary information without taking up too much space.

• Keep badge text concise—use 1-3 words maximum for better readability.
• Use consistent color coding across your application (e.g., green for success, red for errors).
• Choose the stable variant for approved or production-ready states, beta for experimental features, and deprecated for outdated content.
• Combine badges with icons to enhance recognition and provide visual context.
• Avoid overusing badges—too many can create visual clutter and reduce their effectiveness.

The Badge component uses semantic HTML with proper focus states and color contrast ratios. When using badges to convey status information, ensure the meaning is not communicated solely through color.

If using badges as interactive elements (links), the asChild prop allows you to render them as anchor tags while maintaining proper keyboard navigation and screen reader support.