{
  "_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": "Button",
  "description": "This neutralizes all the base styles making it look like a text link",
  "structure": {
    "name": "root",
    "restrict": [
      "button",
      "a"
    ],
    "description": "Button element",
    "attributes": {
      "static": {
        "type": "button",
        "class": "slds-button"
      },
      "bound": {
        "disabled": {
          "prop": "disabled"
        },
        "aria-disabled": {
          "prop": "disabled"
        },
        "aria-pressed": {
          "prop": "pressed"
        },
        "aria-live": {
          "prop": "live"
        },
        "title": {
          "prop": "title"
        },
        "name": {
          "prop": "name"
        },
        "value": {
          "prop": "value"
        },
        "accesskey": {
          "prop": "accessKey"
        }
      }
    },
    "children": [
      {
        "name": "iconLeft",
        "restrict": [
          "span"
        ],
        "description": "Position of icon when sitting to the left side of the text when inside a button",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "iconLeft",
          "restrict": [
            "Icon"
          ]
        },
        "attributes": {
          "static": {
            "class": "slds-button__icon slds-button__icon_left"
          }
        },
        "component": "PrimitiveIcon"
      },
      {
        "name": "label",
        "description": "Button text label",
        "restrict": [
          "span"
        ],
        "slot": {
          "name": "default"
        }
      },
      {
        "name": "iconRight",
        "restrict": [
          "span"
        ],
        "description": "Position of icon when sitting to the right side of the text when inside a button",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "iconRight",
          "restrict": [
            "Icon"
          ]
        },
        "attributes": {
          "static": {
            "class": "slds-button__icon slds-button__icon_right"
          }
        },
        "component": "PrimitiveIcon"
      },
      {
        "name": "textNotSelected",
        "restrict": [
          "span"
        ],
        "description": "Shown text when button is not selected: default state",
        "renderWhen": {
          "prop": "stateful",
          "eq": "true"
        },
        "attributes": {
          "static": {
            "class": "slds-text-not-selected"
          }
        },
        "children": [
          {
            "name": "textNotSelectedIcon",
            "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": "textSelected",
        "restrict": [
          "span"
        ],
        "description": "Shown text when button is selected",
        "renderWhen": {
          "prop": "stateful",
          "eq": "true"
        },
        "attributes": {
          "static": {
            "class": "slds-text-selected"
          }
        },
        "children": [
          {
            "name": "textSelectedIcon",
            "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": "textSelectedFocus",
        "restrict": [
          "span"
        ],
        "description": "Shown text when button is selected and focused",
        "renderWhen": {
          "prop": "stateful",
          "eq": "true"
        },
        "attributes": {
          "static": {
            "class": "slds-text-selected-focus"
          }
        },
        "children": [
          {
            "name": "textSelectedFocusIcon",
            "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": "textNotPressed",
        "restrict": [
          "span"
        ],
        "description": "Shown text when button is not pressed: default state",
        "renderWhen": {
          "prop": "dualStateful",
          "eq": "true"
        },
        "attributes": {
          "static": {
            "class": "slds-text-not-pressed"
          }
        },
        "children": [
          {
            "name": "textNotPressedIcon",
            "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": "textPressed",
        "restrict": [
          "span"
        ],
        "description": "Shown text when button is pressed",
        "renderWhen": {
          "prop": "dualStateful",
          "eq": "true"
        },
        "attributes": {
          "static": {
            "class": "slds-text-pressed"
          }
        },
        "children": [
          {
            "name": "textPressedIcon",
            "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"
          }
        ]
      }
    ],
    "modifiers": [
      {
        "name": "stretch",
        "attribute": "class",
        "value": "slds-button_stretch",
        "description": "Creates a button style for 100% width with centered text that maintains current styling"
      },
      {
        "name": "fullWidth",
        "attribute": "class",
        "value": "slds-button_full-width",
        "description": "Creates a button style for full width that resets styling"
      },
      {
        "name": "stateful",
        "attribute": "class",
        "value": "slds-button_stateful",
        "description": "Initiates a stateful button"
      },
      {
        "name": "dualStateful",
        "attribute": "class",
        "value": "slds-button_dual-stateful",
        "description": "Initiates a dual stateful button"
      },
      {
        "name": "reset",
        "attribute": "class",
        "value": "slds-button_reset",
        "description": "Resets attributes of .slds-button back to the browser default"
      }
    ],
    "variants": [
      {
        "name": "variant",
        "description": "The visual and semantic style of the button",
        "default": "neutral",
        "options": [
          {
            "value": "base",
            "class": "",
            "description": "Base button with no additional styling"
          },
          {
            "value": "neutral",
            "class": "slds-button_neutral",
            "description": "Creates the gray border with white background default style"
          },
          {
            "value": "brand",
            "class": "slds-button_brand",
            "description": "Creates the brand blue Salesforce style"
          },
          {
            "value": "outline-brand",
            "class": "slds-button_outline-brand",
            "description": "Creates the outlined button with the brand color"
          },
          {
            "value": "destructive",
            "class": "slds-button_destructive",
            "description": "Creates a red button style"
          },
          {
            "value": "text-destructive",
            "class": "slds-button_text-destructive",
            "description": "Creates a neutral button with red text"
          },
          {
            "value": "success",
            "class": "slds-button_success",
            "description": "Creates a green button style"
          },
          {
            "value": "inverse",
            "class": "slds-button_inverse",
            "description": "Creates the inverse style for dark backgrounds"
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "disabled",
      "type": "boolean",
      "aria": "aria-disabled",
      "description": "Whether the button is disabled"
    },
    {
      "name": "pressed",
      "type": "boolean",
      "aria": "aria-pressed",
      "description": "Whether the stateful button is pressed/selected"
    },
    {
      "name": "notSelected",
      "type": "boolean",
      "description": "Stateful button is in its unselected/default state"
    },
    {
      "name": "selectedClicked",
      "type": "boolean",
      "description": "Stateful button was selected and clicked again (pre-unselect hover state)"
    },
    {
      "name": "pressedDual",
      "type": "boolean",
      "aria": "aria-pressed",
      "description": "Dual-stateful button is pressed"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "focus-visible",
        "description": "Button must have a visible focus indicator"
      },
      {
        "id": "accessible-label",
        "description": "Icon-only buttons must have an accessible label via aria-label or title"
      }
    ]
  },
  "behavior": "./button.behavior.ts",
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2015-09-04",
      "genReady": false,
      "lbc": "lightning-button"
    }
  },
  "cssSource": "./button.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "disabled",
      "class": "slds-button_disabled"
    },
    {
      "state": "pressed",
      "class": "slds-is-selected"
    },
    {
      "state": "notSelected",
      "class": "slds-not-selected"
    },
    {
      "state": "selectedClicked",
      "class": "slds-is-selected-clicked"
    },
    {
      "state": "pressedDual",
      "class": "slds-is-pressed"
    }
  ],
  "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"
        }
      }
    }
  }
}