Avatar

Avatar Demo

Headless primitives and the tng-avatar component wrapper, including image load/error fallback behavior.

Headless: image

Primitives (tngAvatar*)

Primitive layer is fully headless. Fallback visibility is controlled by your state logic.

Headless profile SM

Component (tng-avatar)

Styled wrapper with built-in source/fallback visibility handling.

AvatarAvatarAvatarAvatar NI

Accessibility Notes

  • Use meaningful alt when the avatar conveys identity.
  • Use alt="" for decorative avatars.
  • Provide readable fallback text (initials or icon) when source is missing or broken.