Chip API
API reference docs for the React Chip component. Learn about the props, CSS, and other APIs of this exported module.
Component demos
Import
import Chip from '@mui/material/Chip';
// or
import { Chip } from '@mui/material';
Chips represent complex entities in small blocks, such as a contact.
Props of the native component are also available.
This prop isn't supported. Use the component
prop if you need to change the children structure.
Type:unsupportedProp
Override or extend the styles applied to the component.
See CSS API below for more details.
Type:object
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.
Type:bool
The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
Type:'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string
Default:'default'
The component used for the root node. Either a string to use a HTML element or a component.
Type:elementType
Callback fired when the delete icon is clicked. If set, the delete icon will be shown.
Type:func
If true
, allows the disabled chip to escape focus. If false
, allows the disabled chip to receive focus.
Type:bool
Default:false
The system prop that allows defining system overrides as well as additional CSS styles.
See the `sx` page for more details.
Type:Array<func
| object
| bool>
| func
| object
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.
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
Styles applied to the avatar element if color="primary"
.
Rule name:avatarColorPrimary
Styles applied to the avatar element if color="secondary"
.
Rule name:avatarColorSecondary
Styles applied to the root element if onClick
is defined or clickable={true}
.
Rule name:clickable
Styles applied to the root element if onClick
and color="primary"
is defined or clickable={true}
.
Rule name:clickableColorPrimary
Styles applied to the root element if onClick
and color="secondary"
is defined or clickable={true}
.
Rule name:clickableColorSecondary
Styles applied to the root element if color="secondary"
.
Rule name:colorSecondary
Styles applied to the root element if onDelete
and color="primary"
is defined.
Rule name:deletableColorPrimary
Styles applied to the root element if onDelete
and color="secondary"
is defined.
Rule name:deletableColorSecondary
Styles applied to the deleteIcon element if color="primary"
and variant="filled"
.
Rule name:deleteIconColorPrimary
Styles applied to the deleteIcon element if color="secondary"
and variant="filled"
.
Rule name:deleteIconColorSecondary
Styles applied to the deleteIcon element if color="primary"
and variant="filled"
.
Rule name:deleteIconFilledColorPrimary
Styles applied to the deleteIcon element if color="secondary"
and variant="filled"
.
Rule name:deleteIconFilledColorSecondary
Styles applied to the deleteIcon element if size="medium"
.
Rule name:deleteIconMedium
Styles applied to the deleteIcon element if color="primary"
and variant="outlined"
.
Rule name:deleteIconOutlinedColorPrimary
Styles applied to the deleteIcon element if color="secondary"
and variant="outlined"
.
Rule name:deleteIconOutlinedColorSecondary
Styles applied to the deleteIcon element if size="small"
.
Rule name:deleteIconSmall
Styles applied to the root element if variant="filled"
and color="primary"
.
Rule name:filledPrimary
Styles applied to the root element if variant="filled"
and color="secondary"
.
Rule name:filledSecondary
Styles applied to the icon element if color="primary"
.
Rule name:iconColorPrimary
Styles applied to the icon element if color="secondary"
.
Rule name:iconColorSecondary
Styles applied to the root element if variant="outlined"
and color="primary"
.
Rule name:outlinedPrimary
Styles applied to the root element if variant="outlined"
and color="secondary"
.
Rule name:outlinedSecondary
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.