{
  "_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": "Badge",
  "description": "Badges are labels which hold small amounts of information.",
  "structure": {
    "name": "root",
    "restrict": [
      "span"
    ],
    "description": "Create badge component",
    "slot": {
      "name": "default",
      "required": true
    },
    "attributes": {
      "static": {
        "class": "slds-badge"
      }
    },
    "modifiers": [
      {
        "name": "theme",
        "attribute": "class",
        "description": "Badge theme. Every option swaps a single class on the root span, so renders are structurally identical; all live on the modifier axis (mutually exclusive by nature of a class-swap enum).",
        "default": "default",
        "options": [
          {
            "propValue": "default",
            "value": "",
            "description": "Neutral badge; no theme class applied."
          },
          {
            "propValue": "inverse",
            "value": "slds-badge_inverse",
            "description": "Change badge color to a dark with light text"
          },
          {
            "propValue": "lightest",
            "value": "slds-badge_lightest",
            "description": "Change badge color to white with normal text"
          },
          {
            "propValue": "error",
            "value": "slds-theme_error",
            "description": "Error or destructive theme."
          },
          {
            "propValue": "success",
            "value": "slds-theme_success",
            "description": "Success or positive theme."
          },
          {
            "propValue": "warning",
            "value": "slds-theme_warning",
            "description": "Warning or caution theme."
          }
        ]
      }
    ],
    "children": [
      {
        "name": "icon",
        "restrict": [
          "span"
        ],
        "description": "Adds an icon to badge",
        "renderWhen": {
          "prop": "iconName",
          "filled": true
        },
        "attributes": {
          "static": {
            "class": "slds-badge__icon"
          }
        },
        "modifiers": [
          {
            "name": "inverse",
            "attribute": "class",
            "value": "slds-badge__icon_inverse",
            "description": "Change badge icon fill color to inverse"
          }
        ],
        "variants": [
          {
            "name": "position",
            "description": "Icon position relative to the badge text.",
            "default": "left",
            "options": [
              {
                "value": "left",
                "class": "slds-badge__icon_left",
                "position": "before-slot",
                "description": "Adds an icon to the left of the badge text"
              },
              {
                "value": "right",
                "class": "slds-badge__icon_right",
                "position": "after-slot",
                "description": "Adds an icon to the right of the badge text"
              }
            ]
          }
        ],
        "children": [
          {
            "name": "iconComponent",
            "component": "Icon",
            "componentProps": {
              "static": {
                "size": "xx-small",
                "currentColor": true
              }
            }
          }
        ]
      }
    ]
  },
  "accessibility": {
    "requirements": [
      {
        "id": "color-meaning",
        "description": "Color alone should not convey meaning. Ensure badges have text content or accessible labels."
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2015-09-04",
      "genReady": false,
      "lbc": "lightning-badge"
    }
  },
  "cssSource": "./badge.css",
  "styleApi": {
    "status": "in-development",
    "ready": false
  }
}