Tag

​

What it is

A compact, pill-shaped label standing for one entity’s attribute, category, or status — optionally with a leading icon and a delete control. It renders the underlying element’s own Chip unmodified; Titan’s theme supplies the shape, sizes, and semantic color intents.

​

Live example

​

Exports

Hand-confirmed props, from the underlying package’s own ChipProps type since Titan declares none of its own:

​

Vocabulary

The system says tag. Code and the design library both say chip. This is the same kind of alias as Table/DataGridPro — the docs use the reader-facing word, and the Exports table is where the mapping stays visible. “Primary” and “info” render identically. Confirmed in Chip.overrides.ts: filledPrimary and filledInfo both call the same filledChip(theme, "info") helper, and the equivalent is true for outlinedPrimary/outlinedInfo. There is no distinguishable “primary” Tag — say info, since that’s the intent it actually renders. “Default” means neutral. color="default" (the prop’s own default) renders Titan’s neutral tag via chip-neutral-* tokens. This page calls that intent neutral. “Secondary” is unstyled. Confirmed: Chip.overrides.ts defines filledDefault, filledPrimary, filledInfo, filledSuccess, filledWarning, filledError, and the matching outlined* keys — but no filledSecondary, outlinedSecondary, or colorSecondary exists anywhere in the file. color="secondary" renders with no token behind it — an unthemed default, not a Titan decision. This is the opposite of Badge, where color="secondary" is the one Titan deliberately routed to a neutral tint. The two components picked different color slots of the underlying element to carry “neutral” — Tag uses default, Badge uses secondary — so a Tag’s unstyled secondary is not a parity bug with Badge; it is simply a slot nobody themed.

​

Choose Tag when

• Labeling one attribute, category, or status of a record — something a reader would describe in a word or two.
• The value may need to be removed individually (a filter, a selected option) or clicked as a whole — the component’s own ChipsArray story is the demonstrated pattern for a removable set.

​

Choose something else when

​

Anatomy

​

Variants, sizes, and states

Hand-confirmed from Chip.overrides.ts and the component’s own stories — no per-component matrix emitter exists yet for this concept.

​

Edge and failure states

​

Tokens

Hand-confirmed from Chip.overrides.ts — no per-component token emitter exists yet for this concept, so this table is hand-confirmed rather than generated.

​

Composition

A Tag stands alone or in a wrapped row of several — the ChipsArray story is the demonstrated pattern for a removable set, such as a filter bar or a multi-select field’s chosen values. It also composes inside a table cell as a status column, or beside a heading as a record’s category.

​

Content

​

Accessibility

• No test file exists for Chip in the Titan checkout — every behavior below the demonstrated stories is unverified by automation.
• A clickable Tag needs a label that makes sense on its own, the same rule as any other control.
• Unconfirmed: whether the leading icon or avatar is marked decorative (aria-hidden). Nothing in source addresses it.
• Unconfirmed: the delete control’s keyboard behavior. This page has not independently verified it against the installed package’s rendered DOM.

​

Constraints

​

Known issues

​

Why it works this way

Tag, like Badge, is a bare pass-through component — its entire Titan-specific contribution lives in the override file. Collapsing “primary” and “info” into one rendered intent and giving “default” its own neutral tokens are real, deliberate choices recorded there. Leaving “secondary” out is not explained anywhere in source, which is why it’s recorded as a gap rather than assumed to be intentional.

​

Status

Package @invoca/titan-core, version 3.6.3. Single export: Chip. No deprecation marker or since field is recorded in source.

​

Related

Titan’s own utilization.md records 68 usages across 16 products — the heaviest adoption of any component in this category — led by manage-invoca-tags (11), ai-agent-studio (10), and ai-agent-template-management (7), with the remainder spread across ai-model-management, agent-management-v2, interaction-details, signal-validation, dashboards, signals, agent-management, call-review-flow, dashboard-management, manage-scorecards, dashboard-header, connect-apps, and manage-integrations.

• Badge — for a count or dot rather than a text label
• Card — for a whole bordered unit of content
• Button — including FilterButton, for a control that opens a menu of filter options