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.

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>
<Chip>This is a chip</Chip>

Press Enter to start editing

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>
<Chip variant="soft" startDecorator={<Sun />}>
  Today is sunny
</Chip>
<Chip variant="soft" startDecorator={<Cloud />}>
  Tomorrow is cloudy
</Chip>

Press Enter to start editing

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

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

Press Enter to start editing

As a link

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

Press Enter to start editing

Clickable

To make chips clikcable, 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>
<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>

Press Enter to start editing

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

Press Enter to start editing

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.

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.

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

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

CSS Variables

--Chip-minHeight

--Chip-radius

--Chip-gap

--Chip-paddingInline

--Chip-decorator-childHeight

Chip

Introduction

Playground

Component

Basic usage

Decorators

Delete button

As a link

Clickable

Clickable and deletable

With radio

Best Movie

With a checkbox

CSS variables