#Avatar

#Import

import { Avatar } from '@dnb/eufemia'

#Description

Avatars are identifiers that make people and companies more scannable for payments, spending overviews, and social functionality. The fallback for a person is the letter version that uses the first letter of a person's name. A company has the icon version as its default/fallback. The badge is used to mark country/currency if needed.

#Relevant links

• Figma
• Source code
• Docs code

#Related components

Avatar is part of the Content category. Other components for similar needs:

• Accordion — to let people open and close sections of related content.
• Card — to group related content in a clear, separated area.
• CountryFlag — to show a country by its flag from an ISO country code.
• DateFormat — to show dates in the correct DNB format.
• Heading — to create accessible page headings with the correct level.
• Icon — to render and size an icon in line with Eufemia styling.

See all in Content →

#Demos

#Avatar

To ensure the correct use of Avatars, we require using a Avatar.Group with Avatar-components as children.
The required label-property in Avatar.Group will ensure the correct use of accessibility for screen readers.
See more examples below.

#Setting property size

#default size is 'medium'

#size 'small'

#size 'medium'

#size 'large'

#size 'x-large'

#Setting property variant

#default variant is 'primary'

#variant 'primary'

#variant 'secondary'

#variant 'tertiary'

#Passing icon

#Auto-size

An icon will automatically be given the correct size (size="auto") unless the icon's size property is set.

#Accepted values

The icon property can accept either an imported icon, a primary icon string, or an <Icon> or <IconPrimary> component.

import {
  calendar_medium as CalendarMedium,
} from '@dnb/eufemia/icons'

#Passing children

#Icon as child

A single <Icon> or <IconPrimary> component sent as a child will also follow the same auto sizing rules as the icon property.

#Passing image as src

Icons

Code

Dark mode

Banks

Code

Dark mode

Profiles

Code

Dark mode

Images of banks

Code

Dark mode

#Grouping Avatars

Eufemia contributors

+3

Code

Dark mode

#Customizing colors

#Avatar with a CountryFlag as a Badge

#Avatar with CountryFlag children