Skip to content

Import

import { Avatar } from '@dnb/eufemia'

Description

Avatars are identifiers that makes 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 persons name. A company has the icon version as it’s default/fallback. The badge is used to mark country/currency if needed.

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'

PersonsOla Nordmann

size 'small'

Text AnimalsDuck Text

size 'medium'

StocksNFLX

size 'large'

CompaniesAmazon

size 'x-large'

TV ShowsFriends

Setting property variant

default variant is 'primary'

DogsKleiner münsterländer

variant 'primary'

CitiesOslo

variant 'secondary'

CountriesSpain

variant 'tertiary'

CarsTesla

Passing icon as children

Icons
Icons
Icons
Logos

Passing image as src

Icons
DNB Logo
Banks
DNB Logo
Profiles
Profile picture
Images of banks
DNB Logo

Grouping Avatars

Text FriendsAndersBjørnarCathrineDidrikErlend+2 Text
EmployeesAndersBjørnarCathrineDidrik+3
BorrowersAndersBjørnarCathrine+4
EnemiesAndersBjørnar+5
Eufemia contributors
Profile picture
Profile picture
Profile picture
Profile picture
+3