Avatar is typically used to display a user's profile picture or an icon representing the user. It can contain an image, icon, or the user's initials, and is commonly used wherever user identity needs to be displayed.
import { Avatar } from "wis/avatar"
API Reference#
| Name | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | none | Displays the avatar icon. This property is ignored if an avatar image URL is provided. |
| src | string | none | Displays the avatar image. |
| size | lg md sm xs | md | The size of the avatar. |
| color | auto gray blue purple orange red green | auto | Controls the display color of the avatar. auto color is not completely random, but randomly generated from a list of colors. |
| colorSchema | dark light outline | light | Controls the display color schema of the avatar. |
| shape | circle square | circle | The shape of the avatar to apply. |
| name | string | none | The name will only be displayed if there is no image or icon. |
| initials | string | none | When the initials automatically generated from the name do not meet the requirements, you can pass in custom display text through this property. |