Chip

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

<Chip onClick={() => {}} />

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" />}
  onClick={() => alert('You clicked the Joy Chip!')}
>
  Mark
</Chip>

As link

Pass component prop to the action slot to change from button to anchor tag. The rest of the props are spread to the DOM.

<Chip componentsProps={{ action: { component: 'a', href: '#as-link' } }}>
  Anchor chip
</Chip>

Clickable and Deletable

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

<Chip
  variant="outlined"
  color="danger"
  onClick={() => alert('You clicked the chip!')}
  endDecorator={
    <ChipDelete
      color="danger"
      variant="plain"
      onClick={() => alert('You clicked the delete button!')}
    >
      <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.