Chip

In UI Chips (also called pills) are small, interactive elements that represent a piece of information, such as a tag, category, or action.

Demo

Variants

Primary

For chips there's no real limit on how many "primary" you can have, but as a general rule of thumb you should try and limit them to a small number on any one page. This is because they are the most visually prominent and should be used for the most important information.

Examples of this include:

• "New" tags in menu items
• "Important" tags in a list of items

Try not to use primary chips for:

• Every single item in a list
• Items that are not important

Primary is your default variant in a chip.

Secondary

For everything else, there's secondary. This should be your "go to" in nitpick for anything that isn't important enough to be a primary chip.

Outlined

Outlined chips serve a similar purpose to outlined buttons, they are used to denote a third option apart from a primary and secondary (tertiary, if you will), but most often in a stylistic choice.

You may want an outlined chip for:

• Call To Action elements
• Denoting a third option apart from a primary and secondary (tertiary, if you will)
• Stylistic purposes

Try not to:

• Overly mix all three chip styles in an application UI
• Have no real functional difference between the three on the page where using two was easily as possible.

Accent

Accent chips are often used as CTA's or a positively encouraged notice for the user.

Danger

This one's easy, don't delete your account by accident! Use this for destructive actions.

Adornments

You can also add icons and other elements to your Chips to make them more interactive and visually appealing using the startAdornment and endAdornment props.

Sizes

Chips can be small, medium, or large. The default size is medium.

Inline

You may notice through usage that by default a chip applies a display: flex style to itself. This is for layout purposes as most chips are used in a flex container. If you want to use a chip in an inline context, you can set the inline prop to true. This will swap it to an inline-flex display style.

Should you need further customisation you can use the rootClassName prop from the next example.

Custom Styles

You can also pass a rootClassName prop to the chip to apply custom styles to the root element.