---
id: fast-foundation.avatar
title: Avatar class
hide_title: true
---
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[@microsoft/fast-foundation](./fast-foundation.md) &gt; [Avatar](./fast-foundation.avatar.md)

## Avatar class

An Avatar Custom HTML Element


media - Used for media such as an image


- The default slot for avatar text, commonly a name or initials


badge - Used to provide a badge, such as a status badge


backplate - The wrapping container for the avatar


link - The avatar link


media - The media slot


content - The default slot

<b>Signature:</b>

```typescript
export declare class Avatar extends FoundationElement 
```

## Properties

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [color](./fast-foundation.avatar.color.md) |  | string | Indicates the Avatar should have a text color. |
|  [fill](./fast-foundation.avatar.fill.md) |  | string | Indicates the Avatar should have a color fill. |
|  [link](./fast-foundation.avatar.link.md) |  | string | Indicates the Avatar should have url link |
|  [shape](./fast-foundation.avatar.shape.md) |  | AvatarShape | Indicates the Avatar shape should be. By default it will be set to "circle". |

## Methods

|  Method | Modifiers | Description |
|  --- | --- | --- |
|  [connectedCallback()](./fast-foundation.avatar.connectedcallback.md) |  | Internal |
