Avatar

SAvatar is a user avatar built on Reka UI: it shows an image, and when there is none or it fails to load, a fallback (usually initials). It supports sizes.

Sizes (fallback initials)

AJMGDS

<template>
  <SAvatar
    fallback="AJ"
    size="sm"
  />
  <SAvatar
    fallback="MG"
    size="md"
  />
  <SAvatar
    fallback="DS"
    size="lg"
  />
</template>

With an image

API

Props

Name	Type	Default	Description
src	string	undefined	Image URL. If it fails to load, the fallback is shown.
alt	string	undefined	Alternative text of the image.
fallback	string	undefined	Fallback content (usually initials) shown when there is no image.
size	"md" | "sm" | "lg"	"md"	Size: sm/md/lg.
delay-ms	number	undefined	Delay before showing the fallback, ms (avoids flicker when the image loads fast).

Slots

Name	Description
default	Fallback content (an alternative to the fallback prop).