{
  "_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-foundation.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"
        }
      }
    },
    "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"
        }
      },
      {
        "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"
              }
            }
          },
          {
            "name": "assistiveText",
            "restrict": [
              "span"
            ],
            "description": "Screen reader text describing the fallback icon"
          }
        ]
      },
      {
        "name": "assistiveText",
        "restrict": [
          "span"
        ],
        "description": "screen reader text for avatar"
      }
    ]
  },
  "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"
        }
      }
    }
  }
}