@synerise/ds-avatar

v0.17.18

Published

10 days ago

Avatar UI Component for the Synerise Design System

Downloads

860

0High
0Medium
0Low

synerise

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: '[email protected]'}} shape="square" size="medium" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[email protected]'}} shape="cirlce" size="medium" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[email protected]'}} src="https://www.w3schools.com/howto/img_avatar.png" size="large" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[email protected]'}} 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: '[email protected]'}} size="small" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[email protected]'}} size="medium" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[email protected]'}} size="large" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[email protected]'}} 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: '[email protected]'}} shape="square" size="medium" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[email protected]'}} shape="cirlce" size="medium" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[email protected]'}} iconComponent={<Icon component={<FileM />} color={"white"} />} size="large" backgroundColor="blue" backgroundColorHue="600">JJ</Avatar>
    <Avatar tooltip={{name: 'Jan Janowski', email: '[email protected]'}} 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

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: '[email protected]',
  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 | - | |