<nord-avatararia-describedby="tooltip"name="Laura Williams"size="l"></nord-avatar><nord-tooltipid="tooltip"position="inline-end">Laura Williams (online)</nord-tooltip>
Properties
Property
Attribute
Description
Type
Default
size
size
The size of the avatar.
"s" | "m" | "l" | "xl" | "xxl" | "xxxl"
"m"
src
src
The URL of the avatar image uploaded by the user.
string | undefined
undefined
name
name
The name of the person or entity.
string
""
icon
icon
The fallback icon.
string
""
variant
variant
The style variant of the avatar.
"default" | "square"
"default"
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
Property
Description
Default
--n-avatar-color
Controls the color of the avatar fallback, using color tokens.
Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.
Don't use an avatar when an icon is more suitable, for example when denoting groups or "things".
Integration
For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.
Integration Guidelines
Troubleshooting
If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.