@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" />

<script setup>
import { Avatar } from "@usevyre/vue";
</script>
<template>
  <Avatar size="sm" fallback="GP" />
  <Avatar size="md" fallback="GP" />
  <Avatar size="lg" fallback="GP" />
  <Avatar size="xl" fallback="GP" />
</template>

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" />

<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 thefallback initials.

<!-- 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" />

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

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.

AI Context

Valid props

Prop	Values	Default
`size`	`"sm"`\|`"md"`\|`"lg"`\|`"xl"`	`md`
`status`	`"online"`\|`"offline"`\|`"busy"`\|`"away"`	—

Common AI mistakes

size="xs"→ Use size="sm"
size="2xl"→ Use size="xl"

Quick examples

Avatar with image and online status

<Avatar src="/user.png" alt="Jane Doe" size="lg" status="online" />

Fallback initials

<Avatar fallback="JD" size="md" />

← Alert Badge →