core
Avatar
Sizes & status
CACACA
Import
import { Avatar } from '@connor-adams/designsystem'Usage
A circular person avatar (account holder, shared-ledger member) with an initials fallback when the image is missing.
<Avatar src={user.photo} name="Connor Adams" size="md" status="online" />
<Avatar name="Priya Shah" /> {/* initials only */}
Variants: size="xs|sm|md|lg|xl" or px, status="online|away|offline", ring. For merchant/category chips use LetterAvatar.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | undefined | — | |
| name | string | undefined | ||
| size | number | "xs" | "sm" | "md" | "lg" | "xl" | undefined | md | |
| status | "online" | "away" | "offline" | undefined | — | |
| ring | boolean | undefined | false |