Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Badge examples · Standard

Badge with Link (Standard) for React

A default badge rendered as a link that underlines on hover, for tags and filtered views.

Framework
UI library

Sometimes a badge needs to go somewhere. This React badge is itself the link: the Badge component moves its styles onto an a, and hover:underline shows it can be clicked. People can open every post with a tag, every item in a category or every issue with a label. Use it for blog tags, product categories and issue labels that lead to a filtered view.

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

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