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#
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.
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.
