@synerise/ds-avatar

id: avatar title: Avatar

An avatar is an icon that represents a particular person, but, the avatar has more applications in the Synerise platform. It is used as:

• Human-related icon
• Object icon

Inspired by Ant Design Avatar

When to use it

• To represent a platform user (for example, to indicate the author of the campaign).
• To represent a customer (for example, on a list of customers, on a customer card).
• To represent the type of the item on a list (for example, a campaign, an analysis).

Component anatomy

This is a complex component, which means it may consist of more components, for example:

• badge

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}
/>

Badge sizes

Avatar types

Avatar statuses

API

Property	Description	Type	Default
shape	The shape of the avatar	circle \ square	circle
size	The size of the avatar	number \ string: large small default	default
src	The URL of the image for the avatar	string	-
srcSet	The list of sources to use for different screen resolutions	string	-
alt	The alternate text for the image	string	-
onError	The handler for image load errors, return false to prevent a default fallback behavior	() => boolean	-
hasStatus	Aligns badge with the avatar	boolean	false
iconComponent	Allows to provide a custom component as a child. The prop icon has greater priority if both are provided	ReactNode
backgroundColor	Background color of the avatar: red/green/grey/yellow/blue/pink/mars/orange/fern/cyan/purple/violet	string
backgroundColorHue	Background color hue of the avatar: 050/100/200/300/400/500/600/700/800/900	string	400
disabled	Defines if the avatar is diabled	boolean	false