Avatar#

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#