@primer/react-brand/docs/components/Avatar/react.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

---
title: Avatar
description: Use the avatar component to display a thumbnail representation of a person.
keywords: ['image', 'thumbnail', 'profile', 'user', 'organization']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/Avatar/Avatar.tsx
storybook: '/brand/storybook/?path=/story/components-avatar--playground'
---

```js
import {Avatar, Stack} from '@primer/react-brand'
```

## Examples

### Default

```jsx
<Avatar src="/images/avatar-mona.png" alt="Mona profile" />
```

### Sizes

The size of the avatar can be controlled by the `size` prop.

```jsx
<Stack direction="horizontal" alignItems="center" justifyContent="center" gap="spacious" style={{height: 200}}>
  <Avatar size={32} src="/images/avatar-mona.png" alt="Mona avatar at 32px" />
  <Avatar size={40} src="/images/avatar-mona.png" alt="Mona avatar at 40px" />
  <Avatar size={48} src="/images/avatar-mona.png" alt="Mona avatar at 48px" />
  <Avatar size={64} src="/images/avatar-mona.png" alt="Mona avatar at 64px" />
  <Avatar size={80} src="/images/avatar-mona.png" alt="Mona avatar at 80px" />
</Stack>
```

#### Responsive Sizes

Passing an Object of a particular shape will allow granular control of `size` at various supported breakpoints.

Supported breakpoints are `narrow`, `regular` and `wide`.

The Object value does not require all properties be passed, but rather operates on the basis of `min-width`.

E.g. Providing only `narrow` will apply that value to all larger breakpoints, but not the other way.

```jsx
<Avatar size={{narrow: 32, regular: 40, wide: 80}} src="/images/avatar-mona.png" alt="Mona avatar at 32px" />
```

### Shapes

The shape of the avatar can be controlled by the `shape` prop.

```jsx
<Stack direction="horizontal" alignItems="center" justifyContent="center" gap="spacious" style={{height: 200}}>
  <Avatar size={64} shape="circle" src="/images/avatar-mona.png" alt="A circular avatar picture" />
  <Avatar size={64} shape="square" src="/images/avatar-mona.png" alt="A square avatar picture" />
</Stack>
```

## Component props

### Avatar `Required`

| name        | type           | default  | required | description                       |
| ----------- | -------------- | -------- | -------- | --------------------------------- |
| `alt`       | `string`       |          | `true`   | The alt text of the image         |
| `className` | `string`       |          | `false`  | Avatar custom class               |
| `size`      | `AvatarSizes`  | `40`     | `false`  | The size (in pixels) of the image |
| `shape`     | `AvatarShapes` | `circle` | `false`  | The shape of the image            |
| `src`       | `string`       |          | `true`   | A url to the person's image       |