# swc-avatar

A static avatar component that displays a circular user profile image. Provide `alt` with a description of the person or entity depicted.

```js
import '@adobe/spectrum-wc/components/avatar/index.js';
// <swc-avatar></swc-avatar>
```

## Attributes

| Name         | Type                  | Default | Description                                                                              |
| ------------ | --------------------- | ------- | ---------------------------------------------------------------------------------------- |
| `src`        | `string`              | `''`    | URL of the profile image to display.                                                     |
| `alt`        | `string \| undefined` | -       | Text description of the avatar image.                                                    |
| `size`       | `AvatarSize`          | `500`   | The size of the avatar. Invalid values fall back to the default (500).                   |
| `outline`    | `boolean`             | `false` | Renders a visual outline around the avatar image.                                        |
| `disabled`   | `boolean`             | `false` | Renders the avatar at reduced opacity, indicating the entity is inactive or unavailable. |
| `decorative` | `boolean`             | `false` | Marks the avatar as decorative, hiding it from assistive technology.                     |

## CSS Custom Properties

| Name                            | Description                            |
| ------------------------------- | -------------------------------------- |
| `--swc-avatar-size`             | Size (inline and block) of the avatar. |
| `--swc-avatar-outline-color`    | Color of the avatar outline.           |
| `--swc-avatar-outline-width`    | Width of the avatar outline.           |
| `--swc-avatar-opacity-disabled` | Opacity when the avatar is disabled.   |