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.
![User Avatar](/vuexy-nextjs-admin-template/documentation/images/avatars/7.png)
Use icon
prop for an icon inside a chip.
You can make a list of chips that can make some or all chips deletable.
![User Avatar](/vuexy-nextjs-admin-template/documentation/images/avatars/1.png)
![User Avatar](/vuexy-nextjs-admin-template/documentation/images/avatars/2.png)
![User Avatar](/vuexy-nextjs-admin-template/documentation/images/avatars/4.png)
![User Avatar](/vuexy-nextjs-admin-template/documentation/images/avatars/5.png)
You need to add round='true'
to the CustomChip
component to use round chip.