# Badge

A small pill for labels, statuses, counts, and inline citation markers.

<p class="kai-tag-sub">kai-badge</p>

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

## Preview

> **tip:** 
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](/components/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.

```html
<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.

### Count

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

### Citation

`citation` is a filled primary marker for inline citation references.

## Styling

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

## Props

## Composed from