Chip

A small monospace token for code values such as field names, IDs and flags, set inline in text.

When to use

• Naming a column, property, env var or identifier inside prose or an agent's explanation (updated_at).
• Highlighting the one token that matters with the accent tone, or a destructive/deprecated one with orange.
• Use ValuePill for plain values (dates, amounts), EntityChip for people and records, Badge for status, and CodeBlock for more than one token.

Usage

import { Chip } from "@/components/iris/chip/chip";

h(
  "p",
  null,
  "Grouped connections by ",
  h(Chip, { tone: "accent" }, "project_id"),
  " and sorted by ",
  h(Chip, null, "updated_at"),
  ".",
);

Props

Prop	Type	Default	Description
children	ReactNode	— (required)	The token text.
tone	"neutral" | "accent" | "orange"	"neutral"	neutral = --inset on --ink-2; accent = --accent-tint on --accent-ink; orange = --orange-tint on --orange.
className	string	—	Extra classes on the code element.

Notes

• Renders a native <code> element, so assistive tech and copy/paste treat it as code. It has no interactive behaviour.
• 12px --font-code (JetBrains Mono), 6px radius, tight padding; aligned to sit on the text baseline.
• The neutral tone is deliberately quiet on light surfaces; use accent when the token needs to stand out.