diff --git a/content/contribute/components/badges.md b/content/contribute/components/badges.md
index db1cedf36c2f..6db626bd0e06 100644
--- a/content/contribute/components/badges.md
+++ b/content/contribute/components/badges.md
@@ -11,6 +11,7 @@ toc_max: 3
 {{< badge color=red text="red badge" >}}
 {{< badge color=green text="green badge" >}}
 {{< badge color=violet text="violet badge" >}}
+{{< badge color=gray text="gray badge" >}}
 
 You can also make a badge a link.
 
@@ -18,17 +19,33 @@ You can also make a badge a link.
 
 ### Usage guidelines
 
-We use badges to indicate new content and product content in various stages of the release lifecycle: 
+Use badges to indicate new content and product content in various stages of the release lifecycle:
 
-- The violet badge to highlight new early access or experimental content 
-- The blue badge to highlight beta content 
+- The violet badge to highlight new early access or experimental content
+- The blue badge to highlight beta content
 - The green badge to highlight new content that is either GA or not product-related content, such as guides/learning paths
+- The gray badge to highlight deprecated content
 
 Best practice is to use this badge for no longer than 2 months post release of the feature.
 
 ### Markup
 
+Inline badge:
+
 ```go
 {{</* badge color=amber text="amber badge" */>}}
 [{{</* badge color="blue" text="badge with a link" */>}}](../overview.md)
 ```
+
+Sidebar badge in frontmatter:
+
+```yaml
+---
+title: Page title
+params:
+  sidebar:
+    badge:
+      color: gray
+      text: Deprecated
+---
+```
diff --git a/layouts/partials/components/badge.html b/layouts/partials/components/badge.html
index 06678ef5a15d..8383f0375e13 100644
--- a/layouts/partials/components/badge.html
+++ b/layouts/partials/components/badge.html
@@ -1,6 +1,7 @@
 {{- $colors := (dict
   "amber" "bg-amber-500 dark:bg-amber-400"
   "blue" "bg-blue-500 dark:bg-blue-400"
+  "gray" "bg-gray-500 dark:bg-gray-400"
   "green" "bg-green-500 dark:bg-green-700"
   "red" "bg-red-500 dark:bg-red-400"
   "violet" "bg-violet-500 dark:bg-violet-400"
@@ -8,11 +9,11 @@
 -}}
 
 {{- if not (isset $colors .color) -}}
-  {{- errorf "[badge] wrong color name: '%s' - supported values: amber, blue, green, red, violet" .color -}}h
+  {{- errorf "[badge] wrong color name: '%s' - supported values: amber, blue, gray, green, red, violet" .color -}}h
 {{- end -}}
 
 
 <span
   class="not-prose {{ index $colors .color }} rounded-sm px-1 text-xs text-white"
-  >{{ .content }}</span
->
+  >{{ .content }}
+</span>
\ No newline at end of file