@spectrum-web-components/avatar

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

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.

Changelog

1.0.1 (2024-11-11)

Bug Fixes

• action-group: add null check for slotElement in manageButtons (#4924) (60db5ab)
• icon: remove size300 suffix from chevron and checkmark icons in Spectrum 2 (#4904) (a22f42b)
• menu: prevent sp-menu-item text-align cascading (#4868) (6663820)
• number-field, slider: ensure cached value is cleared when toggling between different steps (#4846) (1c84c96)
• number-field: allow only numeric characters for Japanese/Chinese IME (#4817) (a791bd1)
• overlay: ensure smooth animation when opening modal overlays (#4879) (cd8dad7)
• overlay: overlay closing another overlay (#4880) (30434fa)
• overlay: remove flex display for dialog (#4902) (48448ea)
• picker: don't handle pointerdown for touch devices (#4850) (3a62d13)
• search: clear button ui in express (#4910) (f88e1e2)
• slider: update slider config to process the tick css correctly (#4905) (7b1dfd0)