# Chip

> Monospace chip for code values and field names in text.

- **Slug:** `chip`
- **Kind:** atom · **Category:** Content
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/Chip.tsx) (MIT)
- **Docs page:** https://viewership.ai/ui/components/chip
- **All files in one bundle:** https://viewership.ai/ui/components/chip.bundle.txt
- **Structured JSON:** https://viewership.ai/ui/components/chip.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/ui/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/chip/`:

   - `Chip.astro` (raw: https://viewership.ai/ui/raw/chip/Chip.astro.txt)

npm packages: none.

## Usage

```astro
---
import Chip from "../components/viewership/chip/Chip.astro";
---

<Chip />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import Chip from "./Chip.astro";
---

<div class="card">
  <p>
    Every weekly report is keyed by <Chip>client_id</Chip> and pulled once per day. Set
    <Chip tone="accent">utm_campaign</Chip> before the draft goes out; if <Chip tone="orange">ga4_property</Chip>
    is missing, the report falls back to last week's source.
  </p>
  <p class="caption">Tokens · <Chip>brand_voice.yaml</Chip> · <Chip>draft_214</Chip></p>
</div>

<style>
  .card {
    max-width: 440px;
    margin: 0 auto;
    padding: 16px 18px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--vs-ink);
  }
  .caption {
    margin-top: 10px;
    font-size: 12px;
    color: var(--vs-ink-3);
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `"neutral" \| "accent" \| "orange"` | `"neutral"` | Background tint and text color. |

## Source

### `src/components/viewership/chip/Chip.astro`

```astro
---
/**
 * Chip: monospace token chip for code values like `utm_campaign`.
 *
 * Ported from Beautiful UI `components/atoms/Chip.tsx`
 * (MIT, © 2026 Shane Levine). Renders a <code> element.
 *
 * @example
 * Keyed by <Chip>client_id</Chip>
 */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"code"> & {
  tone?: "neutral" | "accent" | "orange";
};

const { tone = "neutral", class: className, ...rest } = Astro.props;
---

<code class:list={["vs-chip", `vs-chip--${tone}`, className]} {...rest}><slot /></code>

<style>
  .vs-chip {
    display: inline;
    padding: 2px 6px;
    border-radius: var(--vs-radius-chip);
    font-family: var(--vs-font-mono);
    font-size: 12px;
    line-height: 1;
    vertical-align: -1px;
  }
  .vs-chip--neutral {
    background: var(--vs-inset);
    color: var(--vs-ink-2);
  }
  .vs-chip--accent {
    background: var(--vs-accent-tint);
    color: var(--vs-accent-ink);
  }
  .vs-chip--orange {
    background: var(--vs-orange-tint);
    color: var(--vs-orange);
  }
  @media (forced-colors: active) {
    .vs-chip {
      outline: 1px solid CanvasText;
    }
  }
</style>
```