# Avatar
A circular image component for representing users or entities. Renders an image when a `src` is provided, or an empty placeholder when omitted.
```tsx demo
import { Avatar } from "@tenstorrent/vesper/avatar";
export default function AvatarDemo() {
return (
);
}
```
## Options
| Prop | Type | Description | Default |
| ------ | ---------------------- | ------------------------------------------------------------------------- | ------- |
| `size` | `"sm" \| "md" \| "lg"` | The size of the avatar. | `"md"` |
| `src` | `string` | The image source URL. When not provided, renders as an empty placeholder. | — |
| `alt` | `string` | The alt text for the avatar image. | `""` |
| `as` | `ElementType` | The root element type for polymorphic rendering. | `"div"` |
## Examples
### Basic usage
By default, an `Avatar` will render at `md` size if the `size` prop is not specified:
```tsx demo
import { Avatar } from "@tenstorrent/vesper/avatar";
export default function BasicAvatar() {
return (
);
}
```
### Sizes
An `Avatar` can be rendered in one of three sizes: `sm`, `md`, and `lg`:
```tsx demo
import { Avatar } from "@tenstorrent/vesper/avatar";
export default function AvatarSizes() {
return (
);
}
```
### Placeholder (no image)
Rendering an `Avatar` with no `src` prop will show an empty circle with a placeholder fill color:
```tsx demo
import { Avatar } from "@tenstorrent/vesper/avatar";
export default function PlaceholderAvatar() {
return ;
}
```
### Polymorphic usage
You can use the `as` prop to specify what underlying element to render. In this case, we are passing `as="a"` to render the `Avatar` as an anchor link. This is helpful for apps where clicking on an avatar may navigate to a user profile, for example:
```tsx demo
import { Avatar } from "@tenstorrent/vesper/avatar";
export default function AvatarAsLink() {
return (
);
}
```