[![npm](https://img.shields.io/npm/v/@highlight-ui/avatar)](https://www.npmjs.com/package/@highlight-ui/avatar)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/79f47a-avatar/b/26fe12)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/elements-avatar--blank-avatar)

# @highlight-ui/avatar

Using npm:

```bash
npm install @highlight-ui/avatar
```

Using yarn:

```bash
yarn add @highlight-ui/avatar
```

Using pnpm:

```bash
pnpm install @highlight-ui/avatar
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/avatar');
```

Once the package is installed, you can import the library:

```ts
import { Avatar } from '@highlight-ui/avatar';
```

## Usage

```tsx
import React, { useState } from 'react';
import { Avatar } from '@highlight-ui/avatar';

export default function AlertExample() {
  return <Avatar name="Test Name" src="/img.png" url="/url" />;
}
```

## Props 📜

| Prop                                | Type                                                   | Required | Default | Description                                                                      |
| :---------------------------------- | :----------------------------------------------------- | :------- | :------ | :------------------------------------------------------------------------------- |
| `animate`                           | `boolean`                                              | No       | `false` | If true, then Avatar will be animated on mouse hover                             |
| `containerClassname`                | `string`                                               | No       |         | A CSS class applied on component container                                       |
| `imageClassname`                    | `string`                                               | No       |         | A CSS class to be applied on the image element                                   |
| `name`                              | `string`                                               | No       |         | Name of the Avatar. If the image is not available, use first letters of the name |
| `avatarSize`                        | `number`                                               | No       |         | The `width` and `height` attributes for the container element                    |
| `iconSize`                          | `number`                                               | No       |         | The `size` attribute for the `Icon` element                                      |
| `typographyFontSize` (_deprecated_) | `TokenisedTypographyProps['fontSize']`                 | No       |         | The `fontSize` attribute for the `Typography` element                            |
| `src`                               | `string`                                               | No       |         | Image source for the Avatar                                                      |
| `url`                               | `string`                                               | No       |         | Url to go to on click                                                            |
| `imageAltText`                      | `string`                                               | No       |         | Alternative text for an image element                                            |
| `imageLoading`                      | `React.ImgHTMLAttributes<HTMLImageElement>['loading']` | No       |         | Optional property to indicate how the browser should load images on img tags     |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/79f47a-avatar/b/26fe12) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).