EntityChip

An inline reference to an outlet, person or record: a coloured monogram disc plus the name in a soft pill.

When to use

• Naming entities inside running text, such as an agent's summary ("Agora Business Review bounced twice").
• When the reader benefits from recognising the same entity by colour across a paragraph.
• Monogram is exported too: the bare coloured disc for headings or list rows.
• Use Avatar for a person's photo/initials outside text, ValuePill for plain values, Chip for code tokens, and StatusPill when the reference carries a state.

Usage

import { EntityChip } from "@/components/iris/entity-chip/entity-chip";

h("p", null, h(EntityChip, { name: "Wirtschaftsbrief", color: "var(--accent)" }), " was sent in wave 1 at 08:00.");
h(EntityChip, { name: "Myrto Lekka", monogram: "ML", color: "var(--green)" });
h(Monogram, { color: "var(--accent)" }, "W");

Props

Prop	Type	Default	Description
name	string	— (required)	Entity name shown in the pill; its first character is the default monogram.
color	string	var(--orange)	Any CSS colour for the disc; prefer tokens such as var(--accent), var(--green), var(--red).
monogram	ReactNode	name.charAt(0)	Custom glyph in the disc (initials, #, a tiny icon).
className	string	—	Extra classes on the pill.

Monogram props: children (glyph), color (default var(--orange)), className.

Notes

• Purely presentational spans; wrap it in a link or button if it should navigate. The disc is not hidden from assistive tech, so the monogram is read before the name — keep it short.
• The disc text is white, so choose a color with enough contrast in both themes.
• Uses --field for the pill, --shadow-hairline for its edge and --ink for the 12px name.