Honeycomb

Badge

Displays a badge or a component that looks like a badge.

When To Use

  • To highlight a status or count.
  • To label or categorize items.
  • To display a notification indicator.
Variants
Badge comes in several style variants.
DefaultSecondaryDestructiveOutlineGhost
With Icon
Render icons inside badges.
Verified Bookmark
With Spinner
Show a loading spinner inside a badge.
Deleting Generating
Link
Use asChild to render a link styled as a badge.
Open Link
Custom Colors
Customize badge colors with Tailwind classes.
BlueGreenSkyPurpleRed