npm package: @getfly-ui/avatar
Description: Avatar for getfly ui
Latest version: 0.0.15

# Avatar component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Favatar?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Favatar?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Favatar?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Favatar?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Favatar?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Favatar?style=for-the-badge)

## How to use

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

OR

```ts
import { Avatar } from 'getfly-ui';
```

# Props

## Avatar.Outline

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `ref` | `Ref<HTMLImageElement> or undefined` |  |  |
| `key` | `Key or null or undefined` |  |  |
| `className` | `string or undefined` |  | ClassName css |
| `color` | `string or undefined` |  | Background color css |
| `preset` | `enum` | `'medium'` | Size kích thước của button (`small`, `medium`, `large`) |
| `useMergeClass` | `boolean or undefined` | `true` | Use merge className |
| `colorTheme` | `enum` |  | Background color theme |
| `icon` | `enum` | `'user_filled'` | Icon name |
| `iconColorTheme` | `enum` | `'cerulean-700'` | Icon color theme |
| `iconColor` | `string or undefined` |  | Icon color |
| `borderWidth` | `number or undefined` | `1` | Border width css |
| `borderColorTheme` | `enum` | `'grayscale-300'` | Border color theme |
| `borderColor` | `string or undefined` |  | Border color css |
| `borderStyle` | `enum` | `'solid'` | Border style css |


## Avatar.Image

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `ref` | `Ref<HTMLImageElement> or undefined` |  | Ref image |
| `key` | `Key or null or undefined` |  |  |
| `src` | `string or undefined` |  | The path of the image |
| `className` | `string or undefined` |  | ClassName css |
| `color` | `string or undefined` |  | Background color css |
| `preset` | `enum` | `'medium'` | Size kích thước của button (`small`, `medium`, `large`) |
| `useMergeClass` | `boolean or undefined` | `true` | Use merge className |
| `colorTheme` | `enum` |  | Background color theme |
| `useFallback` | `boolean or undefined` | `false` | Image error => show fallback |
| `fallback` | `string or undefined` |  | Text preview |
| `fallbackId` | `number or undefined` |  | Number hash color |
| `textColorTheme` | `enum` | `'white'` | Text color by theme |
| `textColor` | `string or undefined` |  | Text color |
| `objectFit` | `enum` | `'cover'` | object-fit css |
| `onLoadingStatusChange` | `((status: ImageLoadingStatus) => void) or undefined` |  | Check `src` isset |


## Avatar.Group

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `preset` | `enum` | `'medium'` | Size kích thước của button (`small`, `medium`, `large`) |
| `useMergeClass` | `boolean or undefined` | `true` | Use merge className |
| `useTooltip` | `boolean or undefined` |  | Use tooltip label |
| `className` | `string or undefined` |  | ClassName css |
| `data` | `ListItem[]` | `[]` | List avatar |
| `limit` | `number or undefined` | `4` | Limit avatar |
| `otherColorTheme` | `enum` | `'grayscale-200'` | Other Color theme |
| `otherColor` | `string or undefined` |  | Other color |
| `otherTextColorTheme` | `enum` | `'grayscale-1000'` | Other text color theme |
| `otherTextColor` | `string or undefined` |  | Other text color |
| `showAdd` | `boolean or undefined` |  | Show add |
| `icon` | `enum` |  | Icon name |
| `iconAddColor` | `string or undefined` |  | Icon add color |
| `iconAddColorTheme` | `enum` | `'grayscale-550'` | Icon add color theme |
| `iconAddBorderStyle` | `enum` | `'dashed'` | Icon add border style |
| `iconAddBorderWith` | `number or undefined` |  | Icon add border width |
| `iconAddBorderColor` | `string or undefined` |  | Icon add border color |
| `iconAddBorderColorTheme` | `enum` | `'grayscale-550'` | Icon add border color theme |
| `iconAddTooltipText` | `string or undefined` |  | Icon add tooltip text |
| `onClickOther` | `(() => void) or undefined` |  | onClick other |
| `onClickAdd` | `(() => void) or undefined` |  | onClick add |