Avatar
The mark that stands for a person or an entity, generated from their name unless a real image exists.
import from ~/components/ui/avatar
Default: generated from the name
name
Pass a name and the avatar is generated. The same name always yields the same graphic, so an identity stays stable across sessions and views.
Sizes
size
A closed set of four: sm, md, lg, xl. The graphic is drawn at the exact pixel size, never scaled.
Sources
src › fallback › name
Precedence, left to right: a real image wins, then explicit initials, then the generated avatar.
In a group
+3 others
stack
There is no AvatarGroup component, so a stack is composed at the call site with layout classes only.
Rules
Do
Pass a name and let the default generate: no missing-image holes, ever.
Give a real src an alt, or pass the name so the wrapper is labelled.
Use a real src when you have one: an uploaded photo or a brand logo.
Set fallback only when the product deliberately wants initials over a graphic.
Don't
Do not hand-pick stock photos for placeholder people; that is what the default is for.
Do not describe an avatar as "avatar" or "photo" in alt; use the person's name.
Do not size an avatar with a w- or h- class; the size prop draws the graphic to match.
Do not pass rounded, ring or background classes; the shape and surface belong to the component.