Avatar

Anatomy

Image + fallback initials component for representing users, with optional status badge and grouping support.

maud_ui::primitives::avatar

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`src`	`Option<String>`	`None`	No description
`alt`	`String`	`"Avatar"`	No description
`fallback`	`String`	`"U"`	No description
`size`	`Size`	`Md`	No description
`class`	`Option<String>`	`None`	Extra class names appended to the class list — the escape hatch for per-instance overrides that a closed enum cannot express.

Examples

User Card

Sofia Davis

sofia@example.com

Status Indicator

Status Badge

Team

Sizes

Usage and composition

Import

use maud_ui::primitives::avatar::{self, Size, Props};

Example

use maud::html;
use maud_ui::primitives::avatar;

html! {
    (avatar::render(avatar::Props {
        src: Some("https://example.com/avatar.jpg".to_string()),
        alt: "User name".to_string(),
        fallback: "JD".to_string(),
        size: avatar::Size::Md,
    }))
}

Size Variants

Size	Class	Use Case
Xs14	`mui-avatar--xs-14`	14px — activity and property rows (Linear recipe).
Sm16	`mui-avatar--sm-16`	16px — inline rows beside 12px text (Linear recipe).
Sm	`mui-avatar--sm`	Compact avatars in lists or sidebars.
Md	`mui-avatar--md`	Default avatar size for most contexts.
Lg	`mui-avatar--lg`	Large avatars for profiles or detail views.

Helper Functions

avatar::badge(children: Markup) -> Markup — Renders a status indicator (pip) at the bottom-right of an avatar; typically used with inline style for color.
avatar::group(children: Markup) -> Markup — Wraps multiple rendered avatars in a horizontally overlapping group with role="group".
avatar::group_count(n: usize) -> Markup — Renders a +{n} tail marker for avatar groups showing the count of additional members.

Badge, Tooltip, User card components.

Shadcn reference

https://ui.shadcn.com/docs/components/base/avatar

Accessibility

When src is present: the <img alt> carries the accessible name; outer span has no role.
When src is None: outer span has role="img" and aria-label set to alt string.
Fallback text is marked aria-hidden="true" to avoid duplication.
Badge and group are marked aria-hidden="true" (presentational).

← Back to Gallery