{
  "componentDescription": "⚠️ ToggleButtonGroup must have Button and/or IconButton as direct children.",
  "propDescriptions": {
    "buttonFlex": { "description": "The flex value of the button." },
    "children": {
      "description": "Used to render icon or text elements inside the ButtonGroup if <code>src</code> is not set. This can be an element, or just a string."
    },
    "color": {
      "description": "The color of the component. It supports those theme colors that make sense for this component."
    },
    "component": {
      "description": "The component used for the root node. Either a string to use a HTML element or a component."
    },
    "disabled": { "description": "If <code>true</code>, all the buttons will be disabled." },
    "onChange": {
      "description": "Callback fired when the value changes.",
      "typeDescriptions": {
        "event": { "name": "event", "description": "The event source of the callback." },
        "value": {
          "name": "value",
          "description": "of the selected buttons. When <code>exclusive</code> is true this is a single value; when false an array of selected values. If no value is selected and <code>exclusive</code> is true the value is null; when false an empty array."
        }
      }
    },
    "orientation": { "description": "The component orientation." },
    "size": {
      "description": "The size of the component. It accepts theme values between &#39;sm&#39; and &#39;lg&#39;."
    },
    "slotProps": { "description": "The props used for each slot inside." },
    "slots": { "description": "The components used for each slot inside." },
    "spacing": {
      "description": "Defines the space between the type <code>item</code> components. It can only be used on a type <code>container</code> component."
    },
    "sx": {
      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
    },
    "value": {
      "description": "The currently selected value within the group or an array of selected values.<br>The value must have reference equality with the option in order to be selected."
    },
    "variant": {
      "description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
    }
  },
  "classDescriptions": {
    "colorContext": {
      "description": "Class name applied to {{nodeName}} when {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "color inversion is triggered"
    },
    "colorDanger": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"danger\"</code>"
    },
    "colorNeutral": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"neutral\"</code>"
    },
    "colorPrimary": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"primary\"</code>"
    },
    "colorSuccess": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"success\"</code>"
    },
    "colorWarning": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"warning\"</code>"
    },
    "horizontal": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>orientation=\"horizontal\"</code>"
    },
    "sizeLg": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"lg\"</code>"
    },
    "sizeMd": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"md\"</code>"
    },
    "sizeSm": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"sm\"</code>"
    },
    "variantOutlined": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"outlined\"</code>"
    },
    "variantPlain": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"plain\"</code>"
    },
    "variantSoft": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"soft\"</code>"
    },
    "variantSolid": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"solid\"</code>"
    },
    "vertical": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>orientation=\"vertical\"</code>"
    }
  },
  "slotDescriptions": { "root": "The component that renders the root." }
}