Chip

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

<Chip>
  ...
</Chip>

Decorators

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

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

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

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

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

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

With checkbox

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

With Radio

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

Unstyled

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