When to use
Use next to a name or as a compact identifier in a list of people.
Loading…
Find components, patterns, tokens, and docs
Component
Visual stand-in for a person, team, or workspace.
Preview
<Avatar
variant="initials"
size="medium"
>
Ada Lovelace
</Avatar>Appearance is not enough. This is the contract for when the control earns a place in the product.
Use next to a name or as a compact identifier in a list of people.
Don't use an avatar as the only identifier for an account action.
Speeds recognition of people and workspaces in tools with many actors.
If the avatar is decorative next to a name, empty alt. If it is the only identifier, name it.