Shadcn.io is not affiliated with official shadcn/ui
Badge with Icon on Right
A badge with a Lucide React icon positioned to the right of text for trailing visual indicators
Right-aligned icons in badges communicate different meanings—external link arrows, dropdown chevrons, close buttons. This React badge positions a Lucide React icon after text with ml-1 spacing and size-3 sizing. Built with shadcn/ui, the trailing icon suggests action or direction rather than just categorization. Perfect for badges with external links, expandable badges revealing more info, dismissible tags, or any scenario where the icon indicates what happens next rather than what the badge represents.
Badge with Icon on Right preview
Installation
Related Components
Badge Icon Left
Badge with leading icon
Badge with Link
Clickable badge for navigation
Secondary Icon Right
Subtle badge with trailing icon
Dismissible Badge
Badge with close button
External Link Badge
Badge indicating external navigation
Expandable Badge
Badge that reveals more content
FAQ
Was this page helpful?
Sign in to leave feedback.