{
"componentDescription": "Chips represent complex entities in small blocks, such as a contact.",
"propDescriptions": {
"avatar": { "description": "The Avatar element to display." },
"children": {
"description": "This prop isn't supported. Use the component prop if you need to change the children structure."
},
"classes": { "description": "Override or extend the styles applied to the component." },
"clickable": {
"description": "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": {
"description": "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": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"deleteIcon": {
"description": "Override the default delete icon element. Shown only if onDelete is set."
},
"disabled": { "description": "If true, the component is disabled." },
"icon": { "description": "Icon element." },
"label": { "description": "The content of the component." },
"onDelete": {
"description": "Callback fired when the delete icon is clicked. If set, the delete icon will be shown."
},
"size": { "description": "The size of the component." },
"skipFocusWhenDisabled": {
"description": "If true, allows the disabled chip to escape focus. If false, allows the disabled chip to receive focus."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": { "description": "The variant to use." }
},
"classDescriptions": {
"avatar": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the avatar element"
},
"avatarColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the avatar element",
"conditions": "color=\"primary\"",
"deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
},
"avatarColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the avatar element",
"conditions": "color=\"secondary\"",
"deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
},
"avatarMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the avatar element",
"conditions": "size=\"medium\"",
"deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-sizeMedium classes instead. See Migrating from deprecated APIs for more details."
},
"avatarSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the avatar element",
"conditions": "size=\"small\"",
"deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-sizeSmall classes instead. See Migrating from deprecated APIs for more details."
},
"clickable": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "onClick is defined or clickable={true}"
},
"clickableColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "onClick and color=\"primary\" is defined or clickable={true}",
"deprecationInfo": "Combine the .MuiChip-clickable and .MuiChip-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
},
"clickableColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "onClick and color=\"secondary\" is defined or clickable={true}",
"deprecationInfo": "Combine the .MuiChip-clickable and .MuiChip-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
},
"colorDefault": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"default\""
},
"colorError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"error\""
},
"colorInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"info\""
},
"colorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"primary\""
},
"colorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"secondary\""
},
"colorSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"success\""
},
"colorWarning": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"warning\""
},
"deletable": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "onDelete is defined"
},
"deletableColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "onDelete and color=\"primary\" is defined",
"deprecationInfo": "Combine the .MuiChip-deletable and .MuiChip-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
},
"deletableColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "onDelete and color=\"secondary\" is defined",
"deprecationInfo": "Combine the .MuiChip-deletable and .MuiChip-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
},
"deleteIcon": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the deleteIcon element"
},
"deleteIconColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
"conditions": "color=\"primary\"",
"deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
},
"deleteIconColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
"conditions": "color=\"secondary\"",
"deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
},
"deleteIconFilledColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
"conditions": "color=\"primary\" and variant=\"filled\"",
"deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-filled and .MuiChip-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
},
"deleteIconFilledColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
"conditions": "color=\"secondary\" and variant=\"filled\"",
"deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-filled and .MuiChip-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
},
"deleteIconMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
"conditions": "size=\"medium\"",
"deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-sizeMedium classes instead. See Migrating from deprecated APIs for more details."
},
"deleteIconOutlinedColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
"conditions": "color=\"primary\" and variant=\"outlined\"",
"deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-outlined and .MuiChip-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
},
"deleteIconOutlinedColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
"conditions": "color=\"secondary\" and variant=\"outlined\"",
"deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-outlined and .MuiChip-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
},
"deleteIconSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
"conditions": "size=\"small\"",
"deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-sizeSmall classes instead. See Migrating from deprecated APIs for more details."
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "disabled={true}"
},
"filled": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"filled\""
},
"filledPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"filled\" and color=\"primary\"",
"deprecationInfo": "Combine the .MuiChip-filled and .MuiChip-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
},
"filledSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"filled\" and color=\"secondary\"",
"deprecationInfo": "Combine the .MuiChip-filled and .MuiChip-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
},
"focusVisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "keyboard focused"
},
"icon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon element" },
"iconColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
"conditions": "color=\"primary\"",
"deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
},
"iconColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
"conditions": "color=\"secondary\"",
"deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
},
"iconMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
"conditions": "size=\"medium\"",
"deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-sizeMedium classes instead. See Migrating from deprecated APIs for more details."
},
"iconSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
"conditions": "size=\"small\"",
"deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-sizeSmall classes instead. See Migrating from deprecated APIs for more details."
},
"labelMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the label span element",
"conditions": "size=\"medium\"",
"deprecationInfo": "Combine the .MuiChip-label and .MuiChip-sizeMedium classes instead. See Migrating from deprecated APIs for more details."
},
"labelSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the label span element",
"conditions": "size=\"small\"",
"deprecationInfo": "Combine the .MuiChip-label and .MuiChip-sizeSmall classes instead. See Migrating from deprecated APIs for more details."
},
"outlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"outlined\""
},
"outlinedPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"outlined\" and color=\"primary\"",
"deprecationInfo": "Combine the .MuiChip-outlined and .MuiChip-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
},
"outlinedSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"outlined\" and color=\"secondary\"",
"deprecationInfo": "Combine the .MuiChip-outlined and .MuiChip-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
},
"sizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"medium\""
},
"sizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"small\""
}
},
"slotDescriptions": {
"label": "The component that renders the label.",
"root": "The component that renders the root."
}
}