# Chip

`` **is** the design guide's chip idiom, packaged as a component
— the same badge you see as the topbar's `DEV` indicator, the version
chips, and inline status chips.
It is available in every MDX page without an import (part of the
[MDX component map](/reference/exports.md)), and exported from the
library root for use in custom components.

## Implementing badges

Every chip in the shell shares one typographic core. If you are
building a badge — in a custom component, a consuming site, or another
DreamLake surface — this is the spec, and `` renders it exactly:

| Property | Value |
| --- | --- |
| Font | `var(--font-doc-template-mono)` |
| Size / weight | `10px` / `600` |
| Tracking | `0.08em`, `line-height: 1.4` |
| Casing | `uppercase` |
| Padding / radius | `2px 7px` / `4px` |
| Border | `1px solid color-mix(in srgb, currentColor 45%, transparent)` — a hairline of the text color |
| Layout | `inline-flex`, vertically centered |

The three variants pick the text / fill pair from the
[theme tokens](/guides/theming.md), so they work in both modes:

| Variant | Text | Fill | Use for |
| --- | --- | --- | --- |
| `muted` (default) | `--color-doc-template-muted` | `--color-doc-template-chip` | Neutral labels, absent states. |
| `accent` | `--color-doc-template-accent` | `--color-doc-template-accent-soft` | Positive / active states. |
| `warn` | `--color-doc-template-warn` | `--color-doc-template-warn-soft` | Caution, in-progress, dev-only. |

### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'muted' \| 'accent' \| 'warn'` | `'muted'` | The text / fill color pair. |
| `onClick` | `() => void` | — | When set, renders a `<button type="button">` with a pointer cursor instead of a `<span>`. |
| `title` | `string` | — | Native tooltip. |
| `className`, `style` | — | — | Pass through; inline `style` wins over the base + variant styles, so one-off recolors are plain overrides. |
| …rest | button attributes | — | `aria-*` and any other button/span attributes are forwarded. |

### Custom colors

For a color outside the three variants, override via `style` — the
border is `currentColor`-derived, so it follows automatically:

```tsx

  passing

```

This is exactly how the shell's own
[`TestStatus`](/reference/components/status-table.md) badge gets its data-driven
pass/fail/skip colors — it renders through `` with style
overrides.

## Injecting badges

Three injection points, in order of how structural they are:

### 1. Topbar version chips (config)

The chips after the brand cluster come from the
[`versionChips`](/reference/config.md) config field — one
`{ label, version, dropdown? }` entry per chip; `dropdown: true` makes
it the version switcher:

```ts file="site.config.ts"
initDocs({
  site: {
    versionChips: [{ label: 'dockit', version: __DOCKIT_VERSION__, dropdown: true }],
  },
  // …
})
```

See [Topbar](/reference/components/topbar.md) for where they render and
[Releases & versioning](/guides/releases.md) for the manifest behind the
dropdown.

### 2. Standalone `VersionBadge` (component)

`VersionBadge` — the two-segment `[ label | v0.2.5 ]` chip — is
exported from the library root, so the version switcher can live
outside the topbar (a custom footer, a landing hero):

```tsx

```

Its segments follow the chip spec above; only the two-segment layout
is bespoke.

### 3. Inline in MDX (content)

`` is registered in the MDX component map, so any page on any
dockit site can drop a badge into prose with no import:

```mdx
The legacy importer is deprecated as of 0.3.
```

The legacy importer is deprecated as of 0.3.

For badges whose *content* is data, the worked example is
`` — the inline test-status chip from the lakeshore docs.
An MDX page injects it with just an id, and the chip fetches its state
from a CI-generated `/test-results.json`:

```mdx
The install path is covered by  in CI.
```

It degrades gracefully — a muted `unknown` chip when the id (or the
manifest) doesn't exist, as on this site. See
[StatusTable](/reference/components/status-table.md) for the full data pipeline.

Site-specific badge components follow the same route: build them on
`` and register them via the `mdxComponents`
[config field](/reference/config.md) so your pages can use them without
imports.

## Badges the shell already owns

Don't recreate these — they render automatically:

- **DEV badge** — the warn `DEV` chip in the topbar actions cluster
  while hidden pages are revealed (**Cmd+Shift+D**); clicking it turns
  the toggle off. See [Topbar](/reference/components/topbar.md).
- **Git-hash chip** — set `gitHash` in the site config and a mono
  commit-hash chip renders after the version chips.
- **Sidebar `draft` chip** — the "awaiting review" marker from the
  [`draft` frontmatter flag](/guides/authoring.md).