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	An alternative text that describes the avatar for the reader to understand what it is about or identify the user the avatar belongs to.
initials	string	Initials to display in the avatar.
size	"base" | "small" | "small-200" | "large" | "large-200"	Size of the avatar.
src	string	The URL or path to the image. Initials will be rendered as a fallback if src is not provided, fails to load or does not load quickly

Events

Event	Type
error	Event
load	Event

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