{
  "description": "A component used to render a styled button.",
  "displayName": "Button",
  "methods": [
    {
      "name": "toggleRipple",
      "docblock": null,
      "modifiers": [],
      "params": [],
      "returns": null
    },
    {
      "name": "handleClick",
      "docblock": null,
      "modifiers": [],
      "params": [
        {
          "name": "e",
          "type": {
            "name": "Object",
            "alias": "Object"
          }
        }
      ],
      "returns": null
    }
  ],
  "props": {
    "children": {
      "flowType": {
        "name": "any"
      },
      "required": true,
      "description": "Children to be passed to the component."
    },
    "classes": {
      "flowType": {
        "name": "Object"
      },
      "required": true,
      "description": ""
    },
    "className": {
      "flowType": {
        "name": "string"
      },
      "required": true,
      "description": "Accepts any classNames to be passed to the component."
    },
    "color": {
      "flowType": {
        "name": "string"
      },
      "required": false,
      "description": "Color to be applied to the Button component. Can be \"primary\", \"secondary\", \"tertiary\", \"transparent\" or any custom value.",
      "defaultValue": {
        "value": "\"primary\"",
        "computed": false
      }
    },
    "element": {
      "flowType": {
        "name": "string"
      },
      "required": false,
      "description": "Element type to be used.",
      "defaultValue": {
        "value": "\"button\"",
        "computed": false
      }
    },
    "icon": {
      "flowType": {
        "name": "any"
      },
      "required": false,
      "description": "Icon component to use in the component."
    },
    "iconAlign": {
      "flowType": {
        "name": "union",
        "raw": "\"left\" | \"right\"",
        "elements": [
          {
            "name": "literal",
            "value": "\"left\""
          },
          {
            "name": "literal",
            "value": "\"right\""
          }
        ]
      },
      "required": false,
      "description": "Icon alignment inside of the button component. Can be \"left\" or \"right\"",
      "defaultValue": {
        "value": "\"left\"",
        "computed": false
      }
    },
    "innerClassName": {
      "flowType": {
        "name": "string"
      },
      "required": false,
      "description": "Inner className to be applied to the children of the component."
    },
    "isOutlined": {
      "flowType": {
        "name": "boolean"
      },
      "required": false,
      "description": "Allows the component to be styled as an outlined button.",
      "defaultValue": {
        "value": "false",
        "computed": false
      }
    },
    "isSecondary": {
      "flowType": {
        "name": "boolean"
      },
      "required": false,
      "description": "Allows the component to be styled as an outlined button.",
      "defaultValue": {
        "value": "false",
        "computed": false
      }
    },
    "isTransparent": {
      "flowType": {
        "name": "boolean"
      },
      "required": false,
      "description": "Allows the component to be styled without button styling until hovered.",
      "defaultValue": {
        "value": "false",
        "computed": false
      }
    },
    "onClick": {
      "flowType": {
        "name": "Function"
      },
      "required": false,
      "description": "Function to be passed to the component on click."
    },
    "theme": {
      "flowType": {
        "name": "Object"
      },
      "required": true,
      "description": ""
    },
    "disabled": {
      "flowType": {
        "name": "boolean"
      },
      "required": false,
      "description": "Disabled the component so it cannot be clicked."
    }
  }
}