Token Component

Token Component#

Token is Phoenix's primary pill/tag UI primitive for displaying categorical labels and visual tags. It lives at app/src/components/token/Token.tsx and is exported through @phoenix/components . It is the project's in-house alternative to React Aria Tag components, with built-in theme awareness and a flexible callback-driven interaction model.

Props & Variants#

The component interface supports four render modes, determined by which callback props are provided :

Mode	Props	Rendered structure
Default	—	Wrapped children
Interactive	`onPress`	Children inside a `<button>`
Removable	`onRemove`	Children + close icon `<button>`
Full Interactive	`onPress` + `onRemove`	Two sibling buttons

Key props:

color — any valid CSS color or CSS variable; defaults to var(--ac-global-color-grey-300) . The value is passed in via the --ac-internal-token-color CSS custom property .
size — "S" | "M" (default) | "L", maps to design-token heights .
leadingVisual — optional element prepended inside the token; suppressed on size "S" .
isDisabled — reduces opacity and disables interaction .

Theming#

Token appearance adapts to light/dark mode via useTheme() . In light mode, the background is the raw color value. In dark mode, the background is derived at reduced alpha and the text color is recalculated for contrast — all via CSS lch() relative color syntax .

Known Specialized Wrappers#

Rather than using Token directly in pages, Phoenix defines thin wrapper components that encapsulate color-mapping logic:

SpanKindToken — maps span kinds (llm, chain, retriever, reranker, embedding, agent, tool, evaluator, guardrail) to semantic colors (e.g., orange for llm, blue for chain). Used in SpansTable, TracesTable, and SpanHeader.
AnnotatorKindToken — renders HUMAN, LLM, or CODE annotation source labels in size "S", blue for human and orange for automated kinds. Used in SpanFeedback.
SequenceNumberToken — renders experiment sequence numbers (#N) as small yellow tokens. Used in ExperimentsTable, ExperimentCompareTable, and ExperimentsLineChart.
VersionLabel (inline in PromptVersionTagsList) — maps prompt version tag names (production, staging, development) to green, yellow, and blue respectively.

Import Path#

import { Token, TokenProps } from "@phoenix/components";
// or directly:
import { Token, TokenProps } from "@phoenix/components/token";

Both paths resolve to the same export .

Token Component#

Props & Variants#

The component interface supports four render modes, determined by which callback props are provided :

Mode	Props	Rendered structure
Default	—	Wrapped children
Interactive	`onPress`	Children inside a `<button>`
Removable	`onRemove`	Children + close icon `<button>`
Full Interactive	`onPress` + `onRemove`	Two sibling buttons

Key props:

color — any valid CSS color or CSS variable; defaults to var(--ac-global-color-grey-300) . The value is passed in via the --ac-internal-token-color CSS custom property .

size — "S" | "M" (default) | "L", maps to design-token heights .

leadingVisual — optional element prepended inside the token; suppressed on size "S" .

isDisabled — reduces opacity and disables interaction .

Theming#

Known Specialized Wrappers#

Rather than using Token directly in pages, Phoenix defines thin wrapper components that encapsulate color-mapping logic:

SpanKindToken — maps span kinds (llm, chain, retriever, reranker, embedding, agent, tool, evaluator, guardrail) to semantic colors (e.g., orange for llm, blue for chain). Used in SpansTable, TracesTable, and SpanHeader.

AnnotatorKindToken — renders HUMAN, LLM, or CODE annotation source labels in size "S", blue for human and orange for automated kinds. Used in SpanFeedback.

SequenceNumberToken — renders experiment sequence numbers (#N) as small yellow tokens. Used in ExperimentsTable, ExperimentCompareTable, and ExperimentsLineChart.

VersionLabel (inline in PromptVersionTagsList) — maps prompt version tag names (production, staging, development) to green, yellow, and blue respectively.

Import Path#

import { Token, TokenProps } from "@phoenix/components";
// or directly:
import { Token, TokenProps } from "@phoenix/components/token";

Both paths resolve to the same export .