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

---

// 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

Disabled Chips

Use disabled prop for disabled chip.

Basic

Outlined

Tonal

---

// 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

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

---

// 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

onDelete

Use onDelete prop for delete icon in a chip. Use deleteIcon prop to change the default delete icon.

Default close with Outlined Variant

Basic

Primary

Secondary

Custom close with Filled Variant

Basic

Primary

Secondary

Custom close with Tonal Variant

Default

Primary

Secondary

---

// 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

Chip Sizes

Use size='small' prop for small chip.

Medium

Small

---

// 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

Clickable Chip

You can make any chip clickable by adding clickable prop and use component='a' to make it a link.

Clickable

Clickable 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

Chip with Avatar

Use Avatar component inside avatar prop for a chip with avatar.

Default

Howard Paul

M

Maurice Bell

Archived

---

// 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

Icon Chip

Use icon prop for an icon inside a chip.

Low Battery

Charging

Full Battery

---

// 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

Chips Array

You can make a list of chips that can make some or all chips deletable.

Norman Santiago

Cecelia Tucker

Max Burns

Ellen Nguyen

Edward Francis

---

TSX

// 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' }
]

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 => (
        <Chip
          key={data.key}
          label={data.label}
          avatar={<Avatar src={data.avatar} alt={data.avatarAlt} />}
          onDelete={data.key === 2 ? undefined : handleDelete(data)}
        />
      ))}
    </div>
  )
}

export default ChipsArray

JS

// 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' }
]

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 => (
        <Chip
          key={data.key}
          label={data.label}
          avatar={<Avatar src={data.avatar} alt={data.avatarAlt} />}
          onDelete={data.key === 2 ? undefined : handleDelete(data)}
        />
      ))}
    </div>
  )
}

export default ChipsArray