# Avatar

> Image avatar with a fixed square or rounded shape. Shows a spinner while the image loads.

Source: https://ngwr.dev/reference/components/avatar  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrAvatar } from 'ngwr/avatar';

@Component({ imports: [WrAvatar] })
export class MyComponent {}
```

## Basic usage

```html
<wr-avatar url="/me.png" alt="Roman" />
```

## Sizes

Accepts a number (pixels), '48', '48px', or '3rem'. No percentages — avatars need a deterministic pixel size.

```html
<wr-avatar url="/me.png" alt="Roman" [size]="32" />
<wr-avatar url="/me.png" alt="Roman" size="4rem" />
<wr-avatar url="/me.png" alt="Roman" size="6rem" />
```

## Shape

`rounded` (default) is a soft rounded square, `square` keeps hard corners. `circle` replaces the old `[rounded]` boolean. `squircle` uses `corner-shape: squircle` where supported.

```html
<wr-avatar url="/me.png" alt="Roman" shape="square" />
<wr-avatar url="/me.png" alt="Roman" shape="rounded" />
<wr-avatar url="/me.png" alt="Roman" shape="circle" />
<wr-avatar url="/me.png" alt="Roman" shape="squircle" />
```

## Initials fallback

When the avatar has no image, projected content fills the box. Use a flex layout to center it. A `[url]` that fails to load lands in the same place — the spinner and the broken `<img>` are dropped and the initials behind them show through, which is the one state where an avatar is guaranteed to have something worth showing.

```html
<wr-avatar [size]="48" shape="circle">RK</wr-avatar>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `url` | Image URL. When unset, only projected content (e.g. initials) renders. | `string \| null` | `null` |
| `alt` | Alt text for the image. Falls back to `avatar.alt`, then `'Avatar'` — pass the person's name where you have it, since that is what a reader wants. | `string \| null` | `null` |
| `shape` | Corner treatment. `rounded` (default) is a soft rounded square, `circle` is the classic profile avatar, `squircle` is the iOS look. | `WrAvatarShape` | `'rounded'` |
| `size` | Box size. See {@link WrAvatarSize} for accepted values. | `WrAvatarSize` | `'6rem'` |

## CSS variables

Custom properties `ngwr/avatar` publishes. Each default below is declared on the component's own selector, so a `:root` override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-avatar-img-opacity` | `0` | `.wr-avatar` +1 variant override |
| `--wr-avatar-radius` | `10%` | `.wr-avatar` +2 variant overrides |
| `--wr-avatar-ring` | `var(--wr-color-border)` | `.wr-avatar` +1 variant override |