## Overview An `` is a thumbnail representation of an entity, such as a user or an organization. Avatars can have a defined image, which is usually uploaded by a user. [View the design documentation for this component.](https://spectrum.adobe.com/page/avatar/) ### Usage [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/avatar?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/avatar) [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/avatar?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/avatar) [![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-swzc3ix8) ```zsh yarn add @spectrum-web-components/avatar ``` Import the side effectful registration of `` via: ```js 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: ```js import { Avatar } from '@spectrum-web-components/avatar'; ``` ### Options #### Sizes Avatar sizes scale exponentially, based on the Spectrum type scale. These range from `size-50` to `size-700`. An avatar can also be customized to fit appropriately for your context. The default size is `size-100`. 50 ```html demo ``` 75 ```html demo ``` 100 ```html demo ``` 200 ```html demo ``` 300 ```html demo ``` 400 ```html demo ``` 500 ```html demo ``` 600 ```html demo ``` 700 ```html demo ``` ### States #### Generic avatars Use branded generic avatars when a user has not set their avatar image. These images are designed to be abstracted from all genders, locales, and cultures. #### Disabled An avatar in a disabled state shows that an avatar exists, but is not available or a user is not active in that circumstance. This can be used to maintain layout continuity and communicate that an avatar may become available or active later. ### Accessibility The `` component requires proper accessibility attributes to ensure screen readers can appropriately handle the avatar image. #### Labeled avatars The `label` attribute of the `` will be passed into the `` element as the `alt` attribute for use in defining a textual representation of the image displayed. This is the recommended approach for avatars that convey meaningful information. ```html demo ``` #### Decorative avatars When an avatar is purely decorative and does not convey meaningful information, use the `is-decorative` attribute to mark it as decorative. This will hide the avatar from screen readers with `alt=""` and `aria-hidden="true"`. ```html demo ``` #### Linked avatars When an avatar has an `href` attribute, it becomes a link and requires an accessible name. Provide a `label` attribute to give the link meaningful text for screen readers. ```html demo ``` **Note**: Decorative avatars should typically not be interactive links. If you need a decorative avatar with a link, you must provide a `label` attribute for accessibility compliance.