Shadcn.io is not affiliated with official shadcn/ui
Badge with Icon on Right
A destructive badge with right-aligned icon for error states with trailing visual indicators
Right-side icons feel like actions or consequences. This React badge places a Lucide React icon after text in shadcn/ui's destructive variant for directional flow. Built with ml-1 spacing and size-3 scaling, the pattern suggests progression or outcome. Perfect for status badges implying next state (Failed →), action indicators (Delete ×), or temporal markers (Expired ⏱), where icon follows logically after text—creates left-to-right reading flow with visual punctuation.
Badge with Icon on Right preview
Installation
Related Components
Destructive Icon Left
Left-aligned icon variant
Destructive Text Only
Text-only destructive badge
Outline with Icon Right
Neutral outlined right icon badge
Standard with Icon Right
Default right icon badge
Destructive with Link
Clickable destructive badge
Circular Count Badge
Round notification badge
FAQ
Was this page helpful?
Sign in to leave feedback.