Avatar

MishkaAvatar draws a square that holds a fallback, usually your initials on a colored background. Set src to an image URL or an on-device file path and the avatar stacks the image on top of the fallback.

The initials show immediately, and the image covers them once it has loaded. The screen shows no empty space while the image downloads, and you wire no loading callback. Mob's Image fetches and caches the file, using Coil on Android and AsyncImage on iOS.

The avatar has no state and sends no events. Children replace initials as the fallback content, so you can place an icon or any other node inside it. MishkaAvatar.radius/2 returns the corner radius a shape resolves to at a given size. For example, MishkaAvatar.radius(:circle, 44) is 22.0.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob avatar

The generator registers the component's tag, so you can use it in ~MOB markup. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaAvatar>. Without a prefix the tag is <Avatar>.

With no src, the fallback is the whole avatar. This one draws the initials SH on the default :surface_raised background. The card in the screenshot also shows two more avatars with their own background and color.

Avatar with initials

LTR RTL

Preview

Show the whole example Show less

<MishkaAvatar initials="SH" />

shape takes :circle, :rounded or :square. A circle uses a corner radius of exactly half of size, so it stays round at any size. :rounded uses a radius of 10, and :square has no rounding.

Avatar shapes

LTR RTL

Preview

Show the whole example Show less

<MishkaAvatar initials="SH" shape={:circle} />
<MishkaAvatar initials="SH" shape={:rounded} />
<MishkaAvatar initials="SH" shape={:square} />

size sets both width and height, and the circle radius follows it. Use text_size to scale the initials with a larger avatar.

Avatar sizes

LTR RTL

Preview

Show the whole example Show less

<MishkaAvatar initials="SH" size={28} />
<MishkaAvatar initials="SH" size={64} text_size={:xl} />

An avatar usually sits beside a name. This row puts a violet avatar next to a Column that holds a name and an email address. Both avatar colors are ARGB integers.

Avatar in a row

LTR RTL

Preview

Show the whole example Show less

<Row>
  <MishkaAvatar initials="SH" background={0xFF7C3AED} color={0xFFFFFFFF} />
  <Column>
    <Text text="Shahryar" />
    <Text text="[email protected]" />
  </Column>
</Row>

Children replace initials as the fallback content.

These attributes of the web component are not ported:

• delay and on_loading_status_change. They manage the swap from fallback to image in the browser. The native avatar stacks the image over the fallback instead.
• alt. A Mob image has no screen reader text.
• width and height. An avatar is square, so use size.
• referrer_policy, crossorigin and the *_class attributes.

• Headless Avatar, the web component this one ports.
• Mob Overflow List, which folds items that do not fit into a +N counter.
• Mob Pill, a compact label with an optional remove button.
• Mob Chip, a compact, selectable label.
• Mob components, the full list of native components.