Badge

kai-badge

Takes its content as plain light-DOM text, so the host page’s CSS still reaches it.

• 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, or number an inline citation. For the citation chips those markers lead to, 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

Slots

Slot	Mode	Purpose
(default)	inject	The badge's label: text, or a small inline icon plus text.

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
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
variant	"default" | "count" | "citation"	'default'	Badge style; `default` is the muted pill.

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