{
  "_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": "Pill",
  "description": "Initializes pill",
  "structure": {
    "name": "root",
    "restrict": [
      "span"
    ],
    "description": "Initializes pill",
    "children": [
      {
        "name": "tooltip",
        "restrict": [
          "div"
        ],
        "description": "Tooltip popover shown when the label is truncated",
        "renderWhen": "propFilled",
        "children": [
          {
            "name": "tooltipBody",
            "restrict": [
              "div"
            ],
            "description": "Tooltip popover body containing the full label text",
            "attributes": {
              "static": {
                "class": "slds-popover__body"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-popover slds-popover_tooltip slds-nubbin_bottom-left",
            "role": "tooltip"
          }
        }
      },
      {
        "name": "iconContainer",
        "restrict": [
          "span"
        ],
        "description": "Initializes pill icon or avatar that sits to the left of the label",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "icon",
          "restrict": [
            "Icon",
            "Avatar"
          ]
        },
        "children": [
          {
            "name": "avatar",
            "restrict": [
              "span"
            ],
            "description": "Avatar graphic rendered inside the icon container",
            "renderWhen": {
              "prop": "iconType",
              "eq": "avatar"
            },
            "children": [
              {
                "name": "avatarImage",
                "restrict": [
                  "img"
                ],
                "description": "Avatar image element"
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-avatar slds-avatar_circle"
              }
            },
            "modifiers": [
              {
                "name": "xSmall",
                "attribute": "class",
                "value": "slds-avatar_x-small",
                "description": "Renders the avatar at extra-small size (used inside listbox pills)"
              },
              {
                "name": "mergedIconContainer",
                "attribute": "class",
                "value": "slds-pill__icon_container",
                "description": "Applied when the avatar element itself doubles as the pill icon container (listbox pills omit the dedicated wrapper span)"
              }
            ]
          },
          {
            "name": "icon",
            "restrict": [
              "span"
            ],
            "description": "Icon graphic container rendered inside the pill icon container",
            "renderWhen": {
              "prop": "iconType",
              "eq": "icon"
            },
            "children": [
              {
                "name": "iconSvg",
                "description": "Icon SVG element",
                "component": "PrimitiveIcon",
                "attributes": {
                  "static": {
                    "class": "slds-icon"
                  }
                },
                "modifiers": [
                  {
                    "name": "textError",
                    "attribute": "class",
                    "value": "slds-icon-text-error",
                    "description": "Tints the icon to the error text color (used by error pills)"
                  }
                ],
                "children": [
                  {
                    "name": "iconUse"
                  }
                ]
              },
              {
                "name": "iconAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Accessible label describing the icon",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-icon_container"
              }
            },
            "variants": [
              {
                "name": "iconSprite",
                "description": "Sprite glyph applied to the icon container",
                "options": [
                  {
                    "value": "standard-account",
                    "class": "slds-icon-standard-account"
                  },
                  {
                    "value": "standard-case",
                    "class": "slds-icon-standard-case"
                  }
                ]
              }
            ],
            "modifiers": [
              {
                "name": "mergedIconContainer",
                "attribute": "class",
                "value": "slds-pill__icon_container",
                "description": "Applied when the icon container itself doubles as the pill icon container (listbox pills omit the dedicated wrapper span)"
              }
            ]
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-pill__icon_container"
          }
        }
      },
      {
        "name": "action",
        "restrict": [
          "a"
        ],
        "description": "Actionable element inside of pill with hyperlink",
        "renderWhen": {
          "prop": "linked",
          "eq": "true"
        },
        "children": [
          {
            "name": "actionLabel",
            "restrict": [
              "span"
            ],
            "description": "Line of text inside a pill",
            "attributes": {
              "static": {
                "class": "slds-pill__label"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-pill__action"
          }
        }
      },
      {
        "name": "label",
        "restrict": [
          "span"
        ],
        "description": "Line of text inside a pill",
        "slot": {
          "name": "default",
          "required": true
        },
        "attributes": {
          "static": {
            "class": "slds-pill__label"
          }
        }
      },
      {
        "name": "remove",
        "restrict": [
          "span",
          "button"
        ],
        "description": "Initializes remove icon in pill that sits to the right of the label",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "remove",
          "restrict": [
            "Button"
          ]
        },
        "children": [
          {
            "name": "removeButton",
            "restrict": [
              "button"
            ],
            "description": "Initializes remove icon in pill that sits to the right of the label",
            "attributes": {
              "static": {
                "class": "slds-button slds-button_icon slds-pill__remove"
              }
            },
            "children": [
              {
                "name": "removeIcon",
                "attributes": {
                  "static": {
                    "class": "slds-button__icon"
                  }
                },
                "children": [
                  {
                    "name": "removeIconUse"
                  }
                ],
                "component": "PrimitiveIcon"
              },
              {
                "name": "removeAssistiveText",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          },
          {
            "name": "removeIcon",
            "description": "Remove button close-icon SVG",
            "component": "PrimitiveIcon"
          },
          {
            "name": "removeAssistiveText",
            "restrict": [
              "span"
            ],
            "description": "Accessible label for the remove control"
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-pill__remove"
          }
        },
        "modifiers": [
          {
            "name": "iconWrapper",
            "attribute": "class",
            "value": "slds-icon_container",
            "description": "Wraps the remove button inside an icon container (listbox and truncated-tooltip pills render this wrapper)"
          }
        ]
      },
      {
        "name": "container",
        "restrict": [
          "div"
        ],
        "description": "Container to hold pill(s) with borders",
        "children": [
          {
            "name": "listbox",
            "restrict": [
              "ul"
            ],
            "description": "Horizontal listbox of selectable pill options",
            "renderWhen": {
              "prop": "listbox",
              "eq": "true"
            },
            "children": [
              {
                "name": "listboxItem",
                "restrict": [
                  "li"
                ],
                "description": "Individual pill option in the listbox",
                "repeats": true,
                "attributes": {
                  "static": {
                    "class": "slds-listbox-item"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-listbox slds-listbox_horizontal"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-pill_container"
          }
        },
        "modifiers": [
          {
            "name": "bareContainer",
            "attribute": "class",
            "value": "slds-pill_container_bare",
            "description": "Removes the container's background and border"
          }
        ]
      },
      {
        "name": "selectionGroup",
        "restrict": [
          "div"
        ],
        "description": "Selection group wrapper that pairs a combobox container with a pill listbox",
        "renderWhen": {
          "prop": "withCombobox",
          "eq": "true"
        },
        "children": [
          {
            "name": "comboboxContainer",
            "restrict": [
              "div"
            ],
            "description": "Sibling combobox container for the selection group",
            "attributes": {
              "static": {
                "class": "slds-combobox_container"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-listbox_selection-group"
          }
        }
      }
    ],
    "attributes": {
      "static": {
        "class": "slds-pill"
      }
    },
    "modifiers": [
      {
        "name": "linked",
        "attribute": "class",
        "value": "slds-pill_link",
        "description": "Creates a pill with a hyperlink"
      },
      {
        "name": "bare",
        "attribute": "class",
        "value": "slds-pill_bare",
        "description": "Modifier that removes border and background from a pill"
      }
    ]
  },
  "states": [
    {
      "name": "hasError",
      "type": "boolean",
      "aria": "aria-invalid",
      "description": "Whether the pill is in an error state"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "aria": "aria-disabled",
      "description": "Whether the pill is disabled"
    },
    {
      "name": "selected",
      "type": "boolean",
      "aria": "aria-selected",
      "description": "Whether the pill is selected"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "remove-accessible",
        "description": "Remove button must have accessible label indicating what will be removed"
      },
      {
        "id": "icon-assistive-text",
        "description": "Decorative icons inside the pill must mark their SVG aria-hidden=\"true\" and provide a sibling assistive-text label."
      },
      {
        "id": "listbox-label",
        "description": "Pill listboxes must expose an accessible name via aria-label and may reference a describing element via aria-describedby."
      }
    ]
  },
  "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"
        }
      }
    }
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2016-03-01",
      "genReady": false,
      "lbc": "lightning-pill"
    }
  },
  "cssSource": "./pill.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "hasError",
      "class": "slds-has-error"
    }
  ]
}