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.
// MUI Imports
import Chip from '@mui/material/Chip'
const ChipsVariants = () => {
return (
<div className='flex gap-4'>
<Chip label='Basic' />
<Chip label='Outlined' variant='outlined' />
<Chip label='Tonal' variant='tonal' />
</div>
)
}
export default ChipsVariants
Use disabled
prop for disabled chip.
// MUI Imports
import Chip from '@mui/material/Chip'
const ChipsDisabled = () => {
return (
<div className='flex gap-4'>
<Chip label='Basic' disabled />
<Chip label='Outlined' variant='outlined' disabled />
<Chip label='Tonal' variant='tonal' disabled />
</div>
)
}
export default ChipsDisabled
Use color
prop for different colored chips.
Filled Chips
Outlined Chips
Tonal Chips
// MUI Imports
import Chip from '@mui/material/Chip'
import Typography from '@mui/material/Typography'
const ChipsColors = () => {
return (
<div className='flex gap-4 flex-col'>
<Typography className='font-medium' color='text.primary'>
Filled Chips
</Typography>
<div className='flex gap-4 flex-wrap'>
<Chip label='Primary' color='primary' />
<Chip label='Secondary' color='secondary' />
<Chip label='Success' color='success' />
<Chip label='Error' color='error' />
<Chip label='Warning' color='warning' />
<Chip label='Info' color='info' />
</div>
<Typography className='font-medium' color='text.primary'>
Outlined Chips
</Typography>
<div className='flex gap-4 flex-wrap'>
<Chip label='Primary' color='primary' variant='outlined' />
<Chip label='Secondary' color='secondary' variant='outlined' />
<Chip label='Success' color='success' variant='outlined' />
<Chip label='Error' color='error' variant='outlined' />
<Chip label='Warning' color='warning' variant='outlined' />
<Chip label='Info' color='info' variant='outlined' />
</div>
<Typography className='font-medium' color='text.primary'>
Tonal Chips
</Typography>
<div className='flex gap-4 flex-wrap'>
<Chip label='Primary' color='primary' variant='tonal' />
<Chip label='Secondary' color='secondary' variant='tonal' />
<Chip label='Success' color='success' variant='tonal' />
<Chip label='Error' color='error' variant='tonal' />
<Chip label='Warning' color='warning' variant='tonal' />
<Chip label='Info' color='info' variant='tonal' />
</div>
</div>
)
}
export default ChipsColors
Use onDelete
prop for delete icon in a chip. Use deleteIcon
prop to change the default delete icon.
Default close with Outlined Variant
Custom close with Filled Variant
Custom close with Tonal Variant
// MUI Imports
import Chip from '@mui/material/Chip'
import Typography from '@mui/material/Typography'
const ChipsOnDelete = () => {
const handleDelete = () => {
// eslint-disable-next-line no-console
console.info('You clicked the delete icon.')
}
return (
<div className='flex gap-4 flex-col'>
<Typography className='font-medium' color='text.primary'>
Default close with Outlined Variant
</Typography>
<div className='flex gap-4'>
<Chip label='Basic' variant='outlined' onDelete={handleDelete} />
<Chip label='Primary' color='primary' variant='outlined' onDelete={handleDelete} />
<Chip label='Secondary' color='secondary' variant='outlined' onDelete={handleDelete} />
</div>
<Typography className='font-medium' color='text.primary'>
Custom close with Filled Variant
</Typography>
<div className='flex gap-4'>
<Chip label='Basic' onDelete={handleDelete} deleteIcon={<i className='ri-delete-bin-7-line' />} />
<Chip
label='Primary'
color='primary'
onDelete={handleDelete}
deleteIcon={<i className='ri-delete-bin-7-line' />}
/>
<Chip
label='Secondary'
color='secondary'
onDelete={handleDelete}
deleteIcon={<i className='ri-delete-bin-7-line' />}
/>
</div>
<Typography className='font-medium' color='text.primary'>
Custom close with Tonal Variant
</Typography>
<div className='flex gap-4'>
<Chip
label='Default'
variant='tonal'
onDelete={handleDelete}
deleteIcon={<i className='ri-delete-bin-5-line' />}
/>
<Chip
label='Primary'
color='primary'
variant='tonal'
onDelete={handleDelete}
deleteIcon={<i className='ri-delete-bin-5-line' />}
/>
<Chip
label='Secondary'
color='secondary'
variant='tonal'
onDelete={handleDelete}
deleteIcon={<i className='ri-delete-bin-5-line' />}
/>
</div>
</div>
)
}
export default ChipsOnDelete
Use size='small'
prop for small chip.
// MUI Imports
import Chip from '@mui/material/Chip'
const ChipsSizes = () => {
return (
<div className='flex items-center gap-4'>
<Chip label='Medium' />
<Chip label='Small' size='small' />
</div>
)
}
export default ChipsSizes
You can make any chip clickable by adding clickable
prop and use component='a'
to make it a link.
// MUI Imports
import Chip from '@mui/material/Chip'
const ChipsClickable = () => {
const handleClick = () => {
console.info('You clicked the Chip.')
}
return (
<div className='flex gap-4'>
<Chip label='Clickable' onClick={handleClick} />
<Chip label='Clickable Link' component='a' href='https://themeselection.com/' target='_blank' clickable />
</div>
)
}
export default ChipsClickable
Use Avatar
component inside avatar
prop for a chip with avatar.
// MUI Imports
import Chip from '@mui/material/Chip'
import Avatar from '@mui/material/Avatar'
const ChipsAvatar = () => {
return (
<div className='flex gap-4 flex-wrap'>
<Chip label='Default' avatar={<Avatar />} />
<Chip label='Howard Paul' avatar={<Avatar src='/images/avatars/7.png' alt='User Avatar' />} />
<Chip label='Maurice Bell' avatar={<Avatar>M</Avatar>} />
<Chip
label='Archived'
avatar={
<Avatar>
<i className='ri-archive-line' />
</Avatar>
}
/>
</div>
)
}
export default ChipsAvatar
Use icon
prop for an icon inside a chip.
// MUI Imports
import Chip from '@mui/material/Chip'
const ChipsIcon = () => {
return (
<div className='flex gap-4'>
<Chip label='Low Battery' color='primary' icon={<i className='ri-battery-line' />} />
<Chip label='Charging' color='primary' variant='outlined' icon={<i className='ri-battery-charge-line' />} />
<Chip label='Full Battery' color='primary' variant='tonal' icon={<i className='ri-battery-fill' />} />
</div>
)
}
export default ChipsIcon
You can make a list of chips that can make some or all chips deletable.
- TSX
- JS
// React Imports
import { useState } from 'react'
// MUI Imports
import Chip from '@mui/material/Chip'
import Avatar from '@mui/material/Avatar'
type ChipData = {
key: number
label: string
avatar?: string
avatarAlt?: string
}
const data: ChipData[] = [
{ key: 0, avatar: '/images/avatars/1.png', avatarAlt: 'User Avatar', label: 'Norman Santiago' },
{ key: 1, avatar: '/images/avatars/2.png', avatarAlt: 'User Avatar', label: 'Cecelia Tucker' },
{ key: 2, label: 'Max Burns' },
{ key: 3, avatar: '/images/avatars/4.png', avatarAlt: 'User Avatar', label: 'Ellen Nguyen' },
{ key: 4, avatar: '/images/avatars/5.png', avatarAlt: 'User Avatar', label: 'Edward Francis' }
]
// Separate component for rendering each chip
const ChipItem = ({ data, onDelete }: { data: ChipData; onDelete?: () => void }) => {
const avatarUrl = data.avatar ? data.avatar : undefined
return (
<Chip
key={data.key}
label={data.label}
avatar={avatarUrl ? <Avatar src={avatarUrl} alt={data.avatarAlt} /> : <></>}
onDelete={onDelete}
/>
)
}
const ChipsArray = () => {
// States
const [chipData, setChipData] = useState<ChipData[]>(data)
const handleDelete = (chipToDelete: ChipData) => () => {
setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key))
}
return (
<div className='flex gap-4 flex-wrap'>
{chipData.map(data => (
<ChipItem key={data.key} data={data} onDelete={data.key === 2 ? undefined : handleDelete(data)} />
))}
</div>
)
}
export default ChipsArray
// React Imports
import { useState } from 'react'
// MUI Imports
import Chip from '@mui/material/Chip'
import Avatar from '@mui/material/Avatar'
const data = [
{ key: 0, avatar: '/images/avatars/1.png', avatarAlt: 'User Avatar', label: 'Norman Santiago' },
{ key: 1, avatar: '/images/avatars/2.png', avatarAlt: 'User Avatar', label: 'Cecelia Tucker' },
{ key: 2, label: 'Max Burns' },
{ key: 3, avatar: '/images/avatars/4.png', avatarAlt: 'User Avatar', label: 'Ellen Nguyen' },
{ key: 4, avatar: '/images/avatars/5.png', avatarAlt: 'User Avatar', label: 'Edward Francis' }
]
// Separate component for rendering each chip
const ChipItem = ({ data, onDelete }) => {
const avatarUrl = data.avatar ? data.avatar : undefined
return (
<Chip
key={data.key}
label={data.label}
avatar={avatarUrl ? <Avatar src={avatarUrl} alt={data.avatarAlt} /> : <></>}
onDelete={onDelete}
/>
)
}
const ChipsArray = () => {
// States
const [chipData, setChipData] = useState(data)
const handleDelete = chipToDelete => () => {
setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key))
}
return (
<div className='flex gap-4 flex-wrap'>
{chipData.map(data => (
<ChipItem key={data.key} data={data} onDelete={data.key === 2 ? undefined : handleDelete(data)} />
))}
</div>
)
}
export default ChipsArray