React Badge with Icon on Right
A secondary badge with right-aligned icon for muted metadata with trailing indicators
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Right icons in gray feel like footnotes—present but not primary. This React badge places a Lucide React icon after text in shadcn/ui's secondary variant for subtle metadata indication. Built with ml-1 spacing and size-3 scaling in muted styling, the pattern suggests supplementary state or attribute. Perfect for status confirmations (Reviewed ✓), quality indicators (3 Stars ★), metadata flags (External ↗), or dismissible filters (React ×), where icon concludes the label—creates left-to-right reading flow with understated visual punctuation that doesn't compete for attention.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-4.jsonRelated patterns you will also like
Secondary Icon Left
Left-aligned icon variant
Secondary Text Only
Text-only gray badge
Standard with Icon Right
Primary colored right icon badge
Outline Icon Right
Minimal right icon badge
Secondary with Link
Clickable gray badge
Circular Secondary Count
Round gray count badge