Skip to content

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
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
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
Delete
Press Enter to start editing

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
Press Enter to start editing

Clickable

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

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

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