Badge

<Badge>Default</Badge>
<Badge tone="success" variant="soft">Active</Badge>
<Badge tone="danger" variant="solid" size="sm">3</Badge>

Install: @helixui/core

import { Badge } from '@helixui/core'

status: stable · since: 0.1.0

Tags: label, count, status, pill, chip

Live playground

Open the full editor or source on GitHub.

Anatomy

( New )   ( 3 )   ( beta )   ← small pill of text

Layout

display — inline-block
width — content
height — content
intrinsicSize — ~16-22px tall, hugs text
stackable — true
fullBleed — false

Visual

A small pill (radius.full) with a tone-tinted background and matching foreground text. Compact font (font.size.xs) with semibold weight. Solid / soft / outline variants control emphasis. Often used inline next to a heading or appended to a list item.

Props

Name	Type	Default	Description
`tone`	`'neutral' \| 'brand' \| 'danger' \| 'success' \| 'warning'`	`neutral`	Color intent.
`variant`	`'soft' \| 'solid' \| 'outline'`	`soft`	Visual treatment.
`size`	`'sm' \| 'md' \| 'lg'`	`md`	Badge size. `sm` for compact inline chips, `md` for section eyebrows / statuses, `lg` for prominent hero / featured-card headers (uppercase by default).

Tokens used

color.bg.action.brand.subtle, color.bg.action.brand.default, color.bg.action.danger.subtle, color.bg.action.danger.default, color.bg.action.success.subtle, color.bg.action.success.default, color.bg.action.warning.subtle, color.bg.action.warning.default, color.bg.action.neutral.default, color.bg.surface.inverse, color.text.action.brand, color.text.action.danger, color.text.action.success, color.text.action.warning, color.text.primary, color.text.inverse, color.text.on.brand, color.text.on.danger, color.text.on.success, color.text.on.warning, radius.full, space.1, space.2, space.3

Accessibility

Notes

Color alone is not enough — pair the tone with a clear text label.
For dynamic counts, place the badge near content it relates to via aria-describedby.

Composes with

Component	Relation	Note
`Sidebar`	`child`	Often appears as `Sidebar.Item.trailing`.
`List`	`child`	Common in trailing slot of a List row.
`Tabs`	`child`	Counts next to tab labels.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

tag a feature as new

“a green New badge”

<Badge tone="success">New</Badge>

unread count

“show “12” as a count badge”

<Badge tone="brand" variant="solid">12</Badge>