Chip
The Chip component is a compact, clickable selector used for filtering or toggling options. It provides an inline way to make quick selections, optionally paired with a dropdown for more choices.
tsx
Variants
Three visual styles: filled (default), outline (border only), and ghost (no background).
With Icon
Displays a leading icon at 12px. Only shown when hasDropdown is false.
With Dropdown
Wrap in a DropdownMenuTrigger with asChild and set hasDropdown. Shows a pressed state when the menu is open.
Disabled
All variants support the disabled state via the native disabled attribute.