Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Badge examples · Secondary

Badge with Text (Secondary) for React

A secondary badge with a muted label for neutral information such as Draft or Pending.

Framework
UI library

Not every badge needs to shout. This React badge uses the Badge component's secondary variant, a muted fill that gives context without pulling attention from the content around it. Use it for draft and pending states, document types, secondary tags or general categories, where a stronger badge would distract from what matters.

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

What does variant secondary change?

This badge sets variant="secondary", so it uses the secondary background and secondary-foreground text. That is the muted label.

What are the other badge variants?

default, outline, ghost, link, destructive, info, success and warning. default is the primary fill. destructive, info, success and warning carry those meanings.

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.

Where do the secondary colors come from?

From the theme tokens secondary and secondary-foreground. Change those tokens to recolor every secondary badge, or add classes on this one badge for a single exception.

What does a screen reader hear?

The badge is a span, so the label is read with the text around it. Draft, Pending or a category name still makes sense there.

All 20 badge examples