Avatar

Initials

Sizes

With image

LT

An image that has already loaded when the avatar mounts, from the cache or before the page hydrated, replaces the initials at once.

Names with initials

Initials are the first character of each of the first two words, whole characters: accents, Chinese characters and characters outside the Basic Multilingual Plane stay intact, and each is upper-cased on its own, so a leading "ß" gives "S" and never two letters. A name with no initials shows a neutral glyph instead of an empty box.

Beside a name

An avatar keeps its size: it never shrinks in a crowded row, however long the text beside it. When the person's name is written next to it, pass alt="" so the name is not announced twice.

Props

Accessibility

• The avatar is named once, at its root, by alt or else by name, whether the image is loading, loaded or failed. The initials and the image are not announced separately.
• alt="", or a blank name, hides the avatar from assistive technology.
• Missing or failed src falls back to initials, at once even when delayMs is set.

Manifest entry

<Avatar name="Ada Lovelace" />

{
  "description": "Square, initials-based avatar. Renders monospace initials from the name, or an image when src is provided. It is named once, at its root, by alt or by name, and keeps its size in a crowded row.",
  "props": {
    "name": {
      "type": "string",
      "required": true
    },
    "src": {
      "type": "string"
    },
    "alt": {
      "type": "string",
      "description": "Accessible name of the avatar. Defaults to name. An empty string hides the avatar from assistive technology, for one beside a visible name."
    },
    "size": {
      "type": "enum",
      "values": [
        "sm",
        "md",
        "lg"
      ],
      "default": "md"
    },
    "delayMs": {
      "type": "number",
      "description": "Milliseconds to hold back the initials while an image loads. The initials show at once if the image fails."
    }
  },
  "composable_with": [
    "Card",
    "Sidebar",
    "DataTable"
  ],
  "never_inside": [
    "Badge"
  ],
  "example": "<Avatar name=\"Ada Lovelace\" />"
}