{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "ButtonIconStateful",
  "description": "Toggleable icon-only button that visually persists an on/off (selected) state, used for actions like Like, Bookmark, or Follow.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "buttonIconStateful",
    "restrict": [
      "button"
    ],
    "description": "Root button element that toggles between an unselected and a selected state. Renders with the icon-button border-filled treatment.",
    "attributes": {
      "static": {
        "class": "slds-button slds-button_icon slds-button_icon-border-filled"
      }
    },
    "variants": [
      {
        "name": "size",
        "description": "Mutually exclusive sizing of the stateful icon button. Applied to the root button element.",
        "options": [
          {
            "value": "xx-small",
            "class": "slds-button_icon-xx-small",
            "description": "Smallest sizing of the icon button."
          },
          {
            "value": "x-small",
            "class": "slds-button_icon-x-small",
            "description": "Extra-small sizing of the icon button."
          },
          {
            "value": "small",
            "class": "slds-button_icon-small",
            "description": "Small sizing of the icon button."
          },
          {
            "value": "medium",
            "class": "",
            "description": "Default medium sizing of the icon button. No size class applied."
          }
        ]
      }
    ],
    "children": [
      {
        "name": "icon",
        "description": "SVG glyph rendered inside the stateful icon button.",
        "attributes": {
          "static": {
            "class": "slds-button__icon"
          }
        },
        "component": "PrimitiveIcon"
      },
      {
        "name": "assistiveText",
        "restrict": [
          "span"
        ],
        "description": "Visually hidden label announcing the action represented by the icon.",
        "attributes": {
          "static": {
            "class": "slds-assistive-text"
          }
        }
      }
    ]
  },
  "stateClasses": [
    {
      "state": "selected",
      "class": "slds-is-selected"
    }
  ],
  "componentRefs": {
    "PrimitiveIcon": {
      "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.",
      "props": {
        "iconName": {
          "type": "string",
          "required": true,
          "description": "Sprite reference for the icon glyph"
        }
      }
    }
  },
  "states": [
    {
      "name": "selected",
      "type": "boolean",
      "description": "Whether the component is in the selected state"
    }
  ]
}