> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Avatar

> Avatar.vue Component Documentation

The `Avatar.vue` component is a reusable Vue.js component designed to display a circular avatar. It supports displaying an image if a `src` is provided or a text-based monogram if no image is available. The size of the avatar can be customized through props.

***

## Features

<CardGroup cols={2}>
  <Card title="Image or Monogram" icon="square-1">
    Displays an image when the <code>src</code> prop is provided or a text monogram when it is not.
  </Card>

  <Card title="Custom Sizes" icon="square-2">
    Supports three sizes: <code>large</code> (default), <code>small</code>, and <code>xSmall</code>.
  </Card>

  <Card title="Dynamic Content" icon="square-3">
    Easily switch between image and monogram representations.
  </Card>
</CardGroup>

***

## Usage

### Basic Examples

#### Image Avatar

```js theme={null}
import { Avatar } from '@robojuice/velure-ui';
```

```vue theme={null}
<Avatar monogram="KD" :src="'/vite.svg'" />
```

#### Monogram Avatar

```vue theme={null}
<Avatar monogram="KD" />
```

#### Small Monogram Avatar

```vue theme={null}
<Avatar monogram="KD" small />
```

#### Extra Small Monogram Avatar

```vue theme={null}
<Avatar monogram="KD" xSmall />
```

***

## Props

<ParamField path="monogram" type="string" default="''">
  The text displayed when no image source is provided.
</ParamField>

<ParamField path="small" type="boolean" default="false">
  Sets the avatar size to small.
</ParamField>

<ParamField path="xSmall" type="boolean" default="false">
  Sets the avatar size to extra small.
</ParamField>

<ParamField path="src" type="string" default="''">
  The image source for the avatar. If not provided, displays the monogram.
</ParamField>

***

## Example Use Cases

### Displaying a User's Image

Use the `Avatar` component to display a user's profile picture:

```vue theme={null}
<Avatar monogram="AB" :src="'/path/to/image.jpg'" />
```

### Fallback to Monogram

If an image is not available, the monogram will be displayed:

```vue theme={null}
<Avatar monogram="AB" />
```

### Small and Extra Small Sizes

Adjust the size of the avatar using the `small` and `xSmall` props:

```vue theme={null}
<Avatar monogram="CD" small />
<Avatar monogram="EF" xSmall />
```

***

## Notes

* **Dynamic Size**: The size is controlled by the `small` and `xSmall` props, with `large` being the default.
* **Image Fallback**: If no `src` is provided, the component will render the `monogram` as a fallback.
* **Customizable**: Combine this component with additional styling for unique use cases.

For further customization, refer to the component's source code.