Avatar

Last updated

2026-10-04 UTC

Demo

avatar/demo.vue

<template>
  <div class="flex flex-wrap items-center gap-4">
    <YlfAvatar src="https://avatars.githubusercontent.com/u/24221472" alt="YunYouJun" size="lg" />
    <YlfAvatar src="https://avatars.githubusercontent.com/u/24221472" alt="YunYouJun" />
    <YlfAvatar src="https://avatars.githubusercontent.com/u/24221472" alt="YunYouJun" size="sm" />
    <YlfAvatar fallback="Y" />
    <YlfAvatar fallback="YLF" size="lg" />
  </div>
</template>

Avatar uses Reka UI for image loading and fallback text.

Props

Prop	Description	Type	Default
src	Image URL	string	—
alt	Alternative text	string	''
fallback	Fallback text, such as an initial	string	—
size	Size	sm | md | lg	md

Give meaningful avatars a complete alt, such as a person's name; the fallback retains it when the image fails. Without alt, fallback text becomes the name. Decorative images may keep empty alt. fallback defines displayed text; names are not inferred from image URLs.