Adding a clickable yes/no button

u156531 Try using below JSON: 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "width": "100%",
    "height": "100%",
    "align-items": "center"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "width": "60px",
        "height": "30px",
        "border-radius": "15px",
        "align-items": "center",
        "flex-direction": "row",
        "justify-content": "=if(@currentField , 'flex-end' , 'flex-start')",
        "cursor": "pointer"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "YesNoColumn": "=if(@currentField , '0' , '1' )"
        }
      },
      "attributes": {
        "class": "=if(@currentField , 'ms-bgColor-greenLight' , 'ms-bgColor-blueLight')"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "18px",
            "height": "18px",
            "margin-left": "6px",
            "margin-right": "6px",
            "border-radius": "50%"
          },
          "attributes": {
            "class": "ms-bgColor-white"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "txtContent": "=if(@currentField,'Yes','')",
      "style": {
        "font-weight": "bold",
        "margin-left": "10px"
      }
    }
  ],
  "inlineEditField": "@currentField"
}

Output: 

Where [$YesNoColumn] is an internal name of your column in SharePoint list in this format: [$InternalNameOfColumn]. You can get the internal name of your SharePoint list columns by following this article: How to find the Internal name of columns in SharePoint Online?

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.