ElyriAvatar
Avatars that fall back to initials when the image fails, with shape, five sizes, presence and an overlapping AvatarGroup.
Installation
Add component
pnpm dlx @elyri/cli@latest add avatarExamples
Basic
Pass a src to show an image, or just a name for the initials fallback.
import { Avatar } from './components/elyri/Avatar';
export function Example() {
return (
<div className="demo-ui-row">
<Avatar src="/logo.svg" alt="Ada Lovelace" fit="contain" />
<Avatar name="Grace Hopper" />
<Avatar src="/logo.svg" alt="Alan Turing" fit="contain" />
<Avatar name="林徽因" />
</div>
);
}Sizes
Five sizes: xs / sm / md / lg / xl.
import { Avatar } from './components/elyri/Avatar';
export function Example() {
return (
<div className="demo-ui-row">
<Avatar name="Ada" size="xs" />
<Avatar name="Ada" size="sm" />
<Avatar name="Ada" size="md" />
<Avatar src="/logo.svg" alt="Grace" size="lg" fit="contain" />
<Avatar src="/logo.svg" alt="Linus" size="xl" fit="contain" />
</div>
);
}Shapes
circle for round, square for a rounded square.
import { Avatar } from './components/elyri/Avatar';
export function Example() {
return (
<div className="demo-ui-row">
<Avatar src="/logo.svg" alt="Ada" shape="circle" fit="contain" />
<Avatar src="/logo.svg" alt="Ada" shape="square" fit="contain" />
<Avatar name="Grace Hopper" shape="circle" />
<Avatar name="Grace Hopper" shape="square" />
</div>
);
}Presence
Corner dot: online / away / busy / offline.
import { Avatar } from './components/elyri/Avatar';
export function Example() {
return (
<div className="demo-ui-row">
<Avatar src="/logo.svg" alt="Ada" status="online" fit="contain" />
<Avatar src="/logo.svg" alt="Alan" status="away" fit="contain" />
<Avatar src="/logo.svg" alt="Grace" status="busy" fit="contain" />
<Avatar src="/logo.svg" alt="Linus" status="offline" fit="contain" />
</div>
);
}Fallback
A default user glyph when there is no name, or your own fallback.
import { Avatar } from './components/elyri/Avatar';
export function Example() {
return (
<div className="demo-ui-row">
<Avatar />
<Avatar name="A" />
<Avatar
name="A"
fallback={
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 2 3 6v6c0 5 3.8 8.5 9 10 5.2-1.5 9-5 9-10V6Z" />
</svg>
}
/>
</div>
);
}Avatar group
Overlapping avatars; max collapses the rest into a +N counter.
+2
import { Avatar, AvatarGroup } from './components/elyri/Avatar';
export function Example() {
return (
<div className="demo-stack">
<AvatarGroup max={4} size="lg">
<Avatar src="/logo.svg" alt="Ada" fit="contain" />
<Avatar src="/logo.svg" alt="Alan" fit="contain" />
<Avatar src="/logo.svg" alt="Grace" fit="contain" />
<Avatar src="/logo.svg" alt="Linus" fit="contain" />
<Avatar name="Grace Hopper" />
<Avatar name="林徽因" />
</AvatarGroup>
<AvatarGroup size="md">
<Avatar name="Ada Lovelace" />
<Avatar name="Alan Turing" />
<Avatar name="Grace Hopper" />
</AvatarGroup>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL; falls back to initials or custom content when it fails |
alt | string | — | Image alt text, used as the accessible name, takes precedence over name |
name | string | — | User name, drives the initials fallback and a stable colour |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size: xs / sm / md / lg / xl, defaults to md |
shape | 'circle' | 'square' | 'circle' | Shape: circle / square, defaults to circle |
fit | 'cover' | 'contain' | 'cover' | Image fit: cover to fill and crop (default) / contain to inset the whole image, good for logos |
status | 'online' | 'offline' | 'away' | 'busy' | — | Presence dot in the bottom-right corner |
fallback | ReactNode | — | Custom fallback content, takes precedence over the initials |
AvatarGroup.max | number | — | Maximum avatars to show; the rest collapse into +N, all shown when omitted |
...rest | HTMLAttributes | — | Remaining props are forwarded to the native span / div |