Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Badge examples · Outline

Badge with Text (Outline) for React

An outline badge with a bordered label for tags, categories and other quiet metadata.

Framework
UI library

A border without a fill keeps an interface clean. This React badge uses the Badge component's outline variant for information that matters but doesn't need attention right away: a thin border, no background and text in the foreground color. Use it for tags, categories and metadata labels that should be present without being prominent.

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 outline draw?

variant="outline" sets a border-border edge and text-foreground. It leaves the background unset, so the page shows through the badge.

Which variants add a fill?

default and secondary fill the badge. destructive, info, success and warning fill it and set the meaning. ghost and link are the other values.

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.

Is the faint border a problem for screen readers?

No. Screen readers read the text, and the label uses text-foreground, the same color as body text. The border is only visual.

How does an outline badge sit inline?

It is inline-flex and w-fit, so it hugs the label on the same line as the text around it. shrink-0 keeps that border from collapsing in a tight row.

All 20 badge examples