Avatar

Fission

Product

▾

Setup

›

›

Avatar is the identity chip for people, teams, or accounts.

In a real app, an avatar solves two small but important problems at once: it gives a quick visual anchor in dense lists, and it provides a fallback when a profile image is missing. The checked-in widget shows an image when src is present and falls back to up to two initials from name otherwise.

Example

use fission::prelude::*;

let widget: Widget = Avatar {
    name: Some("Maya Patel".into()),
    src: view.state().profile_photo_url.clone(),
    size: Some(48.0),
}
.into();

If the image is unavailable, this renders MP inside a circular surface instead of leaving a blank space.

Field table

Field	Type	Meaning	Notes / default behavior
name	Option<String>	Display name used to derive fallback initials.	Defaults to None. If both name and src are missing, the fallback becomes ?.
src	Option<String>	Image source for the avatar.	Defaults to None. When present, it wins over initials.
size	Option<f32>	Diameter of the avatar circle.	Defaults to 40.0.

Accessibility and responsive notes

Avatar is visually useful, but it does not carry a semantic label on its own. If the avatar is important to understanding the screen, pair it with nearby text or wrap the surrounding row in meaningful semantics.

Also think about size in context. A small 24px avatar works in tables or compact lists. A 48px or 56px avatar works better in message headers or profile summaries.

Specific advice

Do not rely on initials alone when the product must disambiguate many similar names. Use adjacent text, secondary metadata, or a richer row layout so identity remains clear.

Production checklist

For Avatar, review the fields that change behavior before treating the widget as finished: name, src, size. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Avatar setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Image, Badge, Card, and Text.