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'
Persons:Ola Nordmann
Code Editor
<Avatar.Group label="Persons:"> <Avatar>Ola Nordmann</Avatar> </Avatar.Group>
size 'small'
Text Animals:Duck Text
Code Editor
Text{' '} <Avatar.Group label="Animals:"> <Avatar size="small">Duck</Avatar> </Avatar.Group>{' '} Text
size 'medium'
Stocks:NFLX
Code Editor
<Avatar.Group label="Stocks:"> <Avatar size="medium">NFLX</Avatar> </Avatar.Group>
size 'large'
Companies:Amazon
Code Editor
<Avatar.Group label="Companies:"> <Avatar size="large">Amazon</Avatar> </Avatar.Group>
size 'x-large'
TV Shows:Friends
Code Editor
<Avatar.Group label="TV Shows:"> <Avatar size="x-large">Friends</Avatar> </Avatar.Group>
Setting property variant
default variant is 'primary'
Dogs:Kleiner münsterländer
Code Editor
<Avatar.Group label="Dogs:"> <Avatar>Kleiner münsterländer</Avatar> </Avatar.Group>
variant 'primary'
Cities:Oslo
Code Editor
<Avatar.Group label="Cities:"> <Avatar variant="primary">Oslo</Avatar> </Avatar.Group>
variant 'secondary'
Countries:Spain
Code Editor
<Avatar.Group label="Countries:"> <Avatar variant="secondary">Spain</Avatar> </Avatar.Group>
variant 'tertiary'
Cars:Tesla
Code Editor
<Avatar.Group label="Cars:"> <Avatar variant="tertiary">Tesla</Avatar> </Avatar.Group>
Passing icon as children
Icons:
Code Editor
<Avatar.Group label="Icons:"> <Avatar variant="primary"> <Icon icon={Confetti} /> </Avatar> </Avatar.Group>
Icons:
Code Editor
<Avatar.Group label="Icons:"> <Avatar variant="secondary"> <Icon icon={Card} /> </Avatar> </Avatar.Group>
Icons:
Code Editor
<Avatar.Group label="Icons:"> <Avatar variant="tertiary"> <Icon icon={AccountCard} /> </Avatar> </Avatar.Group>
Logos:
Code Editor
<Avatar.Group label="Logos:"> <Avatar> <Logo size="auto" inherit_color /> </Avatar> </Avatar.Group>
Passing image as src
Icons:
Code Editor
<Avatar.Group label="Icons:"> <Avatar variant="tertiary" src="/dnb/safari-pinned-tab.svg" alt="DNB Logo" /> </Avatar.Group>
Banks:
Code Editor
<Avatar.Group label="Banks:"> <Avatar src="/dnb/android-chrome-192x192.png" alt="DNB Logo" size="x-large" /> </Avatar.Group>
Profiles:
Code Editor
<Avatar.Group label="Profiles:"> <Avatar src="/images/avatars/1501870.jpg" alt="Profile picture" size="large" /> </Avatar.Group>
Images of banks:
Code Editor
<Avatar.Group label="Images of banks:"> <Avatar variant="secondary" size="large" imgProps={{ width: '48', height: '48', src: '/dnb/android-chrome-192x192.png', alt: 'DNB Logo', }} /> </Avatar.Group>
Grouping Avatars
Text Friends:AndersBjørnarCathrineDidrikErlend+2 Text
Code Editor
Text{' '} <Avatar.Group label="Friends:" size="small" variant="primary" maxElements={6} > <Avatar>Anders</Avatar> <Avatar>Bjørnar</Avatar> <Avatar>Cathrine</Avatar> <Avatar>Didrik</Avatar> <Avatar>Erlend</Avatar> <Avatar>Frida</Avatar> <Avatar>Gøril</Avatar> </Avatar.Group>{' '} Text
Employees:AndersBjørnarCathrineDidrik+3
Code Editor
<Avatar.Group label="Employees:" size="medium" maxElements={5}> <Avatar>Anders</Avatar> <Avatar>Bjørnar</Avatar> <Avatar>Cathrine</Avatar> <Avatar>Didrik</Avatar> <Avatar>Erlend</Avatar> <Avatar>Frida</Avatar> <Avatar>Gøril</Avatar> </Avatar.Group>
Borrowers:AndersBjørnarCathrine+4
Code Editor
<Avatar.Group label="Borrowers:" size="large" variant="tertiary" maxElements={4} > <Avatar>Anders</Avatar> <Avatar>Bjørnar</Avatar> <Avatar>Cathrine</Avatar> <Avatar>Didrik</Avatar> <Avatar>Erlend</Avatar> <Avatar>Frida</Avatar> <Avatar>Gøril</Avatar> </Avatar.Group>
Enemies:AndersBjørnar+5
Code Editor
<Avatar.Group label="Enemies:" size="x-large" variant="secondary" maxElements={3} > <Avatar>Anders</Avatar> <Avatar>Bjørnar</Avatar> <Avatar>Cathrine</Avatar> <Avatar>Didrik</Avatar> <Avatar>Erlend</Avatar> <Avatar>Frida</Avatar> <Avatar>Gøril</Avatar> </Avatar.Group>
Eufemia contributors:
Code Editor
<Avatar.Group label="Eufemia contributors:" size="large" maxElements={5}> <Avatar src="/images/avatars/1501870.jpg" alt="Profile picture" /> <Avatar src="/images/avatars/35217511.jpg" alt="Profile picture" /> <Avatar src="/images/avatars/21338570.jpg" alt="Profile picture" /> <Avatar src="/images/avatars/1359205.jpg" alt="Profile picture" /> <Avatar src="/images/avatars/1501870.jpg" alt="Profile picture" /> <Avatar src="/images/avatars/1501870.jpg" alt="Profile picture" /> <Avatar src="/images/avatars/1501870.jpg" alt="Profile picture" /> </Avatar.Group>