The Avatar component is used to display user profiles or placeholders with images, icons, or initials.
It supports fallback text, status indicators, grouping, and customizable sizing.

• Flexible content: Display images, initials, or icons.
• Fallback support: Show text if no image is available.
• Status indicators: Combine with Status to show online/offline or other states.
• Grouped avatars: Display multiple avatars together with proper spacing.
• Customizable: Width, height, border animations, and more.

Usage Example

Preview

T

A

B

C

D

A

B

C

+99

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { Avatar, Card, Status, Tooltip } from "@fefade-ui/svelte"
</script>

{#snippet avatarOn()}
  <div
    style="
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    "
  >
    <Avatar
      src="https://avatars.githubusercontent.com/u/26321303?v=4"
      textFallback="test"
      width="6rem"
      height="6rem"
    />
    <Status
      color="green"
      size="20px"
      style="
      position: absolute;
      top: 4px;
      right: 5px;
      border: 2px solid {Constants.themeColorVar.bg};
      margin: 0;
      "
    />
  </div>
{/snippet}

<Avatar textFallback="test" />
<br />
<Avatar
  src="https://img.odcdn.com.br/cdn-cgi/image/width=1200,height=1200,fit=cover/wp-content/uploads/2023/01/Avatar-Loak.jpg"
  textFallback="test"
/>
<br />

{@render avatarOn?.()}

<Card
  class="rounded-full"
  animatedBorder={{
    width: "4px",
    primaryColor: "#FF007F",
    secondaryColor: "#8000FF"
  }}
  style="padding: 0; width: min-content; height: min-content;"
>
  <Avatar
    src="https://avatars.githubusercontent.com/u/26321303?v=4"
    textFallback="test"
    width="6rem"
    height="6rem"
  />
</Card>

<br />

<Avatar.Group>
  {#each ["a", "b", "c", "d"] as value (value)}
    <Avatar grouped textFallback={value} size="lg" />
  {/each}
</Avatar.Group>

<br />

<Avatar.Group>
  {#each ["a", "b", "c", "d"] as value (value)}
    <Tooltip label={value}>
      {#if value === "d"}
        <Avatar grouped size="lg" style="margin-top: 1.2rem;">
          <span>+99</span>
        </Avatar>
      {:else}
        <Avatar
          grouped
          textFallback={value}
          size="lg"
          style="margin-top: 1.2rem;"
        />
      {/if}
    </Tooltip>
  {/each}
</Avatar.Group>

Props

Prop	Type	Default	Description
src	string	""	URL of the avatar image.
textFallback	string	""	Text to display when no image is provided.
width	string | number	"3rem"	Width of the avatar.
height	string | number	"3rem"	Height of the avatar.
grouped	boolean	false	Whether the avatar is part of a group.
size	string	"md"	Predefined size for grouped avatars (e.g., sm, md, lg).

Best Practices

• Use fallback text to ensure accessibility if images fail to load.
• Combine with Status to indicate user state.
• Use Avatar.Group for displaying multiple users with proper spacing.
• Apply custom borders or animations via Card for visual emphasis.
• Keep avatar sizes consistent within a group for a clean layout.