[
  {
    "tags": {},
    "description": "Badges can be used to highlight information or the status of something.",
    "methods": [],
    "displayName": "Badge",
    "props": {
      "BadgeProps": {
        "className": {
          "name": "className",
          "defaultValue": null,
          "description": "An additional className to add to the component's classList",
          "required": false,
          "type": {
            "name": "string"
          },
          "tags": {}
        },
        "children": {
          "name": "children",
          "defaultValue": null,
          "description": "The content to render within the badge",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "ReactNode",
            "value": [
              {
                "value": "string"
              },
              {
                "value": "number"
              },
              {
                "value": "false"
              },
              {
                "value": "true"
              },
              {
                "value": "ReactElement<any, string | JSXElementConstructor<any>>",
                "description": "",
                "fullComment": "",
                "tags": {}
              },
              {
                "value": "Iterable<ReactNode>",
                "description": "",
                "fullComment": "",
                "tags": {}
              },
              {
                "value": "ReactPortal",
                "description": "",
                "fullComment": "",
                "tags": {}
              }
            ]
          },
          "tags": {}
        },
        "variant": {
          "name": "variant",
          "defaultValue": {
            "value": "lightgray"
          },
          "description": "The Badge's style variant",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "Variant",
            "value": [
              {
                "value": "\"darkgray\""
              },
              {
                "value": "\"lightgray\""
              },
              {
                "value": "\"red\""
              },
              {
                "value": "\"yellow\""
              },
              {
                "value": "\"blue\""
              },
              {
                "value": "\"green\""
              },
              {
                "value": "\"purple\""
              }
            ]
          },
          "tags": {
            "default": "'lightgray'"
          }
        }
      },
      "HTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes",
      "AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes",
      "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes",
      "DarkModeProps": {
        "darkMode": {
          "name": "darkMode",
          "defaultValue": {
            "value": "false"
          },
          "description": "Renders the component with dark mode styles.",
          "required": false,
          "type": {
            "name": "enum",
            "raw": "boolean",
            "value": [
              {
                "value": "false"
              },
              {
                "value": "true"
              }
            ]
          },
          "tags": {
            "default": "false"
          }
        }
      }
    }
  }
]