{ "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." } } }