Shadcn.io is not affiliated with official shadcn/ui
Badge with Icon on Right
An outlined badge with right-aligned icon for metadata states with trailing visual indicators
Right-side icons feel like metadata or outcomes. This React badge places a Lucide React icon after text in shadcn/ui's outline variant for directional flow. Built with ml-1 spacing and size-3 scaling, the pattern suggests supplementary information or state. Perfect for status badges with trailing indicators (Verified ✓), rating systems (4 Stars ★), metadata with icons (Updated ↻), or dismissible tags (React ×), where icon follows logically after text—creates left-to-right reading flow with subtle visual punctuation in outlined styling.
Badge with Icon on Right preview
Installation
Related Components
Outline Icon Left
Left-aligned icon variant
Outline Text Only
Text-only outlined badge
Standard with Icon Right
Default filled right icon badge
Destructive Icon Right
Error state right icon badge
Outline with Link
Clickable outlined badge
Circular Outline Count
Round outlined count badge
FAQ
Was this page helpful?
Sign in to leave feedback.