diff --git a/site/assets/scss/_snippets.scss b/site/assets/scss/_snippets.scss
index 2e0945a36..76fc18397 100644
--- a/site/assets/scss/_snippets.scss
+++ b/site/assets/scss/_snippets.scss
@@ -1,3 +1,13 @@
+// Light badges
+@each $color, $value in $theme-colors {
+  $badge-light-bg: shift-color($value, -80%);
+  .badge-light-#{$color} {
+    background-color: $badge-light-bg;
+  }
+}
+
+
+// Light buttons
 @each $color, $value in $theme-colors {
   $btn-light-bg: shift-color($value, -80%);
   $btn-light-border: shift-color($value, -80%);
diff --git a/site/content/docs/5.1/extend/snippets.md b/site/content/docs/5.1/extend/snippets.md
index a006194e7..df642505e 100644
--- a/site/content/docs/5.1/extend/snippets.md
+++ b/site/content/docs/5.1/extend/snippets.md
@@ -7,6 +7,24 @@ group: extend
 
 ## Components
 
+### Light badges
+
+{{< example >}}
+{{< badge.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<span class="badge badge-light-{{ .name }} text-dark">{{ .name | title }}</span>{{- end -}}
+{{< /badge.inline >}}
+{{< /example >}}
+
+```scss
+@each $color, $value in $theme-colors {
+  $badge-light-bg: shift-color($value, -80%);
+  .badge-light-#{$color} {
+    background-color: $badge-light-bg;
+  }
+}
+```
+
 ### Light buttons
 
 {{< example >}}