Avatar
Avatar component is used to show a thumbnail representation of an individual or business in the interface. It can be a graphical representation or visual depiction, such as an image, initials, or an icon.
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Anchor to propertiesProperties
- Anchor to altaltaltstringstring
An alternative text description that describe the image for the reader to understand what it is about or identify the user the avatar belongs to.
- Anchor to idididstringstring
A unique identifier for the element.
- Anchor to initialsinitialsinitialsstringstring
Initials to display in the avatar.
Initials will be rendered as a fallback if
srcis not provided, fails to load or does not load quickly.- Anchor to sizesizesize'small' | 'large' | 'base' | 'small-200' | 'large-200''small' | 'large' | 'base' | 'small-200' | 'large-200'Default: 'base'Default: 'base'
Size of the avatar.
- Anchor to srcsrcsrcstringstring
The URL or path to the image.
Anchor to eventsEvents
Learn more about registering events.
- Anchor to errorerrorerror((event: CallbackEventListener<typeof tagName>) => void) | null((event: CallbackEventListener<typeof tagName>) => void) | null
Callback when the image fails to load.
- Anchor to loadloadload((event: CallbackEventListener<typeof tagName>) => void) | null((event: CallbackEventListener<typeof tagName>) => void) | null
Callback when the image loads successfully.
Preview
Examples
Code
Default
<s-avatar alt="Avery Brown" initials="AB" ></s-avatar>
Anchor to best-practicesBest practices
Use these best practices to deliver a clear and accessible experience in your extensions.
Show initials by default
When no first or last name is provided, display the placeholder icon. If either name exists, show one or two initials.
Choose an appropriate size
Select a size based on context:
- small‑200 (21×21) for tight tables or lists
- small (26×26) when slightly larger is needed
- base (32×32) as the default
- large (39×39) when the avatar is a focal point (for example, a customer card)
- large‑200 (47×47) when extra emphasis is required
Provide descriptive alt text
Write alt text that meaningfully describes the avatar so assistive technologies can convey the same context.
Keep sizes consistent on a page
Use the same style and size for multiple avatars in one view to create a unified visual pattern and avoid mixing sizes.