React
Is new design vision part implemented using new tokens?
Component checklist
Up to date
Resources
Example
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
|
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 |