sp-avatar

Examples API

Attributes and Properties #

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

CSS Custom Properties #

Name Default
--spectrum-avatar-size-100-border-color var(--spectrum-alias-avatar-border-color-default)
--spectrum-avatar-size-100-border-radius var(--spectrum-global-dimension-static-percent-50)
--spectrum-avatar-size-100-border-size var(--spectrum-alias-avatar-border-size)
--spectrum-avatar-size-100-height var(--spectrum-alias-avatar-size-100)
--spectrum-avatar-size-100-opacity var(--spectrum-global-color-opacity-100)
--spectrum-avatar-size-100-opacity-disabled var(--spectrum-global-color-opacity-30)
--spectrum-avatar-size-100-width var(--spectrum-alias-avatar-size-100)
--spectrum-avatar-size-200-border-radius var(--spectrum-global-dimension-static-percent-50)
--spectrum-avatar-size-200-border-size var(--spectrum-alias-avatar-border-size)
--spectrum-avatar-size-200-height var(--spectrum-alias-avatar-size-200)
--spectrum-avatar-size-200-width var(--spectrum-alias-avatar-size-200)
--spectrum-avatar-size-300-border-radius var(--spectrum-global-dimension-static-percent-50)
--spectrum-avatar-size-300-border-size var(--spectrum-alias-avatar-border-size)
--spectrum-avatar-size-300-height var(--spectrum-alias-avatar-size-300)
--spectrum-avatar-size-300-width var(--spectrum-alias-avatar-size-300)
--spectrum-avatar-size-400-border-radius var(--spectrum-global-dimension-static-percent-50)
--spectrum-avatar-size-400-border-size var(--spectrum-alias-avatar-border-size)
--spectrum-avatar-size-400-height var(--spectrum-alias-avatar-size-400)
--spectrum-avatar-size-400-width var(--spectrum-alias-avatar-size-400)
--spectrum-avatar-size-50-border-radius var(--spectrum-global-dimension-static-percent-50)
--spectrum-avatar-size-50-border-size var(--spectrum-alias-avatar-border-size)
--spectrum-avatar-size-50-height var(--spectrum-alias-avatar-size-50)
--spectrum-avatar-size-50-width var(--spectrum-alias-avatar-size-50)
--spectrum-avatar-size-500-border-radius var(--spectrum-global-dimension-static-percent-50)
--spectrum-avatar-size-500-border-size var(--spectrum-alias-avatar-border-size)
--spectrum-avatar-size-500-height var(--spectrum-alias-avatar-size-500)
--spectrum-avatar-size-500-width var(--spectrum-alias-avatar-size-500)
--spectrum-avatar-size-600-border-radius var(--spectrum-global-dimension-static-percent-50)
--spectrum-avatar-size-600-border-size var(--spectrum-alias-avatar-border-size)
--spectrum-avatar-size-600-height var(--spectrum-alias-avatar-size-600)
--spectrum-avatar-size-600-width var(--spectrum-alias-avatar-size-600)
--spectrum-avatar-size-700-border-radius var(--spectrum-global-dimension-static-percent-50)
--spectrum-avatar-size-700-border-size var(--spectrum-alias-avatar-border-size)
--spectrum-avatar-size-700-height var(--spectrum-alias-avatar-size-700)
--spectrum-avatar-size-700-width var(--spectrum-alias-avatar-size-700)
--spectrum-avatar-size-75-border-radius var(--spectrum-global-dimension-static-percent-50)
--spectrum-avatar-size-75-border-size var(--spectrum-alias-avatar-border-size)
--spectrum-avatar-size-75-height var(--spectrum-alias-avatar-size-75)
--spectrum-avatar-size-75-width var(--spectrum-alias-avatar-size-75)

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="Dog the User"
src="https://place.dog/500/500"
>
</sp-avatar>
75
<sp-avatar
size="75"
label="Dog the User"
src="https://place.dog/500/500"
>
</sp-avatar>
100
<sp-avatar
size="100"
label="Dog the User"
src="https://place.dog/500/500"
>
</sp-avatar>
200
<sp-avatar
size="200"
label="Dog the User"
src="https://place.dog/500/500"
>
</sp-avatar>
300
<sp-avatar
size="300"
label="Dog the User"
src="https://place.dog/500/500"
>
</sp-avatar>
400
<sp-avatar
size="400"
label="Dog the User"
src="https://place.dog/500/500"
>
</sp-avatar>
500
<sp-avatar
size="500"
label="Dog the User"
src="https://place.dog/500/500"
>
</sp-avatar>
600
<sp-avatar
size="600"
label="Dog the User"
src="https://place.dog/500/500"
>
</sp-avatar>
700
<sp-avatar
size="700"
label="Dog the User"
src="https://place.dog/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.