Skip to content

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

Free

Badge with Link (Standard) for React

A default badge whose label Badge is a link that underlines on hover, for a tag that opens another view.

The word Badge is a link with the primary fill. Hovering underlines it. No variant is set. The href in this file is #link.

Use it for a blog tag or a category that goes to a filtered page. This pattern is not an on and off filter. That is a Button. In React, Base UI moves the badge styles onto the link.

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 className="hover:underline" render={<a href="#link" />}>
  Badge
</Badge>

FAQ

Which variant is the link?

No variant is set, so the link keeps the default colors. That variant also adds a hover background when the badge is an anchor. hover:underline is the extra cue in this file.

Can I reach the link from the keyboard?

Yes. It is an a with an href, so Tab focuses it and Enter follows it. Screen readers announce a link.

Should a toggle filter be this badge?

No. This pattern goes to another page. An on and off filter is a Button or a toggle.

Why doesn't the link text wrap?

The badge is whitespace-nowrap, so the label stays one line. Keep it to a word or two.

Can this link use another variant?

Yes. Set variant on the same Badge. The values are default, secondary, outline, ghost, link, destructive, info, success and warning.

All 20 badge examples