Chips
Please refer to MUI's official docs for more details on component's usage guide and API documentation.
Chip Variants
Use variant='outlined' prop with Chip component for outlined chip.
Basic
Outlined
Tonal
Disabled Chips
Use disabled prop for disabled chip.
Basic
Outlined
Tonal
Colors
Use color prop for different colored chips.
Filled Chips
Primary
Secondary
Success
Error
Warning
Info
Outlined Chips
Primary
Secondary
Success
Error
Warning
Info
Tonal Chips
Primary
Secondary
Success
Error
Warning
Info
onDelete
Use onDelete prop for delete icon in a chip. Use deleteIcon prop to change the default delete icon.
Default
Basic
Primary
Secondary
Custom
Basic
Primary
Secondary
Custom close with Tonal Variant
Default
Primary
Secondary
Chip Sizes
Use size='small' prop for small chip.
Medium
Small
Clickable Chip
You can make any chip clickable by adding clickable prop and use component='a' to make it a link.
Clickable
Clickable Link
Chip with Avatar
Use Avatar component inside avatar prop for a chip with avatar.
Default
M
Maurice BellArchived
Icon Chip
Use icon prop for an icon inside a chip.
Low Battery
Charging
Full Battery
Chips Array
You can make a list of chips that can make some or all chips deletable.
Max Burns
