sp-avatar

Examples API

Attributes and Properties #

Property Attribute Type Default Description size size AvatarSize src src string ''

Description #

An <sp-avatar> is a great way to feature a visual representation of a user.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/avatar

Import the side effectful registration of <sp-avatar> via:

import '@spectrum-web-components/avatar/sp-avatar.js';

When looking to leverage the Avatar base class as a type and/or for extension purposes, do so via:

import { Avatar } from '@spectrum-web-components/avatar';

Sizes #

50 
<sp-avatar
    size="50"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
 75 
<sp-avatar
    size="75"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
 100 
<sp-avatar
    size="100"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
 200 
<sp-avatar
    size="200"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
 300 
<sp-avatar
    size="300"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
 400 
<sp-avatar
    size="400"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
 500 
<sp-avatar
    size="500"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
 600 
<sp-avatar
    size="600"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
 700 
<sp-avatar
    size="700"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>

Accessibility #

The label attribute of the <sp-avatar> will be passed into the <img> element as the alt tag for use in defining a textual representation of the image displayed.