Skip to content

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

Free

Badge with Icon on Right (Standard) for Solid

A default primary badge with the word Badge first and a star icon after it as a trailing mark.

UI library: Ark UI

The word Badge comes first, then a star. The badge uses the primary fill. The star is decorative.

Put the icon after the word when it says what happens next, such as an external arrow. An on and off filter is a Button. 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>
    Badge
    <StarIcon aria-hidden="true" data-icon="inline-end" />
  </Badge>

FAQ

How does the star sit after the label in Solid?

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.

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 after the word.

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

No extra props in this demo. The rest is on the Badge page.

All 20 badge examples