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
namestringname 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