React Badge with Icon on Right
A destructive badge with right-aligned icon for error states with trailing visual indicators
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-4.jsonRelated patterns you will also like
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