ValuePill

A soft inline pill that sets off a plain value (a date, amount, name or count) inside running text.

When to use

• Highlighting the values a reader scans for in a summary: due dates, amounts, percentages, plan names.
• Tinting a value by meaning: green for good, orange for attention, red for problems, accent for neutral emphasis.
• Use Badge for status labels outside prose, Chip for code tokens, EntityChip for people and records, and StatusPill when a dot-led state is needed.

Usage

import { ValuePill } from "@/components/iris/value-pill/value-pill";

h(
  "p",
  null,
  "Renewal is due on ",
  h(ValuePill, null, "3 Nov"),
  ", with ",
  h(ValuePill, { tone: "red" }, "$15.99"),
  " still unpaid.",
);

Props

Prop	Type	Default	Description
children	ReactNode	— (required)	The value.
tone	"neutral" | "green" | "orange" | "red" | "accent"	"neutral"	neutral uses --field with a hairline; the others use the matching --*-tint fill, text colour and a 28% ring.
className	string	—	Extra classes on the span.

Notes

• Presentational only. Colour is a hint: the text itself should carry the meaning ("18 h left", not just an orange pill).
• 12px medium weight, pill radius, small horizontal margin so it sits comfortably between words.