SAvatar <s-avatar>

Shows a person's or business's image, or their initials when there is no image. SAvatar is the typed Vue 3 wrapper for Shopify's Polaris <s-avatar> web component.

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

Best practices

• Size it to the context. Pick a smaller size for dense layouts such as tables and lists, and a larger one on profile pages where the person is the focus.
• Write useful alt text. Set alt to who or what the avatar represents, such as a person's or company's name. If that name already appears as text beside the avatar, use an empty alt instead.
• Keep it next to what it represents. Place the avatar right beside the name or entity it stands for, so the connection is clear in lists, tables and cards.

<SAvatar alt="Sarah Chen" initials="SC" size="large" />

See Shopify's best practices for <s-avatar> for the full guidance.

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>.