Avatar

A cropped identity image or fallback, with optional overlapping groups. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• avatar, avatar-image, avatar-fallback, avatar-group, avatar-group--ring

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<span class="avatar" role="img" aria-label="Ada Lovelace">
  <img class="avatar-image" src="/ada.jpg" alt="">
  <span class="avatar-fallback" aria-hidden="true" data-avatar-hidden>AL</span>
</span>

Variants and composition

avatar-image fills and crops the box above avatar-fallback. Application load/error state chooses the visible part with data-avatar-hidden. avatar-group overlaps its direct children and adds borders. avatar-group--ring replaces direct .avatar borders with 2px outer shadow rings, so the image area is not reduced. Supply the ring color on those avatars, for example shadow-outline-color:neutral-100@[&_>_.avatar] on the group, to match the surrounding surface.

Behavior and accessibility

Image loading and failure detection set data-avatar-hidden on the image or fallback. If the outer avatar carries role=img and one accessible name, keep the inner image alt empty and hide fallback initials from assistive technology.

Reference

See the interactive Storybook specimen ↗. Continue to Badge or return to the Official preset overview.