Data Display

Avatar

A user image with a graceful text fallback.

stableNo JS requiredhydrateless/avatar.css

A user image with a graceful text fallback. CSS-only.

Playground

Live

AL

SizexssmmdlgxlShapecirclesquare

Avatar group

Overlap several avatars with a group wrapper.

Live

+3

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
src	string	—	Image URL; falls back to children when missing.
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Diameter.
shape	'circle' | 'square'	'circle'	Avatar shape.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-surface	Fallback background.
--hl-radius-full	Circle radius.

Accessibility

• Always give the <img> a meaningful alt, or empty alt="" when purely decorative.
• Text fallbacks (initials) inherit the surrounding contrast tokens.

Related

BadgeA small label for statuses, counts, and tags.CardA surface for grouping related content.SkeletonA placeholder shown while content loads.