SAvatar <s-avatar>

import { SAvatar } from 'polaris-vue-elements'

Example

The images below load from picsum.photos, a third-party placeholder image service, purely for demo purposes.

<script setup>
import { SAvatar } from 'polaris-vue-elements'
</script>

<template>
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="small" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="base" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="large" />

  <!-- No src: falls back to initials -->
  <SAvatar initials="AL" alt="Ada Lovelace" size="large" />
</template>

Props

Prop	Type	Description
alt	string	Alternative text that describes the avatar for accessibility. Provides a text description of the avatar for users with assistive technology and serves as a fallback when the avatar fails to load. A well-written description enables people with visual impairments to understand non-text content. When a screen reader encounters an avatar, it reads this description aloud. When an avatar fails to load, this text displays on screen, helping all users understand what content was intended. Learn more about writing effective alt text and the alt attribute.
initials	string	The initials to display in the avatar when no image is provided or fails to load. Typically one or two characters representing a person's first and last name initials, such as "JD" for John Doe.
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200"	The size of the avatar image. - small-200: Extra small avatar, suitable for compact displays or lists with many items. - small-100: Alias of small. - small: Small avatar, good for secondary contexts or tight layouts. - base: Default size that works well in most contexts. - large: Large avatar for emphasis or when the avatar is a focal point. - large-100: Alias of large. - large-200: Extra large avatar for prominent display.
src	string	The URL or path to the avatar image. When provided, the image takes priority over initials. If the image fails to load or loads slowly, initials will be rendered as a fallback.

Events

Event	Type
error	Event
load	Event

Listen for these with @error-style listeners on <SAvatar>.