diff --git a/docs/content/docs/formatters/_index.md b/docs/content/docs/formatters/_index.md
index 195c08c8f58e..bde2d0bfcaa8 100644
--- a/docs/content/docs/formatters/_index.md
+++ b/docs/content/docs/formatters/_index.md
@@ -25,12 +25,11 @@ golangci-lint formatters
 
 ## All formatters
 
-<div class="hx-mt-6">
-    {{< icon "filter" >}}
-    {{< clickable-badge icon="fire" id="new-filter" content="New" class="gl-filter hx-cursor-pointer" type="warning" border=false >}}
-    {{< clickable-badge icon="emoji-sad" id="deprecated-filter" content="Deprecated" class="gl-filter hx-cursor-pointer" type="info" border=false >}}
-    {{< clickable-badge icon="trash" id="reset-filter" content="Reset" class="gl-filter-reset gl-hidden hx-cursor-pointer" type="error" border=true >}}
-</div>
+{{< filter-bar >}}
+    {{< clickable-badge class="gl-filter" id="new-filter" icon="fire" content="New" type="warning" >}}
+    {{< clickable-badge class="gl-filter" id="deprecated-filter" icon="emoji-sad" content="Deprecated" type="info" >}}
+    {{< clickable-badge class="gl-filter-reset gl-hidden" id="reset-filter" icon="trash" content="Reset" type="error" border=true >}}
+{{< /filter-bar >}}
 
 {{< cards >}}
     {{< item-cards path="formatters" data="formatters_info" >}}
diff --git a/docs/content/docs/linters/_index.md b/docs/content/docs/linters/_index.md
index 8eabc81e0186..74ca6f86598b 100644
--- a/docs/content/docs/linters/_index.md
+++ b/docs/content/docs/linters/_index.md
@@ -25,16 +25,15 @@ golangci-lint linters
 
 ## All Linters
 
-<div class="hx-mt-6">
-    {{< icon "filter" >}}
-    {{< clickable-badge icon="inbox" id="default-filter" content="Default" class="gl-filter hx-cursor-pointer" type="info" border=false >}}
-    {{< clickable-badge icon="fire" id="new-filter" content="New" class="gl-filter hx-cursor-pointer" type="warning" border=false >}}
-    {{< clickable-badge icon="sparkles" id="autofix-filter" content="Autofix" class="gl-filter hx-cursor-pointer" type="info" border=false >}}
-    {{< clickable-badge icon="fast-forward" id="fast-filter" content="Fast" class="gl-filter hx-cursor-pointer" border=false >}}
-    {{< clickable-badge icon="play" id="slow-filter" content="Slow" class="gl-filter hx-cursor-pointer" border=false >}}
-    {{< clickable-badge icon="emoji-sad" id="deprecated-filter" content="Deprecated" class="gl-filter hx-cursor-pointer" type="info" border=false >}}
-    {{< clickable-badge icon="trash" id="reset-filter" content="Reset" class="gl-filter-reset gl-hidden hx-cursor-pointer" type="error" border=true >}}
-</div>
+{{< filter-bar >}}
+    {{< clickable-badge class="gl-filter" id="default-filter" icon="inbox" content="Default" type="info" >}}
+    {{< clickable-badge class="gl-filter" id="new-filter" icon="fire" content="New" type="warning" >}}
+    {{< clickable-badge class="gl-filter" id="autofix-filter" icon="sparkles" content="Autofix" type="info" >}}
+    {{< clickable-badge class="gl-filter" id="fast-filter" icon="fast-forward" content="Fast" >}}
+    {{< clickable-badge class="gl-filter" id="slow-filter" icon="play" content="Slow" >}}
+    {{< clickable-badge class="gl-filter" id="deprecated-filter" icon="emoji-sad" content="Deprecated" type="info" >}}
+    {{< clickable-badge class="gl-filter-reset gl-hidden" icon="trash" id="reset-filter" content="Reset" type="error" border=true >}}
+{{< /filter-bar >}}
 
 {{< cards >}}
     {{< item-cards path="linters" data="linters_info" >}}
diff --git a/docs/layouts/_partials/clickable-badge.html b/docs/layouts/_partials/clickable-badge.html
index 35891580d592..2244d4a4e048 100644
--- a/docs/layouts/_partials/clickable-badge.html
+++ b/docs/layouts/_partials/clickable-badge.html
@@ -30,8 +30,8 @@
 
 {{- $borderClass := cond (eq $border true) "hx-border" "" -}}
 {{- $badgeClass := or ($styleClass.Get $type) $defaultClass  -}}
-<div class="hextra-badge hx-mt-2">
-    <div id="{{ $id }}" class="hx-inline-flex hx-gap-1 hx-items-center hx-rounded-full hx-px-2.5 hx-leading-6 hx-text-[.65rem] {{ $borderClass }} {{ $badgeClass }} {{ $class }}">
+<div class="hextra-badge hx-mt-2 hx-mx-1">
+    <div id="{{ $id }}" class="hx-inline-flex hx-gap-1 hx-items-center hx-rounded-full hx-px-2.5 hx-leading-6 hx-text-[.65rem] hx-cursor-pointer {{ $borderClass }} {{ $badgeClass }} {{ $class }}">
         {{- with $icon -}}{{- partial "utils/icon" (dict "name" . "attributes" "height=12") -}}{{- end -}}
         {{- $content -}}
     </div>
diff --git a/docs/layouts/_shortcodes/filter-bar.html b/docs/layouts/_shortcodes/filter-bar.html
new file mode 100644
index 000000000000..1209918f804c
--- /dev/null
+++ b/docs/layouts/_shortcodes/filter-bar.html
@@ -0,0 +1,12 @@
+{{- /*
+This shortcode is used to create a filter bar.
+
+@example {{< filter-bar >}}{{< clickable-badge content="Example">}}{{< filter-bar >}}
+*/ -}}
+
+<div class="hx-mt-6">
+  <span class="hx-inline-block hx-align-text-bottom icon" title="Filter">
+    {{- partial "utils/icon.html" (dict "name" "filter" "attributes" "height=1.2em") -}}
+  </span>
+  {{ .Inner }}
+</div>