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;
+}