Chips
A chip component for displaying compact elements that can represent input, attribute, or action. Supports different variants, colors, sizes, and optional remove functionality. Perfect for tags, filters, and selections.
Installation
Import
Usage
Use Chip for tags, filters, and selections. Enable onRemove for removable chips. Use different variants to indicate state (solid for selected, outline for available). Size chips appropriately for their context. Group related chips visually.
Design Guidelines
Maintain consistent chip styling throughout your application. Use appropriate sizes for different contexts. Group related chips visually with consistent spacing. Use colors semantically. Provide clear visual feedback for interactive chips.
Basic Usage
Simple chips with different variants
Colors
Chips with different color schemes
Sizes
Chips with different sizes
Removable Chips
Chips with remove functionality
Filter Chips
Using chips for filters
Tag Input
Chips representing selected tags
packages.sections.api
Component props and API reference This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. For detailed documentation and examples, see the Style Props documentation.
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
label | string | React.ReactNode | — | Content to display in the chip |
variant | "solid" | "outline" | "soft" | "solid" | Visual variant of the chip |
color | "primary" | "secondary" | "neutral" | "destructive" | "success" | "warning" | "info" | "neutral" | Color scheme of the chip |
chipSize | "sm" | "md" | "lg" | "xl" | "md" | Size of the chip |
onRemove | (event: React.MouseEvent<SVGSVGElement>) => void | — | Callback fired when the remove icon is clicked |
className | string | — | packages.commonProps.className.description |
Accessibility
Accessibility features and considerations
Chips include proper ARIA attributes. Removable chips have accessible remove buttons. Ensure chip labels are descriptive. Use color in combination with text, not alone. Screen readers will announce chip content and actions.