Skip to content

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

Free

Badge with Text (Destructive) for React

A destructive badge whose only content is the word Badge, for an error or another state that needs fixing.

The badge shows the word Badge in the destructive color, on a light tint of that color. There is no icon.

Use it for Failed, an error count, or something overdue. A full 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="destructive">Badge</Badge>

FAQ

What color does variant destructive use?

variant="destructive" sets text-destructive on bg-destructive/10, and dark:bg-destructive/20 in dark mode. The word still has to name the problem, such as Error or Failed.

Which variant is for a success or a warning?

success and warning, plus info. secondary and outline stay neutral. default, ghost and link are the other values.

When should this be an alert instead?

Use the badge for a short status beside other content. Use an Alert when you need a sentence about what failed and what to do next.

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 a word like Failed stays one line. Put a longer explanation in the text beside the badge.

Is the red enough on its own?

No. Screen readers read the badge text, so use a word like Error or Failed. The color is text-destructive on top of that word.

API Reference

Badge

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

All 20 badge examples