@synerise/ds-avatar

General guidelines

An avatar is an object used to represent a particular person in the application. The avatar is usually accompanied by the status (for example, Active, Inactive, Blocked) identifying the availability of any person in the application.

• Use avatars to represent a persona in the application. It may be a user of the application or a customer in the CRM module.
• You can use avatars to represent a general entity such as the campaign type or analysis type on a list in the application
• Every time when you use an image to communicate a concept, it’s important to use descriptive alt text. This ensures users with accessibility as it lets screen readers to describe what’s in the image to people who are visually impaired.

Anatomy of avatars

• Avatars contain an image that represents a user, a customer or entity. hen an image of a person is not uploaded, the application displays their initials instead (3).
• To give users an idea about the status of a particular user, you can display a status on the avatar. For instance, an avatar can show if the user is active or inactive.
• When a user haven't uploaded an image, the application users initials of the user to represent them.

Structure

Avatars are forms of proportional sides. Their shape is placed in a square or a circle.

Shapes

The shape of avatars can be both circular or square (make sure each corner has a 3px radius).

Sizes

Avatars have 4 sizes:

• Small - 24x24px
• Medium - 40x40px
• Large - 84x84px
• Extra large - 120x120px

The S-sized avatars contain the S-sized icons of the Standard icons set. The M, L and XL sizes contain the M-sized icons.

<div style={{ 'display': 'flex', 'justifyContent': 'space-between' }}>
    <Avatar size="small" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar size="medium" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar size="large" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar size="extraLarge" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
</div>

Avatar types

We divide avatars into three types. Every type has its own use case. If a customer hasn't uploaded an image, the application automatically displays an avatar with the initials of the customer.

Types of avatars:

• Avatar with a photo
• Avatar with initials
• Avatar with an icon

<div style={{ 'display': 'flex', 'justifyContent': 'space-between' }}>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[e-mail]'}} shape="square" size="medium" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[e-mail]'}} shape="cirlce" size="medium" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[e-mail]'}} src="https://www.w3schools.com/howto/img_avatar.png" size="large" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[e-mail]'}} src="https://www.w3schools.com/howto/img_avatar.png" shape="square" size="extraLarge" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
</div>

Variations

We can present avatars as a single entity or in a group.

• Single avatar
• Group avatar

Avatar with tooltips

<div style={{ 'display': 'flex', 'justifyContent': 'space-between' }}>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[e-mail]'}} size="small" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[e-mail]'}} size="medium" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[e-mail]'}} size="large" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[e-mail]'}} size="extraLarge" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
</div>

Avatar icons

import Icon, { FileM } from "@synerise/ds-icon";
<div style={{ 'display': 'flex', 'justifyContent': 'space-between' }}>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[e-mail]'}} shape="square" size="medium" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[e-mail]'}} shape="cirlce" size="medium" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[e-mail]'}} iconComponent={<Icon component={<FileM />} color={"white"} />} size="large" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[e-mail]'}} src="https://www.w3schools.com/howto/img_avatar.png" shape="square" size="extraLarge" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
</div>

Installation

npm i @synerise/ds-avatar

or

yarn add @synerise/ds-avatar

Usage

import Avatar from '@synerise/ds-avatar';

<Avatar shape={'circle'} backgroundColor={'grey'} size={20} />;

API

Property	Description	Type	Default
backgroundColor	Background color of the avatar	green / grey / yellow / blue / pink/ mars/ orange/ fern/ cyan/ purple / violet	orange
backgroundColorHue	Background color hue of the avatar	900 / 800 / 700 / 600 / 500 / 400 / 300 / 200 / 100 / 050	400
disabled	Determines if avatar is disabled	boolean	false
hasStatus	Aligns a badge with the avatar	boolean	false
iconComponent	Provides a custom component as a child. If both are provided, the prop icon has a greater priority	React.ReactNode	-
iconScale	Auto scale icon to sizes	boolean	true
shape	Shape of the avatar	circle / square	circle
size	Size of the avatar	small / medium / large / extraLarge	medium
src	Image source path	string	-
tooltip	Tooltip text displayed on hover	{ name: string, email: string }	-

UserAvatar

A variant that renders full standard user avatar, with expected tooltip etc.

This component should be used as user/client representation.

import { UserAvatar } from '@synerise/ds-avatar';

<UserAvatar user={{
  firstName: 'John',
  lastName: 'Doe',
  email: '[e-mail]',
  avatar: 'http://image.url/image.jpg',
}} />

Property	Description	Type	Default
user	User information	{ firstName: string, lastName: string, email: string, avatar: string }	-
backgroundColor	Background color of the avatar	auto / green / grey / yellow / blue / pink/ mars/ orange/ fern/ cyan/ purple / violet	auto
badgeStatus	Badge status	active / error / warning	-
disabled	Determines if avatar is disabled	boolean	false
iconComponent	Replace default user icon	React.ReactNode	-
size	Size of the avatar	small / medium / large / extraLarge	medium
tooltip	Change default tooltip text displayed on hover	{ title: string, description: string, status: string } / false	-

ObjectAvatar

A variant that renders full standard object avatar.

This component should be used for ex. in products, services, etc.

import { ObjectAvatar } from '@synerise/ds-avatar';

<ObjectAvatar object={{
  name: 'Product name',
  description: 'Nice description',
  status: 'API',
}} />

	Property	Description	Type	Default
object	Object information	{ name: string, description: string, status: string, avatar: string }	-
color	Background color of the avatar	green / grey / yellow / blue / pink/ mars/ orange/ fern/ cyan/ purple / violet	grey
backgroundColor	Background color of the avatar	auto / green / grey / yellow / blue / pink/ mars/ orange/ fern/ cyan/ purple / violet	auto
badgeStatus	Badge status	active / error / warning	-
disabled	Determines if avatar is disabled	boolean	false
iconComponent	Replace default user icon	React.ReactNode	-
size	Size of the avatar	small / medium / large / extraLarge	medium
tooltip	Change default tooltip text displayed on hover	{ title: string, description: string, status: string } / false	-