Skip to content
Edit this page

Chip

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

Introduction

Chips are most frequently used in two main use cases: as pills of informative content or as filtering options.

The badge component is most frequently used to signal status (online, offline, busy, etc) and whether there's notifications or not.

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

Playground

Component

After installation, you can start building with this component using the following basic elements:

import Chip from '@mui/joy/Chip';

export default function MyApp() {
  return <Chip>My chip</Chip>;
}

Basic usage

Chips comes with medium size, primary color, and solid variant set by default.

This is a chip
<Chip>This is a chip</Chip>

Decorators

Use the startDecorator and/or endDecorator props to add supporting icons to the chip.

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

To add a delete action inside a chip, use the complementary ChipDelete component. Note that its design will automatically adapt to the parent Chip.

import ChipDelete from '@mui/joy/ChipDelete';
Remove
Delete
Delete
<Chip
  size="sm"
  variant="outlined"
  color="danger"
  endDecorator={<ChipDelete />}
>
  Remove
</Chip>
<Chip variant="soft" color="danger" endDecorator={<ChipDelete />}>
  Delete
</Chip>
<Chip size="lg" variant="solid" color="danger" endDecorator={<ChipDelete />}>
  Delete
</Chip>

You can also use the chip component as a link by assigning a value of a to the component prop. Since links are the most appropriate component for navigating through pages, that's useful when you want the same chip design for a link.

Doing so will automatically change the rendered HTML tag from <div> to <a>.

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

Clickable

To make chips clickable, pass a function to the onClick prop.

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

Clickable and deletable

Use both the onClick prop and the complementary ChipDelete component to make a chip support two actions.

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

With radio

Common to filtering UIs, wrap the Radio component with the Chip to use them together. Use radios when you want to enable single selection.

Best Movie

With a checkbox

Similar to the above, wrap the Checkbox component with the Chip to use them together. Use checkboxes when you want to enable multiple selection.

Favorite Movies

CSS variables

Play around with all the CSS variables available in the slider component to see how the design changes.

You can use those to customize the component on both the sx prop and the theme.

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

CSS Variables

px
px
px
px
px