Skip to content

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

Free

Badge with Text (Outline) for React

An outline badge whose only content is the word Badge: a border, no fill, and foreground text.

The badge shows the word Badge with a thin border and no background. It is the outline variant, and there is no icon.

Put it on tags and categories that should be present without being loud. A sentence belongs in an Alert. In React, Base UI keeps the label on one line.

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="outline">Badge</Badge>

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.

API Reference

Badge

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

All 20 badge examples