Chips
Compact interactive elements that represent inputs, attributes, or actions. Chips support selection, deletion, and can include icons for enhanced context.
Chip Variants
Default
DefaultPrimarySuccessWarningError
Filled
DefaultPrimarySuccessWarningError
Outlined
DefaultPrimarySuccessWarningError
Sizes
Small
sm
Medium
md (default)
Large
lg
With Icons
TagUserFeaturedVerifiedAlert
<Chip leftIcon={<Icon name="tag" size="sm" />} variant="filled">
Tag
</Chip>
<Chip leftIcon={<UserIcon />} variant="filled" color="primary">
User
</Chip>Deletable Chips
Use onDelete to allow users to remove chips.
DesignDevelopmentReactTypeScript
const [tags, setTags] = useState(['Design', 'Development']);
{tags.map(tag => (
<Chip
key={tag}
onDelete={() => removeTag(tag)}
variant="filled"
>
{tag}
</Chip>
))}Clickable & Selectable Chips
Use onClick and selected props for filter-style chip groups.
Filter by Technology
ReactVueAngularSvelte
Selected: react
const [selected, setSelected] = useState(['react']);
<Chip
selected={selected.includes('react')}
onClick={() => toggleSelection('react')}
leftIcon={selected.includes('react') ? <Icon name="check" /> : undefined}
>
React
</Chip>States
Default
Default
Hover me
Interactive
Selected
Selected
Disabled
Disabled
Best Practices
Do
ReactNode.js
Use chips for tags, filters, or selections
John Doe
Use chips with onDelete for user-added content
Don't
This is a very long chip label that wraps
Don't use overly long text in chips
Submit
Don't use chips as action buttons (use Button instead)