{
"componentDescription": "",
"propDescriptions": {
"children": { "description": "The content of the component." },
"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 palette customization guide."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"disabled": { "description": "If true, the component is disabled." },
"disableElevation": { "description": "If true, no elevation is used." },
"disableFocusRipple": {
"description": "If true, the keyboard focus ripple is disabled."
},
"disableRipple": {
"description": "If true, the ripple effect is disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class."
},
"endIcon": { "description": "Element placed after the children." },
"fullWidth": {
"description": "If true, the button will take up the full width of its container."
},
"href": {
"description": "The URL to link to when the button is clicked. If defined, an a element will be used as the root node."
},
"loading": {
"description": "If true, the loading indicator is visible and the button is disabled. If true | false, the loading wrapper is always rendered before the children to prevent Google Translation Crash."
},
"loadingIndicator": {
"description": "Element placed before the children if the button is in loading state. The node should contain an element with role="progressbar" with an accessible name. By default, it renders a CircularProgress that is labeled by the button itself."
},
"loadingPosition": {
"description": "The loading indicator can be positioned on the start, end, or the center of the button."
},
"size": {
"description": "The size of the component. small is equivalent to the dense button styling."
},
"startIcon": { "description": "Element placed before the children." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"variant": { "description": "The variant to use." }
},
"classDescriptions": {
"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\""
},
"colorInherit": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"inherit\""
},
"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\""
},
"contained": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"contained\""
},
"containedError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"contained\" and color=\"error\"",
"deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
},
"containedInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"contained\" and color=\"info\"",
"deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
},
"containedInherit": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"contained\" and color=\"inherit\"",
"deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
},
"containedPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"contained\" and color=\"primary\"",
"deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
},
"containedSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"contained\" and color=\"secondary\"",
"deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
},
"containedSizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"large\" and variant=\"contained\"",
"deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
},
"containedSizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"medium\" and variant=\"contained\"",
"deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
},
"containedSizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"small\" and variant=\"contained\"",
"deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
},
"containedSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"contained\" and color=\"success\"",
"deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
},
"containedWarning": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"contained\" and color=\"warning\"",
"deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorWarning 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}"
},
"disableElevation": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "disableElevation={true}"
},
"endIcon": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the endIcon element",
"conditions": "supplied"
},
"focusVisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the ButtonBase root element",
"conditions": "the button is keyboard focused"
},
"fullWidth": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "fullWidth={true}"
},
"icon": { "description": "Styles applied to the icon element if supplied" },
"iconSizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
"conditions": "supplied and size=\"large\"",
"deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead. See Migrating from deprecated APIs for more details."
},
"iconSizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
"conditions": "supplied and size=\"medium\"",
"deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead. See Migrating from deprecated APIs for more details."
},
"iconSizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
"conditions": "supplied and size=\"small\"",
"deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. See Migrating from deprecated APIs for more details."
},
"loading": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "loading={true}"
},
"loadingIconPlaceholder": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the loadingIconPlaceholder element"
},
"loadingIndicator": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the loadingIndicator element"
},
"loadingPositionCenter": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "loadingPosition=\"center\""
},
"loadingPositionEnd": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "loadingPosition=\"end\""
},
"loadingPositionStart": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "loadingPosition=\"start\""
},
"loadingWrapper": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the loadingWrapper element"
},
"outlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"outlined\""
},
"outlinedError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"outlined\" and color=\"error\"",
"deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
},
"outlinedInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"outlined\" and color=\"info\"",
"deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
},
"outlinedInherit": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"outlined\" and color=\"inherit\"",
"deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
},
"outlinedPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"outlined\" and color=\"primary\"",
"deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-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 .MuiButton-outlined and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
},
"outlinedSizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"large\" and variant=\"outlined\"",
"deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
},
"outlinedSizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"medium\" and variant=\"outlined\"",
"deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
},
"outlinedSizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"small\" and variant=\"outlined\"",
"deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
},
"outlinedSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"outlined\" and color=\"success\"",
"deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
},
"outlinedWarning": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"outlined\" and color=\"warning\"",
"deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
},
"root": { "description": "Styles applied to the root element." },
"sizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"large\""
},
"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\""
},
"startIcon": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the startIcon element",
"conditions": "supplied"
},
"text": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"text\""
},
"textError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"text\" and color=\"error\"",
"deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
},
"textInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"text\" and color=\"info\"",
"deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
},
"textInherit": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"text\" and color=\"inherit\"",
"deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
},
"textPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"text\" and color=\"primary\"",
"deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
},
"textSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"text\" and color=\"secondary\"",
"deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
},
"textSizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"large\" and variant=\"text\"",
"deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
},
"textSizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"medium\" and variant=\"text\"",
"deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
},
"textSizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"small\" and variant=\"text\"",
"deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
},
"textSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"text\" and color=\"success\"",
"deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
},
"textWarning": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"text\" and color=\"warning\"",
"deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
}
}
}