AvatarProps API Reference
Prop reference
| Title | Type | Default | Description |
|---|---|---|---|
| alt* | string | – | The alt text for the image. Usually "x's avatar", for e.g. |
| src | string | – | The URL of the image to display. |
| color | ColorPalette | string | – | experimental The background color of the avatar. Can be a color from the palette or a custom color. |
| size | Size | medium | The size of the avatar. |
| isSelected | boolean | – | Whether the avatar is "selected" or not. |
| className | string | – | Additional classNames for the root element. |
| rootClassName | string | – | deprecated Additional classNames for the root element. |
| componentClassName | string | – | Additional classNames for the component in the image slot. |
| isPinging | boolean | – | experimental Whether the avatar is "pinging" or not. This will add a ping animation to the avatar. |
| gems | Array<AvatarGem> | – | Gems to display on the avatar. See related AvatarGem for type. |
| slots | AvatarSlots | – | Slots to use for the avatar. See related AvatarSlots for type. |
| onClick | OnClickFunction<HTMLDivElement> | – | Function to call when the avatar is clicked. |
* Props marked with an asterisk are required.
CSS target reference
| Export | CSS Class Target | Description |
|---|---|---|
| AvatarTargetClassRoot | .NPUI-Avatar-root | Root of the Avatar |
| AvatarTargetClassImage | .NPUI-Avatar-image | The Image element |
| AvatarTargetClassPing | .NPUI-Avatar-ping | The Pinging element used for isPinging |
| AvatarTargetClassGem | .NPUI-Avatar-gem | A Gem element on the Avatar |