diff --git a/core/components/atoms/avatar/Avatar.tsx b/core/components/atoms/avatar/Avatar.tsx index a4b811269..7306dba06 100644 --- a/core/components/atoms/avatar/Avatar.tsx +++ b/core/components/atoms/avatar/Avatar.tsx @@ -141,6 +141,11 @@ export const Avatar = (props: AvatarProps) => { ['Avatar-presence--away']: presence === 'away', }); + const statusHintClassName = classNames({ + ['Avatar-statusHint']: true, + ['d-none']: shape !== 'round' || size !== 'regular', + }); + const sharedProp = { size, firstName, @@ -204,6 +209,9 @@ export const Avatar = (props: AvatarProps) => { renderAvatar() )} {presence && } + + + ); diff --git a/css/src/components/avatar.css b/css/src/components/avatar.css index 5d937c5e8..6825f4d5c 100644 --- a/css/src/components/avatar.css +++ b/css/src/components/avatar.css @@ -124,3 +124,17 @@ .Avatar-presence--away { background: var(--secondary-dark); } + +.Avatar-statusHint { + top: -2px; + right: -2px; + width: 12px; + height: 12px; + border-radius: 50%; + box-shadow: 0 0 0 2px red; + display: flex; + align-items: center; + justify-content: center; + background: green; + position: absolute; +}