Component Avatar

Avatar

Displays a user/avatar image.

Avatar is a small image container with sensible defaults for user icons.

• Default size: size_10() (theme-sized square)
• Default shape: AvatarShape::Circle
• Optional status dot: .status(color)

Example

use gpui::{Image, px};
use std::sync::Arc;
use yororen_ui::component::{avatar, AvatarShape};

let image: Option<Arc<Image>> = None;
let view = avatar(image).shape(AvatarShape::Circle);

When to use

• User profile pictures
• Account switchers / user menus
• Small “who is this” identity chips (often combined with Label)

Not a good fit:

• Arbitrary content thumbnails (use Image)

API

• avatar(Option<Arc<Image>>) / Avatar::new(...): constructor
• shape(AvatarShape):
  • Circle (default)
  • Square
• bg(Hsla): background behind the image / fallback
• status(Hsla): render a small status dot (online / busy / etc.)

Layout and behavior

• When image is None, Avatar renders a simple fallback ("?").
• The status dot is positioned bottom-right and has a border matching theme.surface.base so it reads well on top of the avatar.

Defaults

• Size: size_10()
• Shape: Circle
• Fallback content: "?" when no image is provided

Example: Status dot

use gpui::rgb;
use yororen_ui::component::avatar;

let view = avatar(None).status(rgb(0x00FF00));

Example: Square avatar + fallback background

use gpui::rgb;
use yororen_ui::component::{avatar, AvatarShape};

let view = avatar(None)
    .shape(AvatarShape::Square)
    .bg(rgb(0xEFEFF2));