Mention pill | Arcadia Design

Ask to read and the folder, then compare it with in, following.

import { AgentAvatar, MentionPill } from "@arcadia/ui";

<p {...sx("cmp-prose", cmp.prose)}>
  Ask <MentionPill leading={<AgentAvatar avatar={BUD} name="Bud" size={16} />} label="Bud" tone={`agent-${BUD.color}`} onClick={open} /> to
  read <MentionPill leading="file" label="src/engine/loop.ts" onClick={open} /> and
  the <MentionPill leading="folder" label="docs/" onClick={open} /> folder, then compare it with
  <MentionPill leading="chat" label="Fix smoke e2e" onClick={open} /> in
  <MentionPill leading="folder" label="lookout" tone="hue-green" onClick={open} />, following
  <MentionPill leading="skill" label="repo-hygiene" onClick={open} />.
</p>

TSX

import { MentionPill } from "@arcadia/ui";

<MentionPill leading="chat" label="Fix smoke e2e" onClick={open} />

A mention inside text: an agent, a file or folder, a chat, a project or a skill, as a 16px avatar or glyph and the target's name in medium weight. The pill is as tall as the line it sits on, so a message with pills wraps like one without. It stands for the whole @name the text holds, its avatar or glyph where the @ was. With onClick it is a button that opens the target.

An agent takes its avatar and its colour (agent-blue), a project its icon colour (hue-green). Everything else stays neutral, so colour means a who or a where, never a kind.

Examples

Tones

Every tone. A gray agent reads in the secondary text colour.

neutralagent-redagent-orangeagent-yellowagent-greenagent-cyanagent-blueagent-purpleagent-pinkagent-grayhue-redhue-yellowhue-greenhue-cyanhue-bluehue-purplehue-pink

import { MentionPill } from "@arcadia/ui";

<div {...sx("cmp-bar", cmp.bar)}>
  {TONES.map(t => (
    <MentionPill key={t} leading={t.startsWith("agent-") ? "agent" : t.startsWith("hue-") ? "folder" : "file"} label={t} tone={t} />
  ))}
</div>

Gone

muted steps a pill down when its target was deleted; its tooltip says it no longer exists.

As we said in .

import { MentionPill } from "@arcadia/ui";

<p {...sx("cmp-prose", cmp.prose)}>
  As we said in <MentionPill leading="chat" label="Old plan" muted onClick={open} />.
</p>

rootStyle takes where the pill sits and the knobs below, each a palette token. An editor that paints pills under its text sets the hover fill while the caret touches one.

--mention-pill-fg: PaintDefault var(--text-1); Label colour (the tone sets it).
--mention-pill-icon: PaintDefault var(--icon-2); Leading glyph colour (the tone sets it); an avatar keeps its own.
--mention-pill-hover: PaintDefault var(--fill-3); Fill under the pointer, or while the caret touches it in an editor.

The leading avatar or glyph is decorative; the label is the name. A pill with onClick is a real button, so it takes focus and Enter. A muted pill keeps its button and its name; its tooltip says the target no longer exists.

MentionPill

leadingrequired: IconName | ReactNode; What it points at, before the name: an icon name (framed and stroked by the text, in the glyph colour) or a node (an AgentAvatar at 16).
labelrequired: string; The target's name, as the text reads it after its @.
tone: MentionPillToneDefault "neutral"
muted: boolean; The target no longer exists: the pill steps down and says so in its tooltip.
onClick: (e: MouseEvent<HTMLElement>) => void; Opens the target. The pill renders as a button; without it, a span.
rootStyle: RootStyle<MentionPillKnobs>; Typed StyleX override: layout and the --mention-pill-* knobs.

Rest props go to HTMLAttributes<HTMLElement>.

Usage

Examples

Tones

Gone

Customising

Accessibility

API reference

MentionPill