Chip

An inline, text-flowing token — used for mentions in the composer and reconstructed chips in messages.

View as MarkdownPrimitive source

Pulled results from web-search and a documentHover shows a preview panel for the referenced item. reference, with one deprecated flag.

Usage guidelines

  • Inline token — flows with the surrounding text instead of breaking the line box.
  • Two homes — backs the composer's mention decorations and the chips a message reconstructs from its wire format.
  • Variants — primary / accent / warning tint the surface.
  • Hover preview — a Chip.Preview child promotes the chip to a hover card and is never rendered inline.
  • Get started — see Quick start to add the package.

Anatomy

<Chip.Root variant="accent">
  <Chip.Icon>{icon}</Chip.Icon>
  <Chip.Label>{label}</Chip.Label>
</Chip.Root>

With a hover preview — the Chip.Preview child is lifted into a hover card and never rendered inline:

<Chip.Root>
  <Chip.Label>{label}</Chip.Label>
  <Chip.Preview>
    <SourceCard source={source} />
  </Chip.Preview>
</Chip.Root>

Accessibility

The chip is inline text: in messages the label reads as part of the sentence, and Chip.Icon is aria-hidden so decoration never announces. In the composer's editor, committed chips carry an aria-label of {label}, {prefix} mention so they announce as atomic tokens rather than bare words.

The package never renders the hover preview — renderWithPreview is the seam. Whatever surface the styled layer lifts it into must honor the hover-card contract: open on keyboard focus as well as hover, and dismiss with Escape (a Base UI Hover Card, for instance, does both).

API reference

Every part accepts className, style, and render (see Styling) and emits a bespoke part attribute (data-<part>) unless noted.

Chip

The inline token surface. Renders data-chip. A Chip.Preview child wraps it in a hover card.

PropTypeDefault
variant"primary" | "accent" | "warning"
"primary"
AttributeValuesDescription
data-chip—The token element.
data-variant"primary" | "accent" | "warning"The active variant, for styling.

Chip.Icon

Leading inline icon, baseline-aligned to the label and aria-hidden. Renders data-chip-icon.

Chip.Label

The chip text. Renders data-chip-label.

Chip.Preview

Marker child — its content becomes the hover-card body. Renders nothing inline (logic-only); the root lifts it into the preview surface.

PropTypeDefault
childrenReactNode
(required)