Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Badge examples · Secondary

Badge with Icon on Right (Secondary) for React

A secondary badge with a star icon after its label for muted metadata with a trailing indicator.

Framework
UI library

A trailing icon in a muted badge reads like a footnote: present, not primary. This React badge puts a Lucide star after its label in the Badge component's secondary variant, with data-icon="inline-end" so the badge sizes and spaces the icon. Use it for confirmations (Reviewed with a check), quality marks (3 with a star), external flags or dismissible filters, where the icon finishes the label without competing for attention.

Preview

Preview width

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

How does the star sit after the label in React?

The icon comes after the word, with data-icon="inline-end" and aria-hidden="true". The badge styles use that attribute to tighten the padding on the icon's side.

Why hide the star from assistive tech?

The label is the word in the badge. The star is decoration. aria-hidden="true" is already on the icon, so screen readers read the word and skip the star.

Does the star need its own color?

No. Lucide icons paint with currentColor, so the star uses the badge's text color and follows the variant, including in dark mode.

What does variant secondary change?

variant="secondary" uses the secondary background and secondary-foreground text. The star stays after the word, with the same icon attributes as in this file.

How do I change the badge size?

size on Badge takes sm, md or lg, and pill rounds the badge fully. This demo sets neither, so the label stays the normal height.

Can I use a different icon?

Yes. Replace the star and keep the attributes this demo puts on the icon.

All 20 badge examples