Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Badge examples · Standard

Badge with Text (Standard) for React

A default badge with a short label for a status, a feature tag or a category.

Framework
UI library

Badges are the small labels you see everywhere: New, Beta, Premium, Verified. This React badge uses the Badge component's default variant, filled with your theme's primary color, for the state, feature or category you most want noticed. It renders a span that keeps its text on one line, so it sits inline beside a heading, in the corner of a card or in a table cell.

Preview

Preview width
Badge

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Which variant is this badge?

No variant is set, so it stays default: the theme's primary fill and primary text. The other values are secondary, outline, ghost, link, destructive, info, success and warning.

How do I change the size or round it fully?

size takes sm, md or lg. pill rounds the badge fully. This demo sets neither, so you get the normal label.

Why doesn't the label wrap?

The badge is whitespace-nowrap, so the label stays one line. Shorten the text. A sentence belongs in an Alert.

How does the badge sit next to other text?

It is inline-flex and w-fit, so it hugs the label and stays on the line with a heading or a table cell. shrink-0 keeps it from being squashed in a tight row.

What does a screen reader hear?

The badge is a span, so the label is read with the text around it. Use a word that still makes sense in that sentence.

How do I give this badge a one-off color?

Add background and text classes on Badge, including the dark pair, such as bg-blue-50 text-blue-700 and dark:bg-blue-950 dark:text-blue-300. Keep variant for meaning, such as destructive for an error.

All 20 badge examples