# Avatar

Shows a circular image of a person or entity, with a fallback.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Avatar.tsx)

## Overview

An avatar is a circular image of a person or entity. It shows a fallback, such as initials, while the image loads or after it fails.

Give the image an `alt` with the name, or an empty `alt` when the name is already adjacent.

## Examples

### Basic

```tsx
import { Avatar } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Avatar.Root>
      <Avatar.Fallback>J</Avatar.Fallback>
    </Avatar.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Avatar/Basic.tsx)

### Size

Set `size` to `24`, `32`, `40`, `48`, or `64`. It defaults to `48`.

```tsx
import { Avatar, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['24', '32', '40', '48', '64'] as const).map((size) => (
        <Avatar.Root key={size} size={size}>
          <Avatar.Fallback>J</Avatar.Fallback>
        </Avatar.Root>
      ))}
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', gap: '3' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Avatar/Size.tsx)

### Image

Add `Avatar.Image` with a `Fallback`, since the image renders only once it has loaded.

```tsx
import { Avatar, Identicon, style } from '@tempoxyz/ds'

const photo = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect width="64" height="64" fill="#0ea5e9"/></svg>')}`

export function Demo() {
  return (
    <div {...styles.row()}>
      <Avatar.Root>
        <Avatar.Image alt="Jane Cooper" src={photo} />
        <Avatar.Fallback>J</Avatar.Fallback>
      </Avatar.Root>
      <Avatar.Root>
        <Avatar.Fallback>
          <Identicon address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" aria-hidden size="fill" />
        </Avatar.Fallback>
      </Avatar.Root>
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', gap: '3' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Avatar/Image.tsx)

### Overlap

Set `overlap` on `Avatar.Group` to pull each avatar over the previous one. It defaults to `false`.

```tsx
import { Avatar } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Avatar.Group overlap>
      {['A', 'B', 'C', 'D'].map((letter) => (
        <Avatar.Root key={letter}>
          <Avatar.Fallback>{letter}</Avatar.Fallback>
        </Avatar.Root>
      ))}
    </Avatar.Group>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Avatar/Overlap.tsx)

### Expand on Hover

Set `expandOnHover` on an overlapped `Avatar.Group` to spread it apart on hover and keyboard focus.

```tsx
import { Avatar } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Avatar.Group expandOnHover overlap>
      {['A', 'B', 'C', 'D', 'E'].map((letter) => (
        <Avatar.Root key={letter}>
          <Avatar.Fallback>{letter}</Avatar.Fallback>
        </Avatar.Root>
      ))}
    </Avatar.Group>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Avatar/ExpandOnHover.tsx)

## Guidelines

TODO: Write guidelines for Avatar.