diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md
index e0e5eafe4..a9186400c 100644
--- a/pages/_docs/avatars.md
+++ b/pages/_docs/avatars.md
@@ -34,7 +34,7 @@ Add an online or offline status indicator to show user's availability.
 {% include ui/avatar.html person-id=13 status="success" %}
 {% include ui/avatar.html person-id=14 status="warning" %}
 {% include ui/avatar.html person-id=15 status="info" %}
-{% include ui/avatar.html person-id=16 status="gray" %}
+{% include ui/avatar.html person-id=16 status="gray" status-text="5" %}
 {% endexample %}
 
 ## Avatar shape
diff --git a/pages/_includes/ui/avatar.html b/pages/_includes/ui/avatar.html
index eac4b4a52..28259f8db 100644
--- a/pages/_includes/ui/avatar.html
+++ b/pages/_includes/ui/avatar.html
@@ -15,5 +15,7 @@
 	{% endunless %}
 {% endif %}
 {% assign element = include.element | default: 'span' %}
-<{{ element }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ site.base }}{{ src }})"{% endif %}>{% if include.status %}<span class="avatar-status bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}   {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ element }}>
+<{{ element }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ site.base }}{{ src }})"{% endif %}>{% if include.status %}
+  <span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>
+{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}   {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ element }}>
 {% endremoveemptylines %}
diff --git a/scss/ui/_avatars.scss b/scss/ui/_avatars.scss
index 60b2e6696..c11b38dc1 100644
--- a/scss/ui/_avatars.scss
+++ b/scss/ui/_avatars.scss
@@ -18,6 +18,14 @@
     font-size: 1.25em;
   }
 
+  .badge {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px white;
+  }
+
   @at-root a#{&} {
     cursor: pointer;
   }
@@ -32,16 +40,7 @@
   }
 }
 
-.avatar-status {
-  position: absolute;
-  right: -2px;
-  bottom: -2px;
-  width: .75rem;
-  height: .75rem;
-  background: #98a9bc;
-  border: 2px solid #fff;
-  border-radius: 50%;
-}
+
 
 .avatar-list {
   padding: 0;
diff --git a/scss/ui/_badges.scss b/scss/ui/_badges.scss
index 9e10c8d40..930a2e491 100644
--- a/scss/ui/_badges.scss
+++ b/scss/ui/_badges.scss
@@ -32,3 +32,7 @@
   background-color: transparent;
   border: 1px solid currentColor;
 }
+
+.badge-pill {
+  border-radius: 100px;
+}