Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Badge examples · Standard

Badge with Icon on Left (Standard) for React

A default badge with a star icon before its label for featured or highlighted items.

Framework
UI library

Icons make badges scannable: a star for featured, a check for verified, a flame for trending. This React badge puts a Lucide star before its label with data-icon="inline-start". The Badge component sizes the icon to its text and spaces it with its own gap, so the icon needs no classes. Use it for featured items, verification marks, priority levels or trending labels, where a symbol reads faster than a word.

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 before the label in React?

The icon is the first child, with data-icon="inline-start" and aria-hidden="true". The badge styles size the svg and space it with the badge's gap, so the icon has no size class.

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.

Which variant is this badge?

No variant is set, so it stays default, a primary fill. Set secondary, outline or destructive on Badge for those looks. The icon stays the first child.

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