Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Badge with Text (Secondary) for React

A secondary badge whose only content is the word Badge, on a muted fill for a neutral state such as Draft.

The badge shows the word Badge on a muted fill. It is the secondary variant, and there is no icon.

Use it for Draft, Pending, or a type that should not shout. If the message is a sentence, use an Alert. In React, Base UI reads the word with the text around it.

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

Anatomy

Badge anatomy: root, icon, text

Usage

<Badge variant="secondary">Badge</Badge>

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.

API Reference

Badge

Sets variant="secondary". The rest is on the Badge page.

All 20 badge examples