sp-avatar

Examples

API

Attributes and Properties #

Property	Attribute	Type	Default
`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 #

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="Dog the User"
    src="https://place.dog/500/500"
></sp-avatar>

<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.

Spectrum Web Components