Chips
Please refer to MUI's official docs for more details on component's usage guide and API documentation.
Use variant='outlined' prop with Chip component for outlined chip.
Use disabled prop for disabled chip.
Use color prop for different colored chips.
Filled Chips
Outlined Chips
Tonal Chips
Use onDelete prop for delete icon in a chip. Use deleteIcon prop to change the default delete icon.
Default
Custom
Custom close with Tonal Variant
Custom close with Tonal Variant
Use size='small' prop for small chip.
You can make any chip clickable by adding clickable prop and use component='a' to make it a link.
Use Avatar component inside avatar prop for a chip with avatar.
Use icon prop for an icon inside a chip.
You can make a list of chips that can make some or all chips deletable.
You need to add round='true' to the CustomChip component to use round chip.