sp-avatar
NPM
0.43.0
Storybook
View Storybook
Try it on
webcomponents.dev
Attributes and Properties #
disabled
disabled
boolean
false
download
download
string | undefined
href
href
string | undefined
label
label
string | undefined
referrerpolicy
referrerpolicy
| 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | undefined
rel
rel
string | undefined
size
size
AvatarSize
src
src
string
''
tabIndex
tabIndex
number
target
target
'_blank' | '_parent' | '_self' | '_top' | undefined
Description #
An <sp-avatar>
is a great way to feature a visual representation of a user.
Usage #
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 #
<sp-avatar size="50" label="Demo User" src="https://picsum.photos/500/500" ></sp-avatar>
<sp-avatar size="75" label="Demo User" src="https://picsum.photos/500/500" ></sp-avatar>
<sp-avatar size="100" label="Demo User" src="https://picsum.photos/500/500" ></sp-avatar>
<sp-avatar size="200" label="Demo User" src="https://picsum.photos/500/500" ></sp-avatar>
<sp-avatar size="300" label="Demo User" src="https://picsum.photos/500/500" ></sp-avatar>
<sp-avatar size="400" label="Demo User" src="https://picsum.photos/500/500" ></sp-avatar>
<sp-avatar size="500" label="Demo User" src="https://picsum.photos/500/500" ></sp-avatar>
<sp-avatar size="600" label="Demo User" src="https://picsum.photos/500/500" ></sp-avatar>
<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.