Avatars show a thumbnail representation of an individual or an organization in the interface.
Figma
The Figma reference for Avatar will appear here once the design link is added.
Storybook
Interactive examples for Avatar will render here once the Storybook link is wired in.
Best practices
- Pick a size that matches the context: smaller in condensed layouts, larger where the avatar is a focal point such as a single record card.
- Fall back to initials or a generic image when no photo is available.
- Keep sizing consistent within the same list or view.
Do’s and don’ts
Do
Provide descriptive alt text: the person’s name, or the organization’s name.
Don’t
Leave alt text empty when the name doesn’t already appear next to the avatar as text.
Accessibility
- When an avatar represents a person or organization, give it a text equivalent so assistive technology can announce who it is.
- If the name already appears as adjacent text, an empty alt value avoids a duplicate announcement.