Usage
Avatar represents a user or entity as an image, initials, or an icon. Give it a name for the accessible label and initials fallback, and an optional src for a photo.
import "@nordhealth/components/lib/Avatar"
Examples
Sizes
Set size to one of s, m, l, xl, xxl, or xxxl.
Initials
With no src, the avatar shows initials derived from name (or the text you provide as content) across every size.
Image
Provide a src to show a photo; the name is still used as the accessible label and the fallback if the image fails to load.
Image sizes
The same photo shown at each available size.
Icon
Use icon to show an icon instead of initials.
Icon sizes
An icon avatar rendered across every size.
Square
Use variant="square" for non-person entities such as organisations.
Square sizes
A square avatar with initials shown at each available size.
With tooltip
Pair an avatar with a Tooltip to reveal the full name or status on hover and focus.
Patients and clients
Avatars use animal-category icons to represent patients across species.
Users
Guidance for staff, clinic, and blank avatars, including when to fall back to initials or a silhouette.
RTL
Avatar follows the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Always provide a
name— it is used as the avatar's accessible label and to derive the initials shown when there is no image. - When an
srcimage fails to load, the avatar falls back to the initials fromname, so the identity is never lost. - Decisions conveyed only by avatar colour should be reinforced elsewhere; colour alone isn't accessible.
API reference
Avatar
Avatar is used for showing a thumbnail representation of a single user or entity. Default avatar illustration is displayed when no src is specified.
<nord-avatar></nord-avatar>Props
| 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 | — |
name | name | The name of the person or entity. | string | '' |
icon | icon | The fallback icon. | string | undefined | — |
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. | var(--n-color-status-highlight) |
--n-avatar-size | Controls the size of the avatar, using icon sizing tokens. | var(--n-size-icon-l) |
--n-avatar-box-shadow | Controls the box shadow for the avatar. | none |
--n-avatar-text-color | Controls the color of the avatar’s text and icon, using color tokens. | var(--n-color-text-on-accent) |
Dependencies
This component is internally dependent on the following components:
- <nord-icon>
Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.
- <nord-visually-hidden>
VisuallyHidden
Visually hidden is used when an element needs to be available to assistive technologies like screen readers, but be otherwise hidden.
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use the circle avatar to represent a single user or an animal.
- Use the square avatar for organizations or group of animals.
- Always add the name of the user, animal, organization, or group of animals using the
nameproperty. - For the best results, use square images or images cropped into a square.
Don’t
- Don’t use the circle avatar to represent organizations or group of animals.
- Don’t use the square avatar to represent a single user or an animal.
- Don’t use an avatar when an icon is more suitable, for example when denoting groups or "things".
- Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.