{
  "_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": "ButtonStateful",
  "description": "Initiates a stateful button",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./buttonStateful.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "buttonStateful",
    "restrict": [
      "button"
    ],
    "description": "Initiates a stateful button",
    "attributes": {
      "static": {
        "class": "slds-button slds-button_neutral slds-button_stateful",
        "aria-live": "assertive"
      }
    },
    "variants": [
      {
        "name": "brand",
        "description": "Mutually exclusive button brand applied alongside slds-button_stateful. Stateful adapts neutral and inverse brand treatments.",
        "default": "neutral",
        "options": [
          {
            "value": "neutral",
            "class": "slds-button_neutral",
            "description": "Creates the gray border with white background default style"
          },
          {
            "value": "inverse",
            "class": "slds-button_inverse",
            "description": "Creates the inverse style for dark backgrounds"
          }
        ]
      }
    ],
    "children": [
      {
        "name": "notSelectedLabel",
        "restrict": [
          "span"
        ],
        "description": "Shown text when button is not selected: default state",
        "attributes": {
          "static": {
            "class": "slds-text-not-selected"
          }
        },
        "children": [
          {
            "name": "notSelectedIcon",
            "description": "Position of icon when sitting to the left side of the text when inside a button",
            "attributes": {
              "static": {
                "class": "slds-button__icon slds-button__icon_small slds-button__icon_left"
              }
            },
            "component": "PrimitiveIcon"
          }
        ]
      },
      {
        "name": "selectedLabel",
        "restrict": [
          "span"
        ],
        "description": "Shown text when button is selected",
        "attributes": {
          "static": {
            "class": "slds-text-selected"
          }
        },
        "children": [
          {
            "name": "selectedIcon",
            "description": "Position of icon when sitting to the left side of the text when inside a button",
            "attributes": {
              "static": {
                "class": "slds-button__icon slds-button__icon_small slds-button__icon_left"
              }
            },
            "component": "PrimitiveIcon"
          }
        ]
      },
      {
        "name": "selectedFocusLabel",
        "restrict": [
          "span"
        ],
        "description": "Shown text when button is selected and focused",
        "attributes": {
          "static": {
            "class": "slds-text-selected-focus"
          }
        },
        "children": [
          {
            "name": "selectedFocusIcon",
            "description": "Position of icon when sitting to the left side of the text when inside a button",
            "attributes": {
              "static": {
                "class": "slds-button__icon slds-button__icon_small slds-button__icon_left"
              }
            },
            "component": "PrimitiveIcon"
          }
        ]
      }
    ]
  },
  "stateClasses": [
    {
      "state": "notSelected",
      "class": "slds-not-selected"
    },
    {
      "state": "selected",
      "class": "slds-is-selected"
    },
    {
      "state": "selectedClicked",
      "class": "slds-is-selected-clicked"
    }
  ],
  "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": "notSelected",
      "type": "boolean",
      "description": "Whether the component is in the notSelected state"
    },
    {
      "name": "selected",
      "type": "boolean",
      "description": "Whether the component is in the selected state"
    },
    {
      "name": "selectedClicked",
      "type": "boolean",
      "description": "Whether the component is in the selectedClicked state"
    }
  ]
}