{
  "_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": "ButtonIcon",
  "description": "Creates a button that looks like a plain icon.",
  "structure": {
    "name": "root",
    "restrict": [
      "button"
    ],
    "description": "Creates a button that looks like a plain icon.",
    "attributes": {
      "static": {
        "type": "button",
        "class": "slds-button slds-button_icon"
      },
      "bound": {
        "disabled": {
          "prop": "disabled"
        },
        "title": {
          "prop": "title"
        },
        "aria-label": {
          "prop": "alternativeText",
          "required": true
        },
        "accesskey": {
          "prop": "accessKey"
        },
        "name": {
          "prop": "name"
        },
        "value": {
          "prop": "value"
        }
      }
    },
    "children": [
      {
        "name": "icon",
        "component": "PrimitiveIcon",
        "description": "Sizing for icon that sits inside button__icon.",
        "componentProps": {
          "bound": {
            "iconName": "iconHref"
          }
        },
        "attributes": {
          "static": {
            "class": "slds-button__icon"
          }
        },
        "modifiers": [
          {
            "name": "size",
            "attribute": "class",
            "description": "Icon size within button; replaces PrimitiveIcon's root class with the BEM-sized variant.",
            "options": [
              {
                "propValue": "large",
                "value": "slds-button__icon_large",
                "description": "Large size for button icon svg."
              },
              {
                "propValue": "small",
                "value": "slds-button__icon_small",
                "description": "Small size for button icon svg."
              },
              {
                "propValue": "x-small",
                "value": "slds-button__icon_x-small",
                "description": "X-Small size for button icon svg."
              }
            ]
          },
          {
            "name": "hint",
            "attribute": "class",
            "value": "slds-button__icon_hint",
            "description": "A parent class must be put on anything that contains a .slds-button__icon_hint so that the child reacts when the parent is hovered."
          },
          {
            "name": "inverseHint",
            "attribute": "class",
            "value": "slds-button__icon_inverse-hint",
            "description": "A parent class must be put on anything that contains a .slds-button__icon_inverse-hint so that the child reacts when the parent is hovered. This is for a dark background."
          },
          {
            "name": "errorTint",
            "attribute": "class",
            "value": "slds-icon-text-error",
            "description": "Tints the icon with the error text color (used for mismatched/error visual states)"
          }
        ]
      },
      {
        "name": "assistiveText",
        "restrict": [
          "span"
        ],
        "description": "Screen reader text",
        "slot": {
          "name": "assistiveText"
        },
        "attributes": {
          "static": {
            "class": "slds-assistive-text"
          }
        }
      },
      {
        "name": "dropdownIcon",
        "component": "PrimitiveIcon",
        "componentProps": {
          "bound": {
            "iconName": "dropdownIconHref"
          }
        },
        "renderWhen": {
          "prop": "hasPopup",
          "eq": "true"
        },
        "description": "Secondary down-arrow caret rendered alongside the primary icon when the button triggers a menu (containerMore / more variants)",
        "attributes": {
          "static": {
            "class": "slds-button__icon slds-button__icon_x-small"
          }
        }
      }
    ],
    "modifiers": [
      {
        "name": "size",
        "attribute": "class",
        "description": "Button icon size",
        "default": "medium",
        "options": [
          {
            "propValue": "xx-small",
            "value": "slds-button_icon-xx-small",
            "description": "Changes a button icon container to be 16x16px."
          },
          {
            "propValue": "x-small",
            "value": "slds-button_icon-x-small",
            "description": "Changes a button icon container to be 20x20px."
          },
          {
            "propValue": "small",
            "value": "slds-button_icon-small",
            "description": "Changes a button icon container to be 24x24px."
          },
          {
            "propValue": "medium",
            "value": ""
          },
          {
            "propValue": "large",
            "value": "slds-button_icon-large",
            "description": "Changes a button icon container to be 48x48px."
          }
        ]
      },
      {
        "name": "containerMore",
        "attribute": "class",
        "value": "slds-button_icon-container-more",
        "description": "Creates a button menu icon container that has no borders."
      }
    ],
    "variants": [
      {
        "name": "variant",
        "description": "Visual style of the icon button",
        "default": "base",
        "options": [
          {
            "value": "base",
            "class": "",
            "description": "Creates a button that looks like a plain icon."
          },
          {
            "value": "border",
            "class": "slds-button_icon-border",
            "description": "Creates a button icon inside of a transparent container with a border."
          },
          {
            "value": "border-filled",
            "class": "slds-button_icon-border-filled",
            "description": "Creates a button icon inside of a filled container with a border."
          },
          {
            "value": "brand",
            "class": "slds-button_icon-brand",
            "description": "Creates a brand button icon."
          },
          {
            "value": "inverse",
            "class": "slds-button_icon-inverse",
            "description": "Bare button icon with no border or background, to be used on an inversed background."
          },
          {
            "value": "container",
            "class": "slds-button_icon-container",
            "description": "Creates a button icon inside of a transparent container."
          },
          {
            "value": "border-inverse",
            "class": "slds-button_icon-border-inverse",
            "description": "Creates a button icon inside of a transparent container with a border on an inversed background."
          },
          {
            "value": "error",
            "class": "slds-button_icon-error",
            "description": "Error state; typically used in conjunction with an error toolip."
          },
          {
            "value": "warning",
            "class": "slds-button_icon-warning",
            "description": "Warning state; typically used in conjunction with an warning tooltip."
          },
          {
            "value": "more",
            "class": "slds-button_icon-more",
            "description": "Creates a button menu icon container that has borders and a filled background."
          }
        ]
      }
    ]
  },
  "componentRefs": {
    "PrimitiveIcon": {
      "description": "Bare SVG icon composed directly inside the button. ButtonIcon supplies the SVG host class (slds-button__icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.",
      "props": {
        "iconName": {
          "type": "string",
          "required": true,
          "description": "Sprite reference for the icon glyph"
        }
      }
    }
  },
  "states": [
    {
      "name": "disabled",
      "type": "boolean",
      "aria": "aria-disabled",
      "description": "Whether the button is disabled"
    },
    {
      "name": "selected",
      "type": "boolean",
      "aria": "aria-pressed",
      "description": "whether the icon button is selected/pressed"
    },
    {
      "name": "hasPopup",
      "type": "boolean",
      "aria": "aria-haspopup",
      "description": "whether the button triggers a popup"
    },
    {
      "name": "expanded",
      "type": "boolean",
      "aria": "aria-expanded",
      "description": "whether the popup the button triggers is currently open"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "accessible-label",
        "description": "Icon buttons must have aria-label or title for screen readers"
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2015-09-04",
      "genReady": false,
      "lbc": "lightning-button-icon"
    }
  },
  "cssSource": "./buttonIcon.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "disabled",
      "class": "slds-button_disabled"
    },
    {
      "state": "selected",
      "class": "slds-is-selected"
    }
  ]
}