Avatar is a component that displays a user's profile picture or initials. It can be customized with props like size, shape, background color, and image source. If no image source is provided, it will display the user's initials. This component is typically used in user profile pages, comment sections, or messaging applications.
import { Avatar } from '@lobehub/ui';| Name | Description | Type | Default |
|---|---|---|---|
| animation | -- | boolean | -- |
| avatar | The URL or base64 data of the avatar image | string|ReactNode | -- |
| background | The background color of the avatar | string | -- |
| shape | The shape of the avatar | "circle"|"square" | "circle" |
| size | The size of the avatar in pixels | number | 40 |
| title | The title text to display if avatar is not provided | string | -- |
| unoptimized | -- | boolean | -- |
| gap | -- | number | -- |
| src | Src of image avatar | ReactNode | -- |
| srcSet | Srcset of image avatar | string | -- |
| draggable | -- | boolean|true|false | -- |
| icon | Icon to be used in avatar | ReactNode | -- |
| style | -- | {} | -- |
| prefixCls | -- | string | -- |
| className | -- | string | -- |
| rootClassName | -- | string | -- |
| children | -- | ReactNode | -- |
| alt | -- | string | -- |
| crossOrigin | -- | ""|"anonymous"|"use-credentials" | -- |
| onClick | -- | (e?:React.MouseEvent<HTMLElement, MouseEvent>)=>void | -- |
| onError | -- | ()=>boolean | -- |
| ref | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | |bivarianceHack|RefObject | -- |
| key | -- | Key| | -- |
