npm package: @ranganath_md/ui_avatar
Description: Avatars are found throughout material design with uses in everything from tables to dialog menus.
Latest version: 3.0.2

# Avatar

Avatars are found throughout material design with uses in everything from tables to dialog menus.

### Author

- @author Vigneshwaran <vigneshwaran@crayond.co>

## Link

[Story Book Link Avatar](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido/ui_avatar
```

## Import component

```jsx
import { Avatar } from '@licuido/ui_avatar';
```

```jsx
<Avatar
  avatarData={[]}
  fontSize=""
  />
```

## Usage

```jsx
<Avatar
  avatarData={[]}
  fontSize="14px"
  backgroundColor="#f0f0f0"
  dummyAvatarBackgroundColor='#CBCBCB'
  borderColor="#ccc"
  border="1px solid"
  height="50px"
  width="50px"
  max={3}
  handleAvatarGroupClick={(e) => console.log('Avatar Group Clicked!', e)}
```

## Image

![alt text](./avatarGroupImage.png)

## Props

| Prop Name                | Type                                                                    | Description                                                                                                    |
| ------------------------ | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| `className`              | string                                                                  | Override class name for additional styling.                                                                    |
| `sx`                     | SxProps<Theme> or SxProps<Theme>[]                                      | System overrides and additional CSS styles.                                                                    |
| `avatarData`             | AvatarInterface[]                                                       | An array of objects containing data for individual avatars (see `AvatarInterface` for details).                |
| `fontSize`               | string                                                                  | Font size of the avatars.                                                                                      |
| `backgroundColor`        | string                                                                  | Background color of the avatars.                                                                               |
| `avatarBackgroundColor`  | string                                                                  | Background color of the dummy avatars.                                                                         |
| `borderColor`            | string                                                                  | Border color of the avatars.                                                                                   |
| `border`                 | string                                                                  | Border style of the avatars.                                                                                   |
| `height`                 | string                                                                  | Height of the avatars.                                                                                         |
| `width`                  | string                                                                  | Width of the avatars.                                                                                          |
| `variant`                | 'rounded' or 'square' or 'circular' or AvatarGroupPropsVariantOverrides | Variant of the avatar (either 'rounded', 'square', 'circular', or an object for additional variant overrides). |
| `max`                    | number                                                                  | Maximum number of avatars to display in the `AvatarGroup`.                                                     |
| `handleAvatarGroupClick` | (e: React.MouseEvent<HTMLDivElement>) => void \| undefined              | Callback function triggered on `AvatarGroup` click.                                                            |