maud-ui64 components

Avatar

User Card

Sofia Davis
Sofia Davis
sofia@example.com

Status Indicator

Online userAway user

Status Badge

Online

Team

AliceBobCarolDan
+3

Sizes

smSmall avatar
mdMedium avatar
lgLarge avatar

Avatar

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

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,
    }))
}

Props

FieldTypeDefaultDescription
srcOptionNoneImage URL; if None, renders fallback initials instead.
altString"Avatar"Accessible label exposed to screen readers; used as aria-label when src is None.
fallbackString"U"Initials or short text displayed when src is None (automatically uppercased).
sizeSizeMdPhysical size: Sm, Md, or Lg.

Size Variants

SizeClassUse Case
Smmui-avatar--smCompact avatars in lists or sidebars.
Mdmui-avatar--mdDefault avatar size for most contexts.
Lgmui-avatar--lgLarge 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.

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).

Related

Badge, Tooltip, User card components.

Shadcn reference

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

← Back to Gallery