Shadcn Badge
React badge component for status indicators, notification counts, and labels. Built with TypeScript and Tailwind CSS for Next.js using CVA variants.
Badge positioning off?
Join our Discord community for help from other developers.
Ever shipped a feature where every developer made their own badge style? Red here, blue there, rounded on this page, square on that one. Before you know it, your app looks like a bag of Skittles exploded. This shadcn/ui badge component brings sanity back to your status indicators.
Badge showcase
All badge variants in action:
Built with class-variance-authority (CVA) for type-safe variants and TypeScript autocompletion. Styled with Tailwind CSS so you can actually customize them without fighting the framework.
npx shadcn@latest add badgeWhy badges actually guide attention
Here's the thing—badges aren't just colorful decorations. They're visual shortcuts that help users scan interfaces quickly. A red badge on an error? Users know something's wrong before reading a single word. A "99+" on your inbox? That's anxiety in a circle.
Think about GitHub's notification badge. You see that blue dot and you know exactly what it means—someone needs your attention. No explanation needed. That's the power of a well-placed badge in your React applications.
This free shadcn badge handles the visual consistency while you focus on the logic. Whether you're showing user roles, content tags, or notification counts in your JavaScript apps, badges that look consistent build trust.
Common badge patterns you'll actually use
Badge variants
Four styles for different contexts:
Badge with icons
Icons plus text for clearer communication:
Interactive badges
Clickable badges for filters and actions:
Badge shapes
Notification counts and special styles:
Features
This free open source badge component includes everything you need:
- TypeScript variants - Type-safe props with full autocompletion
- CVA powered - Consistent variants without the prop drilling nightmare
- Tailwind CSS utilities - Override anything with className, no !important hacks
- Icon support - Auto-sized icons with proper spacing built-in
- Accessible by default - Proper color contrast and focus states
- Composable design - Works inside buttons, cards, tables, anywhere
- Size flexibility - From tiny notification dots to large status badges
API Reference
Badge
The badge component with variant support through CVA.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "default" | Visual style variant for different contexts |
className | string | - | Additional CSS classes for custom styling |
children | React.ReactNode | - | Badge content (text, icons, or both) |
Variant Styles
| Variant | Use Case | Appearance |
|---|---|---|
default | Primary info, active states | Solid primary background |
secondary | Neutral info, metadata | Muted background |
destructive | Errors, warnings, urgent | Red/destructive theme |
outline | Subtle tags, filters | Border only, transparent |
Built-in Features
| Feature | Description | Implementation |
|---|---|---|
| Icon sizing | Auto-scales icons | [&>svg]:size-3 class |
| Focus ring | Keyboard navigation | Focus-visible utilities |
| Hover states | Interactive feedback | Opacity/color changes |
| Responsive | Scales with font size | Relative units (em/rem) |
Production tips
Keep badge text super short. This free shadcn/ui badge looks best with 1-2 words max. "NEW" beats "Recently Added Item". If you need more text, you probably want a different component.
Be consistent with colors. Don't use destructive for "Sale" just because it's red. Users learn that red means error in your Next.js app, then suddenly it means discount? That's confusing. Pick a color system and stick to it.
Notification counts need limits. Nobody cares about the difference between 847 and 848 unread messages. Cap it at "99+" or even "9+". Your TypeScript badge component should communicate urgency, not exact math.
Test color contrast. That lime green badge might look cool on your monitor, but can everyone read it? This open source shadcn component uses accessible defaults, but custom colors are on you.
Don't badge everything. When everything has a badge, nothing feels important. Use them for stuff that actually needs attention in your React applications.
Integration with other components
Badges shine when paired with Avatar components to show user status or roles in your React apps. Combine with Button components for actionable filters—click a badge to toggle a category.
Inside Table components, badges make status columns scannable at a glance. This open source pattern beats reading "Active", "Pending", "Active", "Error" down a column. When building navigation, badges on Tabs show counts without cluttering the interface.
For cards, throw badges in the corner of Card components to highlight featured content or sale items. Your JavaScript components stay clean while communicating important metadata.
Questions you might have
Shadcn Avatar
React avatar component for user profiles with automatic image fallbacks. Built with TypeScript and Tailwind CSS for Next.js using Radix UI.
Shadcn Breadcrumb
React breadcrumb component for navigating complex hierarchies with dropdown support. Built with TypeScript and Tailwind CSS for Next.js applications.