@usevyre/react @usevyre/vue

Avatar

Displays a user's profile photo with graceful fallback to initials. Supports four sizes and an optional status indicator.

Sizes

GPGPGPGP
 
import { Avatar } from "@usevyre/react";

<Avatar size="sm" fallback="GP" />
<Avatar size="md" fallback="GP" />
<Avatar size="lg" fallback="GP" />
<Avatar size="xl" fallback="GP" />

Status indicator

Add a status prop to show an indicator dot: online, busy, away, or offline.

ONBZAWOF
 
<Avatar fallback="ON" status="online" />
<Avatar fallback="BZ" status="busy" />
<Avatar fallback="AW" status="away" />
<Avatar fallback="OF" status="offline" />

Image & fallback

If src fails to load or is not provided, the component automatically shows the fallback initials.

UserBrokenGP
 
<!-- Image loads successfully -->
<Avatar src="https://..." alt="User" fallback="U1" />

<!-- Image fails → shows fallback initials -->
<Avatar src="https://broken-url..." alt="Broken" fallback="BR" />

<!-- No src → shows fallback immediately -->
<Avatar fallback="GP" />

Props

Props

Prop Type Default Description
src string — Image URL. Falls back to initials on error.
alt string — Alt text for the image.
fallback string — 1–2 character initials shown when image is unavailable.
size "sm" | "md" | "lg" | "xl" "md" Avatar diameter.
status "online" | "offline" | "busy" | "away" — Status indicator dot shown at the bottom-right.
class string — Additional CSS class.
← Alert Badge →