React Badge with Text
A compact inline badge with primary styling for status indicators, labels, and category tags
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Badges are those little colored pills you see everywhere—New, Beta, Premium, Verified. This React badge uses shadcn/ui's default variant with primary brand colors for highlighting important states, features, or categories. Built with Radix UI primitives, it's compact, inline, and semantically flexible. Perfect for status indicators on cards, feature tags in navigation, version labels on docs, or category pills on blog posts where you need subtle but noticeable visual markers.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-standard-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-standard-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-standard-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-standard-1.jsonRelated patterns you will also like
Badge with Link
Clickable badge linking to filtered content
Badge with Icon Left
Badge with leading icon for visual context
Secondary Badge
Subtle gray badge for less emphasis
Outline Badge
Bordered badge with transparent background
Destructive Badge
Red badge for errors and warnings
Circular Count Badge
Round badge for notification counts