Shadcn Badge Examples: Status Labels, Counts, and Announcements
A badge is a compact label used to communicate status, category, or a numeric count at a glance. The shadcn badge component renders as a small pill styled with Tailwind CSS, offering default, secondary, outline, and destructive variants, and because it is a react badge component built on plain markup it can also render as a link or wrap other elements.
Below you will find 17 badge examples ready to copy and paste, ranging from the standard variants in Badge through Badge 12 to specialized patterns like a notification count, an announcement pill, an announcement with link, a split announcement, and an announcement with button. All snippets are TypeScript and work in any Next.js or Vite codebase.
What these badge examples cover
- Core variants: Default, secondary, outline, and destructive styles cover most status labeling needs without custom classes.
- Notification counts: A dedicated example positions a numeric badge over an icon button, the classic unread indicator pattern.
- Announcement pills: Marketing style pills with links, split layouts, and inline buttons for changelog and hero sections.
- Icon and dot badges: Variants pair a status dot or small icon with text for richer semantics.
- asChild rendering: The badge can render as an anchor or Next.js Link while keeping its styling.
Best practices
- One meaning per color: Keep green for success and red for destructive across the whole app so badges stay scannable.
- Avoid sentence-length badges: A badge should hold one or two words, otherwise it competes with body text.
- Cap numeric counts: Render 99+ instead of large numbers so notification badges keep a stable width.
- Do not rely on color alone: Pair color with text or an icon so colorblind users can still read the status.
- Use outline for low emphasis: The outline variant marks metadata like tags without pulling attention from primary content.
Common use cases
Status columns are the natural habitat of badges. Inside a data table a badge marks orders as paid, pending, or refunded, and in a table of users it flags roles like admin or viewer. Notification counts on top of a bell icon and version tags next to product names are equally common.
The announcement variants target marketing pages. A hero section often opens with an announcement badge linking to a changelog entry, a pattern you can see across the dashboards in our Next.js dashboard collection.
Pairing badges with other components
Badges sit naturally beside an avatar to indicate presence, inside a card header to label a plan tier, or next to a button label to advertise a new feature. Keeping the size small preserves hierarchy in each of these spots.
Under the hood
The badge has no behavioral primitive. It is a single span styled with Tailwind CSS and variant classes, documented in the shadcn/ui badge docs, which makes it equally at home in Radix UI and Base UI based projects. Because there is no JavaScript behavior, the component is fully server renderable and costs almost nothing in the bundle.