Badge

kai-badge

A small pill for labels, statuses, counts, and inline citation markers. Put the content as light-DOM text; variant picks the look.

• Shadow DOM
• 3 variants
• Light-DOM content
• 1 part

Preview

When to use

Tag a feature as Beta, mark a model’s status, show an unread count on a panel, or drop a numbered marker beside an inline citation. For the citation chips those markers point at, see Sources.

Usage

Put the label or number as light-DOM text inside the element, then set variant to pick the look — a muted pill, a compact count, or a filled citation marker. The badge sizes to its content; place it wherever it belongs in your layout.

<kai-badge>Beta</kai-badge>
<kai-badge variant="count">3</kai-badge>
<kai-badge variant="citation">1</kai-badge>

Examples

Default

A muted pill for labels and statuses.

Code

Count

count is a compact badge for unread counts and other small numbers.

Code

Citation

citation is a filled primary marker for inline citation references.

Code

Styling

Restyle the pill through its part — change the background, color, or shape; variant only sets the defaults.

Part	Purpose	Example
badge	The badge pill. Restyle its background, color, or shape; the `variant` prop (default/count/citation) sets the defaults.	kai-badge::part(badge) { background: var(--color-primary); color: var(--color-primary-foreground) }

Props

Property	Type	Default	Notes
variant	"default" | "count" | "citation"	'default'	`default` (muted pill) · `count` (compact number badge) · `citation` (filled primary, for inline citation markers). Defaults to `default`.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

Badge

---

Need a hand? Report a bug Ask for help