react-test/docs/translations/api-docs/icon-button/icon-button.json

{
  "componentDescription": "Refer to the [Icons](/material-ui/icons/) section of the documentation\nregarding the available icon options.",
  "propDescriptions": {
    "children": { "description": "The icon to display." },
    "classes": { "description": "Override or extend the styles applied to the component." },
    "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>."
    },
    "disabled": { "description": "If <code>true</code>, the component is disabled." },
    "disableFocusRipple": {
      "description": "If <code>true</code>, the  keyboard focus ripple is disabled."
    },
    "disableRipple": {
      "description": "If <code>true</code>, the ripple effect is disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the <code>.Mui-focusVisible</code> class."
    },
    "edge": {
      "description": "If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape)."
    },
    "loading": {
      "description": "If <code>true</code>, the loading indicator is visible and the button is disabled. If <code>true | false</code>, the loading wrapper is always rendered before the children to prevent <a href=\"https://github.com/mui/material-ui/issues/27853\">Google Translation Crash</a>."
    },
    "loadingIndicator": {
      "description": "Element placed before the children if the button is in loading state. The node should contain an element with <code>role=&quot;progressbar&quot;</code> with an accessible name. By default, it renders a <code>CircularProgress</code> that is labeled by the button itself."
    },
    "size": {
      "description": "The size of the component. <code>small</code> is equivalent to the dense button styling."
    },
    "sx": {
      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
    }
  },
  "classDescriptions": {
    "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>"
    },
    "colorInherit": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"inherit\"</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>"
    },
    "disabled": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>disabled={true}</code>"
    },
    "edgeEnd": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>edge=\"end\"</code>"
    },
    "edgeStart": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>edge=\"start\"</code>"
    },
    "loading": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>loading={true}</code>"
    },
    "loadingIndicator": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the loadingIndicator element"
    },
    "loadingWrapper": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the loadingWrapper element"
    },
    "root": { "description": "Styles applied to the root element." },
    "sizeLarge": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"large\"</code>"
    },
    "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>"
    }
  }
}