Skip to Content

Avatar

Shows src if given, otherwise initials derived from name (with a deterministic background colour per name), otherwise icon.

ALATGHSLX
import { Avatar } from '@gg-software/ui'; <Avatar src="/avatars/ada.jpg" alt="Ada Lovelace" /> <Avatar name="Ada Lovelace" /> <Avatar name="Grace Hopper" shape="square" size="lg" />

Props

PropTypeDefaultDescription
srcstring—
namestring—name used for initials + a deterministic background colour
iconReactNode—
size"sm" | "md" | "lg" | "xl"md
shape"circle" | "square"circle
altstring—
classNamestring—

* required · generated from packages/ui/src/display/Avatar/Avatar.tsx