Chip API
API reference docs for the React Chip component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
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 |
classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
clickable | bool | - | If |
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 |
disabled | bool | false | If |
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 |
slotProps | { label?: func | object, root?: func | object } | {} | The props used for each slot inside. |
slots | { label?: elementType, root?: elementType } | {} | The components used for each slot inside. |
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. |
ref
is forwarded to the root element.Theme default props
You can use MuiChip
to change the default props of this component with the theme.
Slot name | Class name | Default component | Description |
---|---|---|---|
root | .MuiChip-root | div | The component that renders the root. |
label | .MuiChip-label | span | The component that renders the label. |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
Class name | Rule name | Description |
---|---|---|
.Mui-disabled | State class applied to the root element if disabled={true} . | |
.Mui-focusVisible | State class applied to the root element if keyboard focused. | |
.MuiChip-avatar | avatar | Styles applied to the avatar element. |
.MuiChip-avatarColorPrimary | avatarColorPrimary | Styles applied to the avatar element if color="primary" . |
.MuiChip-avatarColorSecondary | avatarColorSecondary | Styles applied to the avatar element if color="secondary" . |
.MuiChip-avatarMedium | avatarMedium | Styles applied to the avatar element if size="medium" . |
.MuiChip-avatarSmall | avatarSmall | Styles applied to the avatar element if size="small" . |
.MuiChip-clickable | clickable | Styles applied to the root element if onClick is defined or clickable={true} . |
.MuiChip-clickableColorPrimary | clickableColorPrimary | Styles applied to the root element if onClick and color="primary" is defined or clickable={true} . |
.MuiChip-clickableColorSecondary | clickableColorSecondary | Styles applied to the root element if onClick and color="secondary" is defined or clickable={true} . |
.MuiChip-colorDefault | colorDefault | Styles applied to the root element if color="default" . |
.MuiChip-colorError | colorError | Styles applied to the root element if color="error" . |
.MuiChip-colorInfo | colorInfo | Styles applied to the root element if color="info" . |
.MuiChip-colorPrimary | colorPrimary | Styles applied to the root element if color="primary" . |
.MuiChip-colorSecondary | colorSecondary | Styles applied to the root element if color="secondary" . |
.MuiChip-colorSuccess | colorSuccess | Styles applied to the root element if color="success" . |
.MuiChip-colorWarning | colorWarning | Styles applied to the root element if color="warning" . |
.MuiChip-deletable | deletable | Styles applied to the root element if onDelete is defined. |
.MuiChip-deletableColorPrimary | deletableColorPrimary | Styles applied to the root element if onDelete and color="primary" is defined. |
.MuiChip-deletableColorSecondary | deletableColorSecondary | Styles applied to the root element if onDelete and color="secondary" is defined. |
.MuiChip-deleteIcon | deleteIcon | Styles applied to the deleteIcon element. |
.MuiChip-deleteIconColorPrimary | deleteIconColorPrimary | Styles applied to the deleteIcon element if color="primary" . |
.MuiChip-deleteIconColorSecondary | deleteIconColorSecondary | Styles applied to the deleteIcon element if color="secondary" . |
.MuiChip-deleteIconFilledColorPrimary | deleteIconFilledColorPrimary | Styles applied to the deleteIcon element if color="primary" and variant="filled" . |
.MuiChip-deleteIconFilledColorSecondary | deleteIconFilledColorSecondary | Styles applied to the deleteIcon element if color="secondary" and variant="filled" . |
.MuiChip-deleteIconMedium | deleteIconMedium | Styles applied to the deleteIcon element if size="medium" . |
.MuiChip-deleteIconOutlinedColorPrimary | deleteIconOutlinedColorPrimary | Styles applied to the deleteIcon element if color="primary" and variant="outlined" . |
.MuiChip-deleteIconOutlinedColorSecondary | deleteIconOutlinedColorSecondary | Styles applied to the deleteIcon element if color="secondary" and variant="outlined" . |
.MuiChip-deleteIconSmall | deleteIconSmall | Styles applied to the deleteIcon element if size="small" . |
.MuiChip-filled | filled | Styles applied to the root element if variant="filled" . |
.MuiChip-filledPrimary | filledPrimary | Styles applied to the root element if variant="filled" and color="primary" . |
.MuiChip-filledSecondary | filledSecondary | Styles applied to the root element if variant="filled" and color="secondary" . |
.MuiChip-icon | icon | Styles applied to the icon element. |
.MuiChip-iconColorPrimary | iconColorPrimary | Styles applied to the icon element if color="primary" . |
.MuiChip-iconColorSecondary | iconColorSecondary | Styles applied to the icon element if color="secondary" . |
.MuiChip-iconMedium | iconMedium | Styles applied to the icon element if size="medium" . |
.MuiChip-iconSmall | iconSmall | Styles applied to the icon element if size="small" . |
.MuiChip-labelMedium | labelMedium | Styles applied to the label span element if size="medium" . |
.MuiChip-labelSmall | labelSmall | Styles applied to the label span element if size="small" . |
.MuiChip-outlined | outlined | Styles applied to the root element if variant="outlined" . |
.MuiChip-outlinedPrimary | outlinedPrimary | Styles applied to the root element if variant="outlined" and color="primary" . |
.MuiChip-outlinedSecondary | outlinedSecondary | Styles applied to the root element if variant="outlined" and color="secondary" . |
.MuiChip-sizeMedium | sizeMedium | Styles applied to the root element if size="medium" . |
.MuiChip-sizeSmall | sizeSmall | Styles applied to the root element if size="small" . |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverrides
property in a custom theme.
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.