Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Badge examples · Destructive

Badge with Text (Destructive) for React

A destructive badge for an error, a failure or another state that needs fixing.

Framework
UI library

Red means something is wrong. This React badge uses the Badge component's destructive variant for errors and urgent warnings: the label takes your theme's destructive color on a light tint of the same color. Use it for failed statuses, error counts, critical alerts and overdue tasks, any negative state that should be recognized at a glance.

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 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.

All 20 badge examples