Chip

Chip is a small, non-submitting label for tags, filters, and metadata. Children render as the label through Text; variant selects primary, secondary, outline, or a foundation highlight name.

Optional addon accepts an icon or other node on the start or end side. The slot is aria-hidden because the label text should carry meaning. Base UI render can swap the root when the chip should look like a pill but behave as a link. On filled Button surfaces, chips often need data-mode="inverted" so contrast holds against the button fill.

When to useCopy Anchor Link

• Tags, filters, or status pills that do not commit work
• Compact metadata beside a row or inside a filter strip

When not to useCopy Anchor Link

• Activation that commits work → Button or ToggleButton
• Icon-only chrome with no label → IconButton
• Corner status on another control → Badge

RelatedCopy Anchor Link

• Button — labeled actions that commit
• ToggleButton — pressed-state filters that activate
• Badge — decorative corner status on a host

Common examplesCopy Anchor Link

Status pillCopy Anchor Link

Use filled primary, muted secondary, and one highlight for status — not a row of every highlight token. Reach for outline when the pill should sit quieter than a fill.

AddonCopy Anchor Link

addon is decorative and aria-hidden. Put meaning in the label. Default side is start; set addonPosition="end" when the glyph should trail.

As a linkCopy Anchor Link

render replaces the default div when the pill should navigate. Chip keeps pill chrome (data-no-link-style) and still is not a submit control — use Button when the action commits work.

Ask your agentCopy Anchor Link

Add a status chip on each invoice row — Paid, Pending, or Overdue. Keep labels to one word; use strong red only for overdue.