React Badge with Icon on Right
An outlined badge with right-aligned icon for metadata 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 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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-outline-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-outline-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-outline-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-outline-4.jsonRelated patterns you will also like
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