Brand
Changelog v1.4

Chip

Chips represent compact elements like tags, filters, contacts, or action choices.

Filled

Default
Primary
Secondary
Success
Warning
Error
Info

Outlined

Default
Primary
Secondary
Success
Warning
Error

Sizes

Small
Medium

Deletable

React
TypeScript
Astro

Clickable

Clickable
Click + Delete

Usage

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

<Chip label="React" color="primary" />
<Chip label="Deletable" onDelete={() => {}} />
<Chip label="Outlined" variant="outlined" />