---
title: "Avatar"
description: "Used to represent a single user."
sidebar_label: "Avatar"
slug: /reference/components/avatar
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# Avatar

Used to represent a single user.

**Package:** `@terreno/ui`  
**Categories:** Component  
**Props interface:** `AvatarProps`  
**Story source:** [`demo/stories/Avatar.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Avatar.stories.tsx)

## Live demo

<ComponentDemo name="Avatar" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `name` | `string` | Yes | The name of the user. This is used for the placeholder treatment if an image is not available. |
| `accessibilityLabel` | `string` |  | Accessibility label for the avatar image. |
| `doNotDisturb` | `boolean` |  | If true, the status will have a "Z" to indicate the user has snoozed notifications. |
| `hasBorder` | `boolean` |  | Adds a white border around Avatar so it's visible when displayed on other images. |
| `onChange` | `reflection` |  | Function to handle the avatar image edit |
| `size` | `union` |  | xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px. |
| `src` | `string` |  | The URL of the user's image. |
| `status` | `AvatarStatus` |  | The status of the user to display with the avatar. |
| `testID` | `string` |  | Root test id for the primary interactive element or container. |