chip.json

{
  "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&#39;t supported. Use the <code>component</code> prop if you need to change the children structure."
    },
    "classes": { "description": "Override or extend the styles applied to the component." },
    "clickable": {
      "description": "If <code>true</code>, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If <code>false</code>, 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 <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>."
    },
    "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 <code>onDelete</code> is set."
    },
    "disabled": { "description": "If <code>true</code>, the component is disabled." },
    "icon": { "description": "Icon element." },
    "label": { "description": "The content of the component." },
    "nativeButton": {
      "description": "If <code>true</code>, the component is expected to resolve to a native <code>&lt;button&gt;</code> element. When omitted, custom components inherit the default button semantics of the current wrapper. Set to <code>true</code> when a custom component resolves to a native <code>&lt;button&gt;</code>, or <code>false</code> when it resolves to a non-button host."
    },
    "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 <code>true</code>, allows the disabled chip to escape focus. If <code>false</code>, 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": "<code>color=\"primary\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-avatar\">.MuiChip-avatar</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorPrimary\">.MuiChip-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "avatarColorSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the avatar element",
      "conditions": "<code>color=\"secondary\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-avatar\">.MuiChip-avatar</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorSecondary\">.MuiChip-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "avatarMedium": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the avatar element",
      "conditions": "<code>size=\"medium\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-avatar\">.MuiChip-avatar</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-sizeMedium\">.MuiChip-sizeMedium</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "avatarSmall": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the avatar element",
      "conditions": "<code>size=\"small\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-avatar\">.MuiChip-avatar</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-sizeSmall\">.MuiChip-sizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "clickable": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>onClick</code> is defined or <code>clickable={true}</code>"
    },
    "clickableColorPrimary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>onClick</code> and <code>color=\"primary\"</code> is defined or <code>clickable={true}</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-clickable\">.MuiChip-clickable</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorPrimary\">.MuiChip-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "clickableColorSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>onClick</code> and <code>color=\"secondary\"</code> is defined or <code>clickable={true}</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-clickable\">.MuiChip-clickable</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorSecondary\">.MuiChip-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "colorDefault": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"default\"</code>"
    },
    "colorError": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"error\"</code>"
    },
    "colorInfo": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"info\"</code>"
    },
    "colorPrimary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"primary\"</code>"
    },
    "colorSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"secondary\"</code>"
    },
    "colorSuccess": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"success\"</code>"
    },
    "colorWarning": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"warning\"</code>"
    },
    "deletable": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>onDelete</code> is defined"
    },
    "deletableColorPrimary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>onDelete</code> and <code>color=\"primary\"</code> is defined",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-deletable\">.MuiChip-deletable</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorPrimary\">.MuiChip-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "deletableColorSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>onDelete</code> and <code>color=\"secondary\"</code> is defined",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-deletable\">.MuiChip-deletable</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorSecondary\">.MuiChip-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> 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": "<code>color=\"primary\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-deleteIcon\">.MuiChip-deleteIcon</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorPrimary\">.MuiChip-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "deleteIconColorSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the deleteIcon element",
      "conditions": "<code>color=\"secondary\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-deleteIcon\">.MuiChip-deleteIcon</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorSecondary\">.MuiChip-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "deleteIconFilledColorPrimary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the deleteIcon element",
      "conditions": "<code>color=\"primary\"</code> and <code>variant=\"filled\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-deleteIcon\">.MuiChip-deleteIcon</a> , <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-filled\">.MuiChip-filled</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorPrimary\">.MuiChip-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "deleteIconFilledColorSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the deleteIcon element",
      "conditions": "<code>color=\"secondary\"</code> and <code>variant=\"filled\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-deleteIcon\">.MuiChip-deleteIcon</a> , <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-filled\">.MuiChip-filled</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorSecondary\">.MuiChip-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "deleteIconMedium": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the deleteIcon element",
      "conditions": "<code>size=\"medium\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-deleteIcon\">.MuiChip-deleteIcon</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-sizeMedium\">.MuiChip-sizeMedium</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "deleteIconOutlinedColorPrimary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the deleteIcon element",
      "conditions": "<code>color=\"primary\"</code> and <code>variant=\"outlined\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-deleteIcon\">.MuiChip-deleteIcon</a> , <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-outlined\">.MuiChip-outlined</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorPrimary\">.MuiChip-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "deleteIconOutlinedColorSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the deleteIcon element",
      "conditions": "<code>color=\"secondary\"</code> and <code>variant=\"outlined\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-deleteIcon\">.MuiChip-deleteIcon</a> , <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-outlined\">.MuiChip-outlined</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorSecondary\">.MuiChip-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "deleteIconSmall": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the deleteIcon element",
      "conditions": "<code>size=\"small\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-deleteIcon\">.MuiChip-deleteIcon</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-sizeSmall\">.MuiChip-sizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "disabled": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>disabled={true}</code>"
    },
    "filled": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"filled\"</code>"
    },
    "filledPrimary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"primary\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-filled\">.MuiChip-filled</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorPrimary\">.MuiChip-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "filledSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"filled\"</code> and <code>color=\"secondary\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-filled\">.MuiChip-filled</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorSecondary\">.MuiChip-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> 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": "<code>color=\"primary\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-icon\">.MuiChip-icon</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorPrimary\">.MuiChip-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "iconColorSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the icon element",
      "conditions": "<code>color=\"secondary\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-icon\">.MuiChip-icon</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorSecondary\">.MuiChip-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "iconMedium": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the icon element",
      "conditions": "<code>size=\"medium\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-icon\">.MuiChip-icon</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-sizeMedium\">.MuiChip-sizeMedium</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "iconSmall": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the icon element",
      "conditions": "<code>size=\"small\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-icon\">.MuiChip-icon</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-sizeSmall\">.MuiChip-sizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "labelMedium": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the label <code>span</code> element",
      "conditions": "<code>size=\"medium\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#Chip-css-MuiChip-label\">.MuiChip-label</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-sizeMedium\">.MuiChip-sizeMedium</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "labelSmall": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the label <code>span</code> element",
      "conditions": "<code>size=\"small\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#Chip-css-MuiChip-label\">.MuiChip-label</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-sizeSmall\">.MuiChip-sizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "outlined": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"outlined\"</code>"
    },
    "outlinedPrimary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"primary\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-outlined\">.MuiChip-outlined</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorPrimary\">.MuiChip-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "outlinedSecondary": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>",
      "deprecationInfo": "Combine the <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-outlined\">.MuiChip-outlined</a> and <a href=\"/material-ui/api/chip/#chip-classes-MuiChip-colorSecondary\">.MuiChip-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
    },
    "sizeMedium": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"medium\"</code>"
    },
    "sizeSmall": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"small\"</code>"
    }
  },
  "slotDescriptions": {
    "label": "The component that renders the label.",
    "root": "The component that renders the root."
  }
}