Chip
标签
A small rounded pill holding a few words — sometimes selectable, sometimes purely a label.
Live Demo
Actually clickableFiltered by: Portraits
What you just saw:Topic tags on a social feed, labels on GitHub, the filter pills above a search results page, the "keyword ✕" entries already filled into an input.
What it actually is
Chips have two distinct uses that are easy to confuse: an input chip is interactive (filterable, selectable, removable), while a display chip is a read-only label for a category or status. When you see a pill in a UI, first work out whether it is clickable.
Anatomy · What it's made of
Container胶囊体
Fully rounded, padding 6px 12px
Label文字
12–14px
Selected选中态
Filled with the primary color or marked with a check
Remove删除
The ✕ in input scenarios
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Multi-select filtering (several conditions active at once) | Yes |
| Showing the category or status of content | Yes |
| Showing selected tags inside an input, removable | Yes |
| Marking a primary action | No |
| Acting as a button that navigates somewhere | No |
A chip with no close button cannot be undone — users get trapped in the filter. A filterable chip must be removable.
Do not pile on too many selectable chips; they smear into a wall and nobody knows where to tap.
Similar Patterns
Don't mix these upChipCurrent
标签
A small rounded pill holding a few words — sometimes selectable, sometimes purely a label.
Badge
角标
A tiny marker pinned to the corner of an icon or avatar that says "there is something you need to look at".
In one line:A small rounded pill holding a few words — sometimes selectable, sometimes purely a label.
Badge
角标
A tiny marker pinned to the corner of an icon or avatar that says "there is something you need to look at".
Segmented Control
分段控件
A row of small buttons packed shoulder to shoulder, one of them selected, so the control looks "segmented".
Select
下拉选择器
A box that opens downward into a list of options and collapses again once you pick one.
File Upload
文件上传
Lets the user get a file from their device into your app, with progress, cancellation, and retry along the way.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a group of filterable chips: All / Portrait / Landscape / Night. Multiple selections are allowed, the selected state fills with the primary color, and the filtered results update live.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a few tags.
Say this instead
Add a group of filterable chips (multi-select): light gray when unselected, solid dark fill when selected with aria-checked kept in sync, tapping again to clear, and results filtering live.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.