Value Pill.

Inline badge that sets a value off from running text.

ContentAtomNo dependencies Beautiful UI, MIT

.md

Approve the draft within 9 days so it ships before the Spring Trail launch on Nov 18.

Bounce rate on the trail pack page hit 62.4%, and two links are broken.

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 ValuePill.astro

Paste into src/components/viewership/value-pill/
- ValuePill.astro

Use it

Page.astro

---
import ValuePill from "../components/viewership/value-pill/ValuePill.astro";
---

<ValuePill />

Props 1

Prop	Type	Default	Description
`tone`	`"neutral" \| "green" \| "orange" \| "red" \| "accent"`	`"neutral"`	Tint, ring and text color.

Source 1 file

src/components/viewership/value-pill/ValuePill.astro 66 lines

---
/**
 * ValuePill: inline badge that sets a plain value off from running text.
 *
 * Ported from Beautiful UI `components/atoms/ValuePill.tsx`
 * (MIT, © 2026 Shane Levine). Softer than a StatusPill (no dot) and not a
 * mono token (see Chip).
 *
 * @example
 * with a CTR of <ValuePill tone="green">4.1%</ValuePill>
 */
import type { HTMLAttributes } from "astro/types";

type Tone = "neutral" | "green" | "orange" | "red" | "accent";

type Props = HTMLAttributes<"span"> & {
  tone?: Tone;
};

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

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

<style>
  .vs-value-pill {
    display: inline-flex;
    align-items: center;
    margin: 0 2px;
    padding: 0 6px;
    border-radius: var(--vs-radius-pill);
    font-size: 12px;
    font-weight: 500;
    vertical-align: middle;
  }
  .vs-value-pill--neutral {
    background: var(--vs-field);
    color: var(--vs-ink-2);
    box-shadow: var(--vs-shadow-hairline);
  }
  .vs-value-pill--green {
    background: var(--vs-green-tint);
    color: var(--vs-green);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--vs-green) 28%, transparent);
  }
  .vs-value-pill--orange {
    background: var(--vs-orange-tint);
    color: var(--vs-orange);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--vs-orange) 28%, transparent);
  }
  .vs-value-pill--red {
    background: var(--vs-red-tint);
    color: var(--vs-red);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--vs-red) 28%, transparent);
  }
  .vs-value-pill--accent {
    background: var(--vs-accent-tint);
    color: var(--vs-accent-ink);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--vs-accent) 28%, transparent);
  }
  @media (forced-colors: active) {
    .vs-value-pill {
      outline: 1px solid CanvasText;
    }
  }
</style>

Ported from Beautiful UI, MIT. Notices.

Used by Recommendation Card