Chip.

Monospace chip for code values and field names in text.

ContentAtomNo dependencies Beautiful UI, MIT

Every weekly report is keyed by client_id and pulled once per day. Set utm_campaign before the draft goes out; if ga4_property is missing, the report falls back to last week's source.

Tokens · brand_voice.yaml · draft_214

Install

01
Import the foundation once

foundation.css holds the tokens every component reads.
Layout.astro
```
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```
02
Copy Chip.astro

Paste into src/components/viewership/chip/
- Chip.astro

Use it

Page.astro

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

<Chip />

Props 1

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

Source 1 file

src/components/viewership/chip/Chip.astro 49 lines

---
/**
 * 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>

Ported from Beautiful UI, MIT. Notices.