Avatar
Show a user’s profile image or initials in a compact, visual element.
Anchor to propertiesProperties
- 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.
- Anchor to initialsinitialsstring
Initials to display in the avatar.
- Anchor to sizesize"small" | "small-200" | "base" | "large" | "large-200"
Size of the avatar.
- string
The URL or path to the image.
Initials will be rendered as a fallback if
srcis not provided, fails to load or does not load quickly
Was this section helpful?
Anchor to eventsEvents
Learn more about registering events.
- Anchor to errorerrorOnErrorEventHandler
- Anchor to loadloadCallbackEventListener<typeof tagName> | null
CallbackEventListener
(EventListener & {
(event: CallbackEvent<T>): void;
}) | nullCallbackEvent
Event & {
currentTarget: HTMLElementTagNameMap[T];
}Was this section helpful?
Code
<s-avatar
alt="John Doe"
initials="JD"
></s-avatar>
Examples
Code
Default
<s-avatar alt="John Doe" initials="JD" ></s-avatar>