Avatar

A person or a project, with initials when the image is missing — and one radius, always.

ALLTAC

<Avatar name="Ada Lovelace" src="/ada.jpg" /><Avatar name="Ada Lovelace" /><Avatar name="acme-api" size="lg" />

Avatar shows an image and falls back to initials derived from name — while the image loads and if it never arrives. There is one radius in the system, so an avatar is never a different shape from the card it sits in.

Usage

tsx

import { Avatar } from "@heyo-sh/heyo-ui";<Avatar name="Ada Lovelace" src={user.avatarUrl} />;

Sizes

20, 24, 32, 40 and 48px — the same rhythm the controls are on, so an avatar lines up with a button beside it.

ALALALALAL

<Avatar size="xs" name="Ada Lovelace" /><Avatar size="sm" name="Ada Lovelace" /><Avatar size="base" name="Ada Lovelace" /><Avatar size="lg" name="Ada Lovelace" /><Avatar size="xl" name="Ada Lovelace" />

Custom fallback

fallback replaces the initials — an icon for a service account, a glyph for a project.

<Avatar name="acme-api" fallback={<IconCube className="size-4" />} /><Avatar fallback="?" />

Groups

Avatar.Group overlaps a stack and collapses everything past max into a +N chip — the "who is on this project" row.

ALLTGH+2

<Avatar.Group max={3}><Avatar name="Ada Lovelace" /><Avatar name="Linus Torvalds" /><Avatar name="Grace Hopper" /><Avatar name="Alan Turing" /><Avatar name="Barbara Liskov" /></Avatar.Group>

Properties

Avatar

namestringoptional

Used to derive the initials when no explicit fallback is given.

srcstringoptional

The image URL.

altstringoptional

Alternative text for the image.

fallbackReactNodeoptional

Shown while the image loads and if it fails. It defaults to the initials of name.

size"xs" | "sm" | "base" | "lg" | "xl"optional

20, 24, 32, 40 or 48px. It defaults to base.

classNamestringoptional

Merged into the root — a ring, a different radius.

Avatar.Group

maxnumberoptional

Beyond this many, the rest collapse into a +N chip.

childrenReactNodeoptional

The avatars, newest first.

Loading documentation…