Avatar
No reference page demonstrates this component — it was inferred from the screens that use one, so there is no variant matrix behind it.
Usage
A person or entity, shown as an image with initials as the fallback. `name` is required even when `src` is supplied — it is what produces the initials if the image fails, and what a screen reader announces. No reference page demonstrates this component; it was inferred from the twenty screens that use one, so there is no variant matrix behind it.import { Avatar } from '@summonware/ui';Best practices
DoAlways pass the full name, not just initials. The component derives initials itself.
DoPair an avatar with a visible name in lists. Initials alone are ambiguous the moment two people share them.
Don'tUse `xs` as a standalone identifier — at 24px, initials are barely legible.
Examples
Common configurations, variations and states.Sizes
JDJDJDJD
Extra-small for dense table rows, small in lists, medium as standard, large on a profile header.
With a name
JD
Jane Doe
Owner
SL
Sam Lee
Editor
AK
Ali Khan
Viewer
The shape an avatar takes in almost every real list — identifier plus label, never the glyph alone.