Shadcn Badge
Browse 25 production-ready shadcn badge components for status labels, feature tags, role chips, and count indicators. Badge is compatible with Radix UI and Base UI stacks and fully aligned with Shadcn Create styling.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
When to use
- Status and severity labels in solid, light and outline tones for success, warning, info and errors
- Counts and short tags such as an unread number or a New marker, sized to the text around them
- Compact chips pairing a label with an icon, a dot, an avatar, a flag or a remove control, or acting as a link
When not to use
- An action that saves, opens or submits a form when pressed: use the Button component
- Helper text revealed when a control is hovered or focused: use the Tooltip component
- A finished KPI or profile tile with a trend or status chip as one detail: use the Card blocks
Agent notes
- Import
Badgefrom@/components/reui/badge; the shadcnBadgeof the same name lackssize,radiusand the success, info and warning variants - The default
radiusfollows the style, square in lyra and sera and a pill in maia, luma and rhea;radiusfull gives a pill in every style
Third-party API docs
- Base UI v1: API reference, docs, llms.txt, through the Base UI twin
- Radix UI v1: docs, through the Radix UI twin
https://reui.io/components/badge.mdget_component("badge")npx shadcn@latest add @reui/badgeShadcn Badge: Status Labels & Indicator Chips
Shadcn Badge is a compact label for status, roles, tags, or counts. It follows Radix UI composition conventions and Base UI-style semantic tokens, with full compatibility for Shadcn Create styling so colors and typography stay consistent.
It renders as a small, inline label with optional icon, often used in tables to show record status, on user rows to display roles, or in headers to flag feature flags or beta labels.
ReUI lists badge components inside tables, user lists, product cards, and dashboards so you evaluate how they pair with Shadcn Avatar, Shadcn Button, and Shadcn Card. The sections below explain what the component is, why teams use it, key features, and integration guidance.
What is Shadcn Badge?
A badge is a small, colored label that communicates status, category, or count without stealing focus. Shadcn Badge is a simple, reusable component that renders text and optional icon(s) with Tailwind utility classes for color and size variants.
Components here show badges for subscription status (Active, Trial, Paused), role labels (Admin, Member, Guest), feature flags (Beta, New), and count indicators (3). They help you choose colors, decide when to use an icon, and see how badges scale on mobile.
Why Use Shadcn Badge?
Status labels at a glance reduce noise and speed up scanning. Tables with 50+ rows become instantly readable when badges show subscription state, approval status, or role without extra columns.
Real tables, cards, and user lists on this page show how badges pair with avatars, buttons, and text to clarify state without overwhelming the layout.
Shadcn Badge Features
- Semantic Variants. Supports success (green), destructive (red), warning (yellow), and default (gray) variants using Tailwind tokens for consistent theming.
- Icon Support. Render optional icons (from Lucide) before or after text. Use sparingly to reinforce meaning without cluttering.
- Size Variants. Available in sm, md, lg via padding and font-size classes to fit tables, lists, and dense layouts.
- Dismissible Variant. Add an X button to remove the badge, useful for tags or filters that users can clear.
- Accessible. Renders as a span with semantic classes; pair with aria-label for clarity when icons are used alone.
ReUI Badge: In-House Custom Shadcn Component
ReUI Badge is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It is designed to integrate seamlessly into any shadcn/ui project: following the same copy-and-own installation model. The component source lands directly in your repository; you own it, extend it, and style it with your Tailwind CSS tokens. ReUI Badge extends the standard shadcn Badge with semantic color variants: success, warning, info, and invert: each mapped to CSS variables in your Tailwind theme. Use it anywhere you need status-coded labels beyond the default shadcn variant set.
The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling: only the underlying headless primitive differs. ReUI maintains 22 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.
Integrating with Other Components
Pair badges with Shadcn Avatar in user rows or team lists to show roles and status. Use badges in Shadcn Table columns for quick status scanning.
Add badges to Shadcn Button (e.g., 'Save 3 items') or Shadcn Input headers to flag counts. Combine badges with Shadcn Card headers to mark featured items, beta features, or sale tags.
Use dismissible badges with Shadcn Input or Shadcn Field for tag selection. Render badge groups inside Shadcn Popover for detailed filtering, and add Shadcn Tooltip for help text on status meanings.
Frequently Asked Questions
When should I use a badge vs. text or a button?
What colors should I use for different statuses?
Should I include an icon in the badge?
How do I add a dismissible badge for tags?
Can I use badges in tables to show status?
What if a badge label is too long?
How are ReUI badge components different from a code example?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.