Skip to content

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

Free

Badge with Icon on Left (Destructive) for Solid

A destructive badge with a star icon before the word Badge, for an error or another state that needs a symbol.

UI library: Ark UI

A star sits before the word Badge. The badge uses the destructive color on a light tint of that color. The star is decorative.

Use it when people should spot a problem before they read the word. Swap the star for the symbol you need. A full sentence belongs in an Alert. In Solid, Ark UI keeps the label on one line.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Badge anatomy: root, icon, text

Usage

<Badge variant="destructive">
    <StarIcon aria-hidden="true" data-icon="inline-start" />
    Badge
  </Badge>

FAQ

How does the star sit before the label in Solid?

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.

What does variant destructive change?

variant="destructive" sets text-destructive on bg-destructive/10. The star stays the first child and picks up that text color.

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.

API Reference

Badge

Sets variant="destructive". The rest is on the Badge page.

All 20 badge examples