{
  "_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": "Avatar",
  "description": "An avatar can be circular or a rounded rectangle, depending on usage. The default is a rounded rectangle and requires `.slds-avatar` as the base class. Use a circle for all people-oriented objects that could potentially render as avatars. For a fully round avatar, add the `.slds-avatar_circle` class. Four additional classes are available for sizing. If an image is unavailable, up to two letters can be used instead. If the record name contains two words, like first and last name, use the first capitalized letter of each. For records that only have a single word name, use the first two letters of that word using one capital and one lower case letter. If either an image or initials are unavailable, use the object icon as a fallback.",
  "structure": {
    "name": "root",
    "restrict": [
      "span",
      "a"
    ],
    "description": "Creates an avatar component",
    "attributes": {
      "bound": {
        "title": {
          "prop": "title"
        }
      },
      "static": {
        "class": "slds-avatar"
      }
    },
    "children": [
      {
        "name": "image",
        "restrict": [
          "img"
        ],
        "description": "Avatar image",
        "attributes": {
          "bound": {
            "src": {
              "prop": "src",
              "required": true
            },
            "alt": {
              "prop": "alternativeText"
            }
          }
        }
      },
      {
        "name": "initials",
        "restrict": [
          "abbr",
          "span"
        ],
        "description": "Initials fallback when no image",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "initials"
        },
        "attributes": {
          "static": {
            "class": "slds-avatar__initials"
          }
        },
        "modifiers": [
          {
            "name": "inverse",
            "attribute": "class",
            "value": "slds-avatar__initials_inverse",
            "description": "Used for initials that are dark text on light background"
          },
          {
            "name": "entityIcon",
            "attribute": "class",
            "value": "slds-icon-standard-account",
            "description": "Tints the initials with the standard account entity color"
          },
          {
            "name": "userIcon",
            "attribute": "class",
            "value": "slds-icon-standard-user",
            "description": "Tints the initials with the standard user entity color"
          }
        ]
      },
      {
        "name": "fallbackIcon",
        "restrict": [
          "span"
        ],
        "description": "Fallback icon container shown when neither image nor initials are provided",
        "children": [
          {
            "name": "icon",
            "description": "Decorative SVG icon",
            "component": "PrimitiveIcon",
            "componentProps": {
              "bound": {
                "iconName": "iconHref"
              }
            },
            "attributes": {
              "static": {
                "class": "slds-icon"
              }
            },
            "children": [
              {
                "name": "iconUse"
              }
            ]
          },
          {
            "name": "assistiveText",
            "restrict": [
              "span"
            ],
            "description": "Screen reader text describing the fallback icon",
            "attributes": {
              "static": {
                "class": "slds-assistive-text"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-icon_container"
          }
        },
        "modifiers": [
          {
            "name": "entityIcon",
            "attribute": "class",
            "value": "slds-icon-standard-account",
            "description": "Applies the standard account entity color treatment to the fallback icon"
          },
          {
            "name": "userIcon",
            "attribute": "class",
            "value": "slds-icon-standard-user",
            "description": "Applies the standard user entity color treatment to the fallback icon"
          }
        ]
      },
      {
        "name": "assistiveText",
        "restrict": [
          "span"
        ],
        "description": "screen reader text for avatar",
        "attributes": {
          "static": {
            "class": "slds-assistive-text"
          }
        }
      }
    ],
    "modifiers": [
      {
        "name": "circle",
        "attribute": "class",
        "value": "slds-avatar_circle",
        "description": "Make avatar a circle"
      },
      {
        "name": "empty",
        "attribute": "class",
        "value": "slds-avatar_empty",
        "description": "Displays an empty avatar placeholder"
      },
      {
        "name": "size",
        "attribute": "class",
        "description": "Avatar size",
        "default": "medium",
        "options": [
          {
            "propValue": "x-small",
            "value": "slds-avatar_x-small",
            "description": "Size modifier for avatars, X-Small"
          },
          {
            "propValue": "small",
            "value": "slds-avatar_small",
            "description": "Size modifier for avatars, Small"
          },
          {
            "propValue": "medium",
            "value": "slds-avatar_medium",
            "description": "Size modifier for avatars, Medium"
          },
          {
            "propValue": "large",
            "value": "slds-avatar_large",
            "description": "Size modifier for avatars, Large"
          }
        ]
      },
      {
        "name": "profileImageLarge",
        "attribute": "class",
        "value": "slds-avatar_profile-image-large",
        "description": "Uses the large user avatar image as the avatar icon"
      },
      {
        "name": "groupImageLarge",
        "attribute": "class",
        "value": "slds-avatar_group-image-large",
        "description": "Uses the large group image as the avatar icon"
      }
    ]
  },
  "states": [
    {
      "name": "linked",
      "type": "boolean",
      "description": "whether the avatar is wrapped in a link"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "alt-text",
        "description": "Image avatars must have alternative text describing the entity"
      },
      {
        "id": "decorative-hidden",
        "description": "Decorative avatars should be hidden from screen readers"
      }
    ]
  },
  "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": "2015-09-04",
      "genReady": false,
      "lbc": "lightning-avatar"
    }
  },
  "cssSource": "./avatar.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  }
}