import Chip from '@mui/material/Chip';
// or
import { Chip } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.
Chips represent complex entities in small blocks, such as a contact.
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| avatar | element | - | The Avatar element to display. |
| children | unsupportedProp | - | This prop isn’t supported. Use the component prop if you need to change the children structure. |
| classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
| clickable | bool | - | If true, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If false, the chip will not appear clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. Note: this controls the UI and does not affect the onClick event. |
| color | ‘default’ | ‘primary’ | ‘secondary’ | ‘error’ | ‘info’ | ‘success’ | ‘warning’ | string | ‘default’ | The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. |
| component | elementType | - | The component used for the root node. Either a string to use a HTML element or a component. |
| deleteIcon | element | - | Override the default delete icon element. Shown only if onDelete is set. |
| disabled | bool | false | If true, the component is disabled. |
| icon | element | - | Icon element. |
| label | node | - | The content of the component. |
| onDelete | func | - | Callback fired when the delete icon is clicked. If set, the delete icon will be shown. |
| size | ‘medium’ | ‘small’ | string | ‘medium’ | The size of the component. |
| skipFocusWhenDisabled | bool | false | If true, allows the disabled chip to escape focus. If false, allows the disabled chip to receive focus. |
| sx | Array<func | object | bool> | func | object | - | The system prop that allows defining system overrides as well as additional CSS styles. See the sx page for more details. |
| variant | ‘filled’ | ‘outlined’ | string | ‘filled’ | The variant to use. |
The ref is forwarded to the root element.
You can use MuiChip to change the default props of this component with the theme.
(CSS classes table remains the same)
You can override the style of the component using one of these customization options:
styleOverrides property in a custom theme.If you did not find the information in this page, consider having a look at the implementation of the component for more detail.