Skip to content
Tenet UI

Avatar

Status: stableAccessibility reviewedtenet-ui@0.4.0
Import
import { Avatar } from 'tenet-ui';

Also accepts every prop of Omit<HTMLAttributes<HTMLSpanElement>, 'children'>.

Source: src/components/Avatar/Avatar.tsx

Usage guidelines

Section titled “Usage guidelines”

When to use: representing a person or entity (user, org, repo) with an image or initials.

Rules

Section titled “Rules”
  • Always pass name — it generates the initials and the accessible label, so the avatar is never an unlabelled image to a screen reader. The decorative <img> itself gets empty alt.
  • Provide src when you have a photo; the component falls back to initials automatically if it’s missing or fails to load (no broken-image icon).
  • Use shape="circle" for people and shape="rounded" for orgs/repos so the two read differently at a glance.
  • Pick size from the scale rather than overriding width/height, so avatars line up with adjacent controls.

Do / Don’t

Section titled “Do / Don’t”
  • ✅ <Avatar src={user.photo} name={user.fullName} />
  • ✅ <Avatar name="design-tokens" shape="rounded" />
  • ❌ <Avatar src={url} name="" /> — no label, no initials fallback.
  • ❌ A raw <img> with no alt strategy and no fallback.

Examples

Section titled “Examples”
4 stories for Avatar — open in Storybook
  • Initials components-avatar--initials
  • Image components-avatar--image
  • Org components-avatar--org
  • Large components-avatar--large

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Section titled “Props”
PropTypeDefaultDescription
srcstring—Image URL. When omitted (or it fails to load), initials from name are shown.
name *string—Person/entity name — used for initials and as the accessible label.
size'small' | 'medium' | 'large' | 'xlarge'
AvatarSize
mediumSize from the scale.
shape'circle' | 'rounded'
AvatarShape
circleCircle (people) or rounded square (orgs/repos).

* required