Avatar

Avatars are used to represent individual users and teams.

Best practices

  • Avatars should be used with a tooltip, that on hover, displays the entity name (A users full name, or a company name). The tooltip should not contain any other information. See also (Tooltips).

Grouping avatars

Avatars can be grouped into collections, for example when a project has more than one associated freelancer.

No more than five avatars should be grouped together. See also the Avatar Group component

Props

NameTypeDescription
src
stringA URL to the avatar
size
'small' | 'medium' | 'large' | 'extra-large' | 'extra-extra-large'The avatar size
initials
stringTwo initials to be displayed as a fallback if no src is set
resourceHash
stringA consistent resource (an email or name) to be used as a hash to generate the fallback color
className
stringAny classes to pass down
isGrouped
booleanIs the avatar grouped

Standard Avatar

<Avatar src="https://randomuser.me/api/portraits/women/21.jpg" />

Avatar sizes

<span> <Avatar size="small" src="https://randomuser.me/api/portraits/women/21.jpg" /> <Avatar size="medium" src="https://randomuser.me/api/portraits/women/21.jpg" /> <Avatar size="large" src="https://randomuser.me/api/portraits/women/21.jpg" /> <Avatar size="extra-large" src="https://randomuser.me/api/portraits/women/21.jpg" /> <Avatar size="extra-extra-large" src="https://randomuser.me/api/portraits/women/21.jpg" /> </span>

Avatar fallback

If no image (or a broken image resource) is passed in, then the avatar will fallback to displaying two initials
<Avatar initials="MF" src="https://kalohq.com" />