# Inline elements

Three components live inside a sentence rather than between paragraphs: a status pill, a keyboard key, and a hover definition.

## Badge

A small status label: this feature is New, that flag is Deprecated, and this one is just a neutral Label.

```mdx
This feature is <Badge variant="new">New</Badge>.
```

An `icon` (a name from the bundled [Lucide set](/docs/components/icon)) renders before the label: New, Deprecated.

```mdx
<Badge variant="new" icon="sparkles">New</Badge>
```

| Variant        | Reads as                          |
| -------------- | --------------------------------- |
| unset          | Neutral label                     |
| `new`, `tip`   | Positive: fresh or recommended    |
| `note`, `info` | Informational                     |
| `warning`      | Caution: deprecated, experimental |
| `danger`       | Critical: removed, breaking       |
| `accent`       | Brand-colored emphasis            |

`color` is accepted as an alias for `variant`. An unknown value renders the neutral pill rather than a broken style.

## Kbd

Keyboard keys render as stamped keys: press Ctrl K to open search, or Esc to close it.

```mdx
Press <Kbd>Ctrl</Kbd> <Kbd>K</Kbd> to open search.
```

## Tooltip

A bundle gets its definition on hover or keyboard focus, with no JavaScript and no layout shift.

```mdx
A <Tooltip tip="A precompiled artifact holding...">bundle</Tooltip> gets its definition on hover.
```

The trigger is focusable and carries the tip as its accessible name, so the definition reaches keyboard and screen-reader users too.

Tooltips are for glosses a reader might want, never for content they need. Anything essential belongs in the sentence.