# Avatar

Source: https://design.ritchiebros.com/components/data-display/avatar/

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.

## Related components

- [Badge](https://design.ritchiebros.com/components/data-display/badge/)
- [Chip](https://design.ritchiebros.com/components/data-display/chip/)