SayUI
← Library→ Turn this into a prompt
Content & display

Tag / Chip

Compact labels for categories, filters, or metadata—sometimes removable.

Also known as chip · pill · label token

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Tag / Chip".

Render category tags on the card and a removable filter chip row above the list; each remove control must have an accessible name and update the filter state.

Anatomy:
- label: Short text; optional leading icon.
- remove control: Optional × for dismissible filter chips.

Preferred API / pattern: `shadcn Badge variants / custom chips`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Closable tag with × only and no accessible name.
  • ○Avoid: Long tag text wrapping into multi-line chips
  • ○Avoid: Tags that look clickable but aren't

In plain wordsHow people search for it

“those little pills under a post for categories”“filter chips I can turn on and off”“small labels like 'Design' or 'Urgent' on a card”

AnatomyOpen for part names

label
Short text; optional leading icon.
remove control
Optional × for dismissible filter chips.

How to write itOpen for stack patterns

Web (HTML/CSS)span / button chips
React + Tailwind + shadcn/uishadcn Badge variants / custom chips
SwiftUIcustom capsule labels
Ant Design<Tag> / <Tag closable>

Notes

Tags describe; chips often filter or edit. Keep text short. Removable chips need a real button with an accessible name ('Remove Design filter'), not a naked ×. Don't confuse status tags with clickable filters—affordances should differ.

Common mistakesHumans and models trip here

  • Closable tag with × only and no accessible name.
  • Long tag text wrapping into multi-line chips: truncate or wrap the group.
  • Tags that look clickable but aren't: match affordance to behavior.

More failure symptoms on AI broke it.

Related patterns

BadgeA compact count or status mark attached to an icon, tab, or label.Select / ComboboxA form control for choosing one (or more) options from a list.CardA contained surface grouping related content and actions as one unit.

Spotted a wrong name or missing pattern?

Message on X