Usage

Import the component from its dedicated entry. Structural styles are loaded automatically.

Import the theme once at your app entry:

import '@astryx-vue/themes/neutral.css'

Component usage:

<script setup lang="ts">
import { Avatar, AvatarStatusDot } from '@astryx-vue/core/Avatar'
</script>

<template>
  <Avatar src="/user.jpg" name="John Doe" />
  <Avatar name="Jane Smith" size="xl" />
  <Avatar src="/user.jpg" name="John Doe">
    <template #status>
      <AvatarStatusDot variant="success" />
    </template>
  </Avatar>
</template>

Best practices

Guidance	Practice
Recommended	Always provide name for fallback text and accessible labeling.
Recommended	Use consistent avatar sizes in lists, comments, or chat messages.
Recommended	Use AvatarStatusDot inside the status slot to indicate presence or status.
Recommended	When the avatar acts as a link or button, provide a meaningful accessible name via alt or name.
Don't	Use avatars as a replacement for user names. Pair avatars with a name or label.
Don't	Use low-resolution images. Avatars are often clipped as circles, which magnifies blur.

Examples

Sizes

ATATATAT

Avatars support xsm, sm, md, lg, xl named sizes as well as numeric pixel values.

Shapes

ATATAT

Avatars come in circle, rounded, and square shapes. The default is circle.

Fallback

AT

When an image fails to load, the avatar falls back to initials; without a name, a default person icon is shown.

Status

ATBLCDNT

Place an AvatarStatusDot in the status slot to indicate user status.