Components / Avatar
Avatar
User avatar with image, initials fallback, five sizes, circle/square shape, status indicator dot, and optional typed ring (user/agent/system) for AI-app shells.
data-display v0.9.0
Playground
Examples
With image
<cg-avatar src="https://i.pravatar.cc/80" name="Ada Lovelace" size="lg" status="online"></cg-avatar>Initials fallback
<cg-avatar name="Grace Hopper" size="md"></cg-avatar>Square shape
<cg-avatar name="Alan Turing" size="lg" shape="square" status="away"></cg-avatar>Typed rings (AI app)
<cg-stack direction="row" gap="md"><cg-avatar name="Alice" type="user" status="online"></cg-avatar><cg-avatar name="Claude" type="agent" status="online"></cg-avatar><cg-avatar name="Sys" type="system"></cg-avatar></cg-stack>Import
import { CgAvatar } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-avatar';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | "" | Image source URL |
alt | string | "" | Image alt text |
name | string | "" | User name for initials fallback |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Avatar size |
shape | "circle" | "square" | "circle" | Avatar shape |
status | "online" | "offline" | "away" | "busy" | null | null | Status indicator dot |
type | "user" | "agent" | "system" | null | null | Adds a colored ring around the avatar (lime for `agent`, info for `user`, muted for `system`) |
fallback-icon | string | "" | Custom fallback icon |