# Avatar

- Page: https://jiguang132.com/resources/arco-design/docs/avatar
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Used as an avatar, it can be displayed in the form of pictures, icons or characters.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage. If the avatar content is text, the font size will be automatically adjusted to fit the content in the avatar.
- **Size**: Use `size` to set the size of the avatar, which defaults to `40px`. Two `shape`s are available for the avatar: `circle` and `square`.
- **Group**: Use `Avatar.Group` to group a list of avatars. `size` can be used to specify the size of each avatar.
- **Trigger icon**: Customize the interactive button through `triggerIcon` and `triggerType`. Two types are available: `mask` and `button`. Callbacks can be added through the `onClick` parameter.
- **Auto fix font Size**: If the avatar content is text, the font size will be automatically adjusted to fit the content in the avatar.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Avatar

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|autoFixFontSize|Whether to automatically adjust the font size according to the size of the avatar.|boolean |`true`|
|size|The size of the avatar in `px`|number |`-`|
|shape|The shape of the avatar. Two shapes are available: `circle` and `square`|'circle' \| 'square' |`circle`|
|triggerType|Clickable avatar interaction type.|'mask' \| 'button' |`button`|
|triggerIcon|Clickable avatar interaction icon.|ReactNode |`-`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|
|triggerIconStyle|Interactive icon style|CSSProperties |`-`|
|onClick|Callback when avatar is clicked|(e) => void |`-`|

### Avatar.Group

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|autoFixFontSize|Whether to automatically adjust the font size according to the size of the avatar (the priority is lower than the Avatar component itself)|boolean |`true`|-|
|zIndexAscend|Whether `z-index` of the avatars in group are in ascending order. The default is in descending order.|boolean |`-`|2.3.0|
|maxCount|The maximum number of avatars displayed in the avatar group. The rest of avatars will be displayed as a `+x`.|number |`-`|2.4.0|
|size|The size of the avatar in `px`, (the priority is lower than the Avatar component itself)|number |`-`|-|
|shape|The shape of the avatar, (priority is lower than the Avatar component itself)|'circle' \| 'square' |`circle`|-|
|className|Additional css class|string \| string[] |`-`|-|
|maxPopoverTriggerProps|`TriggerProps` for popover around `+x`.|[TriggerProps](trigger#trigger) |`-`|2.4.0|
|maxStyle|Style for `+x`.|CSSProperties |`-`|2.4.0|
|style|Additional style|CSSProperties |`-`|-|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt