Avatar

Overview

Avatar represents a user, team, or entity with an image, initials, or placeholder symbol. A fully composable structure built from nested image, text, background, ring, and status badge components, every visual layer is independently controllable, making it adaptable to profiles, comments, lists, navigation, and any context where identity needs to be shown at a glance.

When should you use them?

Use an avatar to represent a person, team, or entity wherever their identity helps users recognize or scan content, like profiles, comments, member lists, assignees, and navigation. Fall back to initials when no image is available, and a placeholder when there's no identity to show.

How should you use them?

• Use an image when available, initials as a fallback, and a placeholder when there's no identity.
• Match the size to context: small in lists and comments, large in profile headers.
• Add a status badge to show presence or verification, using the top or bottom slot.
• Use the ring for selection states or to separate stacked avatars in a group.
• Keep initials to one or two characters so they stay legible at small sizes.
• Provide an accessible name so screen readers can identify who the avatar represents.