Badge

Badges are small, circular or pill-shaped elements used to display status, notification counts, or labels. They draw attention to updates, unread messages, or categorized content. By conveying key information at a glance, badges improve navigation, boost engagement, and enhance overall usability.

  • Multiple variants

  • Render as link

DefaultSecondaryDestructiveOutline
Verified89920+

Installation

Loading...

Usage

<Badge>
  Badge
</Badge>

Examples

API Reference

PropTypeDefault
variant
enum
"default"
asChild
boolean
false