Avatar

An Avatar is a visual representation of a user or property, represented by their initials or an image.

Component checklist

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example

Storybook failed to load. Please connect to the VPN to access.

                                                        
                                                        
                                                            import { Avatar } from '@optimus-web/core';
                                                        
                                                        <Avatar
                                                            src="https://app.mews-develop.com/media/image/21baadfe-eda7-44de-be24-b10800981a8f?mode=3&width=640&height=640"
                                                            title="Ninhursag Deasún"
                                                            alt="avatar"
                                                            size="large"
                                                            notification
                                                            badgeAttributes={{
                                                                src: '',
                                                                title: 'My badge',
                                                                alt: 'avatar badge',
                                                            }}
                                                        />;
                                                        
                                                            

API

Avatar image extends from ImageProps and ImgHTMLAttributes

Name

Description

Type

Default

src

Defines the source for the avatar image.

 

If no src attribute is available, it renders the first two initials from the avatar title.

string

-

size?

The size of the image or fallback

AvatarSize


small | medium | large | extraLarge

large

border?

Adds a border to the avatar if no src attribute is set. Used internally.

boolean

undefined

notification?

Adds a notification blue badge to the top of the avatar. Only available for medium and large sizes

boolean

undefined

badgeAttributes?

Adds a small avatar badge to the bottom of the avatar. If no src attribute is available, it renders the first two initials from the badge title.

ImageProps &

{

position?: 'left' | 'right'

}

undefined

alt

alt text for the image

string

undefined

title

Defines the initials used in the fallback. It takes the first letter from the first two words in the title

string

undefined