Foundation

Avatar

Circular user image with initials fallback. Falls back automatically when the image fails to load.

Examples

Sizes

<Avatar size="xs" name="Ada Lovelace" />
<Avatar size="sm" name="Alan Turing" />
<Avatar size="md" name="Grace Hopper" />
<Avatar size="lg" name="Donald Knuth" />
<Avatar size="xl" initials="JS" />

Images

src renders the image; a changed src after a failure retries automatically.

<Avatar size="lg" src="/avatars/ana.svg" name="Ana" />
<Avatar size="lg" src="/avatars/ben.svg" name="Ben" />
<Avatar size="lg" src="/avatars/casey.svg" name="Casey" />
<Avatar size="lg" src="/avatars/grace.svg" name="Grace" />
<Avatar size="lg" src="/avatars/assistant.svg" alt="Assistant" />

Image fallback

A broken image src falls back to initials.

<Avatar size="lg" src="https://broken.example/missing.png" name="Rachel Carson" />

Props

Prop	Type	Default	Description
`src`	`string`	`—`	Image URL. Falls back to initials on error.
`alt`	`string`	`—`	Image alt text (also used as accessible name).
`name`	`string`	`—`	Full name; first letter is used for the fallback if no initials given.
`initials`	`string`	`—`	Explicit fallback text (overrides name-derived).
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Diameter — 20 / 24 / 32 / 40 / 56 px.

Install

CLI

npx @a3tai/mittsu add avatar