Skip to content

Chip

Chip generates a compact element that can represent an input, attribute, or action.

MUI Joy Chip
<Chip>
  ...
</Chip>

color

size

disabled

children

Decorators

Specify the startDecorator prop or endDecorator prop as a ReactNode to the Chip to display the decorators.

Today is sunny
Tomorrow is cloudy
<Chip variant="soft" startDecorator={<Sun />}>
  Today is sunny
</Chip>
<Chip variant="soft" startDecorator={<Cloud />}>
  Tomorrow is cloudy
</Chip>

Delete button

The Chip has a complementary component called ChipDelete. Use it for the purpose of deletable Chip components. The variant of the ChipDelete changes based on the parent Chip unless you specify a specific variant to it.

Remove
Delete
<Chip variant="outlined" endDecorator={<ChipDelete />}>
  Remove
</Chip>
<Chip variant="soft" endDecorator={<ChipDelete variant="plain" />}>
  Delete
</Chip>

Clickable

Specify the onClick prop in order to enable the clickability of the Chip component.

Mark
<Chip
  variant="outlined"
  color="neutral"
  size="lg"
  startDecorator={<Avatar size="sm" src={`/static/images/avatar/1.jpg`} />}
  endDecorator={<CheckIcon fontSize="md" sx={{ mr: 0.25 }} />}
  onClick={() => alert('You clicked the Joy Chip!')}
>
  Mark
</Chip>

Clickable and Deletable

Specify the onClick prop on the ChipDelete to trigger some action.

Clear
<Chip
  variant="outlined"
  color="danger"
  onClick={handleClick}
  endDecorator={
    <ChipDelete color="danger" variant="plain" onClick={handleClick}>
      <DeleteForever />
    </ChipDelete>
  }
>
  Clear
</Chip>

Component variables

The Chip component contains these CSS variables to communicate with ChipDelete and Avatar components. The demo below demonstrates the customization of a chip using the variables through the sx prop.

Person name
Person name

CSS variables

px

Default as 32px

px

Default as 24px

px

Default as 6px

px

Default as 12px

px

<Chip
  startDecorator={<Avatar />}
  endDecorator={<ChipDelete />}
>

With checkbox

You can wrap the Joy Checkbox component with the Joy Chip component.

Favorite Movies

With Radio

You can wrap the Joy Radio component with the Joy Chip component.

Best Movie

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.