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>

Examples

Building the preview surface

Chip.Preview renders nothing itself. renderWithPreview hands you the badge and the preview content and lets you decide what surface they go in, which is what keeps a floating-UI dependency out of the package.

Whatever you build there inherits the hover-card obligations: it opens on keyboard focus as well as hover, and Escape dismisses it. A CSS-only :hover panel looks right and cannot be reached without a pointer.

Cited and . Tab to a chip, or hover it.

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. Flows with the surrounding text rather than breaking the line box, and lifts a Chip.Preview child into whatever surface renderWithPreview builds. Renders a <span> element.

PropTypeDefault
variantstring
undefined
renderWithPreview(badge: ReactElement, preview: ReactNode) => ReactNode
—
AttributeValuesDetails
data-chip—
data-variant"primary" | "accent" | "warning"

Chip.Icon

Leading inline icon, baseline-aligned to the label and aria-hidden, so decoration stays out of the chip's accessible name. Renders a <span> element.

Chip.Label

The chip's text, which reads as part of the sentence around it. Renders a <span> element.

Chip.Preview

Marker child whose content becomes the preview body. Renders nothing inline: Chip.Root inspects its children and routes this through renderWithPreview, so the package never owns a popup.

PropTypeDefault
childrenReactNode
(required)