Chip

A small label with an optional image, icon, or remove button.

import { Chip } from 'components/UI/Chip'

Content

A chip shows text, an icon and text, or an image and text. Use an image for a person or a team, and an icon for a product or a feature.

Text

BetaFree tierOpen source

Icon · products, features

SettingsFeature flagsSession replay

Image · people, teams

Night hog

Steve hog

Colors

Use white (the default) for neutral metadata, gray for a strong neutral label such as Deprecated, and a brand color when the label must stand out. The colors have no fixed meaning. Badge and Chip share these colors.

whitegraybrandbluecobaltcoralcorn-bluegreenlemonlimepurpletangerinetealvioletyellow

Solid and soft

Use solid (the default) for one label that must stand out. Use soft when there are many labels, such as tags in a list. White looks the same in both.

solid · one standout label

graybluegreentangerine

soft · many labels

graybluegreentangerine

Removable

Use a remove button for a filter or a selected value that the user can clear. Pass onRemove to add it.

Product analyticsSession replayFeature flags

Links

Pass href to make the chip a link. Internal links open in the app window, like the site Link. A link chip cannot have a remove button.

Night hog Docs GitHub

References with a preview

A chip that names a person, a team, or a post can show a preview card. Pass the card content in preview. With href, the chip uses PreviewCard, which opens on hover or keyboard focus. Without href, the chip is a button and uses Popover, which also opens on click and tap. The content mounts only when the card opens. This example reads a real profile and a real team from the community API. The chip and its card use the same request, so SWR sends it one time.

Link

IanWebsite

No link

In a sentence

Thanks Ian, that fixed it. The Website team owns this page.

Inline

Set size to inline to put a chip in a sentence, like a profile mention in a forum post. The chip takes the size of the text around it and does not break across lines.

Thanks Night hog, that fixed it. I also asked Steve hog (who wrote the docs) to take a look.

Small text: reply to Night hog.

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Choose the component from where the message sits and what the user does with it.

Component	Use it for
Badge	A status or category that the user reads, such as Beta.
Chip	A thing the user can open or act on, such as a person, a filter, or a selected value.
Note	Context inside content, such as a tip in a docs page.
Banner	A notice about the whole page, at the top. One at a time.
Toast	Brief feedback after an action.

When the children are not a string, pass removeLabel, so the remove button has a useful name.
The image is decorative. The text must name the chip.
On a link chip, a preview repeats or extends what the link target shows. Do not put actions or required information in it, because touch users do not see it. A chip without href can hold them, because its card opens on tap.

API

Chip is a site component, not a Base UI component. Without href, it takes all the props of a <span>. With href, it takes the props of the site Link.

Chip

Prop	Type	Default	Description
children	ReactNode	–	The label. Required.
href	string	–	Makes the chip a link. It renders the site Link, so internal links open in the app. For an external URL, pass externalNoIcon to open it in a new tab.
size	'md' \| 'inline'	'md'	inline sizes the chip to the text around it, for use in a sentence.
color	'white' \| 'gray' \| 'brand' \| 'blue' \| 'cobalt' \| 'coral' \| 'corn-blue' \| 'green' \| 'lemon' \| 'lime' \| 'purple' \| 'tangerine' \| 'teal' \| 'violet' \| 'yellow'	'white'	Sets the color: white, gray, or a PostHog brand color.
appearance	'solid' \| 'soft'	'solid'	Sets the fill and border of a color other than white.
icon	ReactNode	–	An icon before the text.
image	string	–	The URL of a round image before the text. It replaces the icon.
preview	ReactNode	–	The content of a card that opens on hover. With href, it is a PreviewCard. Without href, the chip becomes a button with a Popover. Load the data for the card inside this content, so the request starts when the card opens.
onRemove	() => void	–	Adds a remove button. A click on the button calls this function. Not with href, preview, or the inline size.
removeLabel	string	'Remove <text>'	The accessible name of the remove button.