Avatar

A pill-clipped image leaf with an initials fallback: the element's content renders as initials, and image takes one {binding} to a u64 ImageId the app registered at runtime (fx.registerImageBytes). The id 0 is the "no image" sentinel, so an app shows initials while the image loads — and keeps them on a failed fetch or decode — by only writing the id into its model on successful registration.

avatar

initials fallbacks

Markup

<row gap="12" cross="center">
  <avatar>ZN</avatar>
  <avatar>CT</avatar>
  <avatar image="{profile_image}" label="Profile picture">NS</avatar>
</row>

Zig builder

ui.avatar(.{}, "ZN")

With a registered image the engine clips it to the avatar circle (cover fit); the initials remain the fallback while the id is 0:

ui.avatar(.{ .image = image_id }, "ZN")

Attributes

Attribute	Description
`text`	Text value for text-bearing elements; a literal or one {binding}.
`image`	avatar: one {binding} to a u64 ImageId the app registered at runtime (fx.registerImageBytes); 0 renders the initials fallback.
`label`	Accessible name; when set it REPLACES the element's text as the announced name - screen readers and automation snapshots see the label, never the text it shadows.