Kolay Asistan - Material Design React Admin Template

Chip Variants

Use variant='outlined' prop with Chip component for outlined chip.

Basic

Outlined

// ** MUI Imports
import Chip from '@mui/material/Chip'

const ChipsVariants = () => {
  return (
    <div className='demo-space-x'>
      <Chip label='Basic' />
      <Chip label='Outlined' variant='outlined' />
    </div>
  )
}

export default ChipsVariants

Disabled Chips

Use disabled prop for disabled chip.

Basic

Outlined

// ** MUI Imports
import Chip from '@mui/material/Chip'

const ChipsDisabled = () => {
  return (
    <div className='demo-space-x'>
      <Chip label='Basic' disabled />
      <Chip label='Outlined' variant='outlined' 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

// ** React Imports
import { Fragment } from 'react'

// ** MUI Imports
import Chip from '@mui/material/Chip'
import Typography from '@mui/material/Typography'

const ChipsColors = () => {
  return (
    <Fragment>
      <Typography sx={{ fontWeight: 500 }}>Filled Chips</Typography>
      <div className='demo-space-x'>
        <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 sx={{ mt: 4, fontWeight: 500 }}>Outlined Chips</Typography>
      <div className='demo-space-x'>
        <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>
    </Fragment>
  )
}

export default ChipsColors

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

// ** React Imports
import { Fragment } from 'react'

// ** MUI Imports
import Chip from '@mui/material/Chip'
import Typography from '@mui/material/Typography'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

const ChipsOnDelete = () => {
  const handleDelete = () => {
    console.info('You clicked the delete icon.')
  }

  return (
    <Fragment>
      <Typography sx={{ fontWeight: 500 }}>Default</Typography>
      <div className='demo-space-x'>
        <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 sx={{ mt: 4, fontWeight: 500 }}>Custom</Typography>
      <div className='demo-space-x'>
        <Chip label='Basic' onDelete={handleDelete} deleteIcon={<Icon icon='tabler:trash' />} />
        <Chip label='Primary' color='primary' onDelete={handleDelete} deleteIcon={<Icon icon='tabler:trash' />} />
        <Chip label='Secondary' color='secondary' onDelete={handleDelete} deleteIcon={<Icon icon='tabler:trash' />} />
      </div>
    </Fragment>
  )
}

export default ChipsOnDelete

Chip Sizes

Use size='small' prop for small chip.

Default

Small

// ** MUI Imports
import Chip from '@mui/material/Chip'

const ChipsSizes = () => {
  return (
    <div className='demo-space-x'>
      <Chip label='Default' />
      <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='demo-space-x'>
      <Chip label='Clickable' onClick={handleClick} />
      <Chip label='Clickable Link' component='a' href='https://pixinvent.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

Maurice Bell

Archived

// ** MUI Imports
import Chip from '@mui/material/Chip'
import Avatar from '@mui/material/Avatar'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

const ChipsAvatar = () => {
  return (
    <div className='demo-space-x'>
      <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>
            <Icon icon='tabler:archive' fontSize={20} />
          </Avatar>
        }
      />
    </div>
  )
}

export default ChipsAvatar

Icon Chip

Use icon prop for an icon inside a chip.

// ** MUI Imports
import Chip from '@mui/material/Chip'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

const ChipsIcon = () => {
  return (
    <div className='demo-space-x'>
      <Chip label='Previous' icon={<Icon icon='tabler:circle-chevron-left' fontSize={20} />} />
      <Chip
        label='Next'
        color='primary'
        variant='outlined'
        icon={<Icon icon='tabler:circle-chevron-right' fontSize={20} />}
      />
    </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

// ** React Imports
import { useState } from 'react'

// ** MUI Imports
import Chip from '@mui/material/Chip'
import Avatar from '@mui/material/Avatar'

interface ChipData {
  key: number
  label: string
  avatar?: string
  avatarAlt?: string
}

const ChipsArray = () => {
  // ** State
  const [chipData, setChipData] = useState<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 handleDelete = (chipToDelete: ChipData) => () => {
    setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key))
  }

  return (
    <div className='demo-space-x'>
      {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

Custom Light Chips

If you want to use light variant of the chips, you need to use our custom component with skin='light' prop.

Primary

Secondary

Success

Error

Warning

Info

// ** Custom Components Imports
import CustomChip from 'src/@core/components/mui/chip'

const ChipsCustomized = () => {
  return (
    <div className='demo-space-x'>
      <CustomChip label='Primary' skin='light' color='primary' />
      <CustomChip label='Secondary' skin='light' color='secondary' />
      <CustomChip label='Success' skin='light' color='success' />
      <CustomChip label='Error' skin='light' color='error' />
      <CustomChip label='Warning' skin='light' color='warning' />
      <CustomChip label='Info' skin='light' color='info' />
    </div>
  )
}

export default ChipsCustomized

Custom Rounded

Use prop rounded for a rounded chip.

Primary

Secondary

Success

Error

Warning

Info

// ** Custom Components Imports
import CustomChip from 'src/@core/components/mui/chip'

const ChipsRounded = () => {
  return (
    <div className='demo-space-x'>
      <CustomChip rounded label='Primary' skin='light' color='primary' />
      <CustomChip rounded label='Secondary' skin='light' color='secondary' />
      <CustomChip rounded label='Success' skin='light' color='success' />
      <CustomChip rounded label='Error' skin='light' color='error' />
      <CustomChip rounded label='Warning' skin='light' color='warning' />
      <CustomChip rounded label='Info' skin='light' color='info' />
    </div>
  )
}

export default ChipsRounded

Theme Customizer