Avatar v0.1.0 Data display

Image avatar with automatic initials fallback when the image is missing or fails to load.

import { Avatar } from "latticeui-react";

Examples

Sizes and fallback

When src is missing or fails to load, initials derived from name are shown.

ALGHAT

Show code

<Avatar name="Ada Lovelace" size="sm" />
<Avatar name="Grace Hopper" />
<Avatar name="Alan Turing" size="lg" />
<Avatar name="Broken Image" src="/does-not-exist.png" />

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`span`	`[data-scope="avatar"][data-part="root"]`
`image`	`img`	`[data-scope="avatar"][data-part="image"]`
`fallback`	`span`	`[data-scope="avatar"][data-part="fallback"]`

Props

Prop	Type	Default	Description
`name` *	`string`	—	Used for alt text and fallback initials.
`src`	`string`	—
`size`	`"sm" \| "md" \| "lg"`	`"md"`

Accessibility

Roles: img (fallback)

Fallback initials derive from the first and last word of name.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="avatar"][data-part="root"] {
  /* your overrides */
}

Component tokens: --avatar-size

State attributes: data-size