Avatar
Data DisplayCircular user avatar with initials fallback when no image is available.
Preview
JD
AB
TN
FL
Variants
SM
DF
LG
PR
Usage
avatar.rs
use floe_ui::components::avatar::{self, AvatarSize};
"text-zinc-500">// Default avatar with initials
let av = avatar::initials("John Doe", AvatarSize::Default, &tokens);
"text-zinc-500">// Small avatar
let av_sm = avatar::initials("Jane", AvatarSize::Sm, &tokens);
"text-zinc-500">// Large avatar
let av_lg = avatar::initials("Thang Nguyen", AvatarSize::Lg, &tokens);
"text-zinc-500">// Primary-colored avatar
let av_primary = avatar::initials_primary("Floe", AvatarSize::Default, &tokens);API Reference
Props / Parameters
| Name | Type | Description |
|---|---|---|
| name | &str | Full name — initials are auto-extracted |
| size | AvatarSize | Size preset: Sm (32px), Default (40px), Lg (56px) |
| tokens | &DesignTokens | Design tokens for theming |
Style Functions
default_style(tokens)
primary_style(tokens)
Style functions return closures compatible with Iced's .style() method.
Builder Functions
initials(name, size, tokens)
initials_primary(name, size, tokens)
Builder functions return pre-configured Iced widgets ready for use.
Source: floe-ui/src/components/avatar.rs