diff --git a/.stylelintrc.mjs b/.stylelintrc.mjs
index 8637d1f7e9..88c1d307bf 100644
--- a/.stylelintrc.mjs
+++ b/.stylelintrc.mjs
@@ -28,6 +28,7 @@ export default {
     'custom-property-no-missing-var-function': true,
     'rule-empty-line-before': ['always', { ignore: ['after-comment', 'first-nested'] }],
     '@stylistic/block-opening-brace-space-before': 'always',
+    'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['deep', 'slotted'] }],
     // Disable the following rules
     'no-descending-specificity': null,
   },
diff --git a/sandbox/pages/SandboxBadge.vue b/sandbox/pages/SandboxBadge.vue
index a805851603..a89d1eaddf 100644
--- a/sandbox/pages/SandboxBadge.vue
+++ b/sandbox/pages/SandboxBadge.vue
@@ -101,9 +101,62 @@
       <SandboxSectionComponent
         title="default"
       >
-        <KBadge>
-          <b>Default</b> slot
-        </KBadge>
+        <div class="horizontal-spacing">
+          <KBadge>
+            Info.
+            <KExternalLink
+              href="https://kongponents.konghq.com/components/badge.html"
+              target="_blank"
+            >
+              Link
+            </KExternalLink>
+          </KBadge>
+          <KBadge appearance="success">
+            Success.
+            <KExternalLink
+              href="https://kongponents.konghq.com/components/badge.html"
+              target="_blank"
+            >
+              Link
+            </KExternalLink>
+          </KBadge>
+          <KBadge appearance="warning">
+            Warning.
+            <KExternalLink
+              href="https://kongponents.konghq.com/components/badge.html"
+              target="_blank"
+            >
+              Link
+            </KExternalLink>
+          </KBadge>
+          <KBadge appearance="danger">
+            Danger.
+            <KExternalLink
+              href="https://kongponents.konghq.com/components/badge.html"
+              target="_blank"
+            >
+              Link
+            </KExternalLink>
+          </KBadge>
+          <KBadge appearance="decorative">
+            Decorative.
+            <KExternalLink
+              href="https://kongponents.konghq.com/components/badge.html"
+              target="_blank"
+            >
+              Link
+            </KExternalLink>
+          </KBadge>
+          <KBadge appearance="neutral">
+            Neutral.
+            <KExternalLink
+              href="https://kongponents.konghq.com/components/badge.html"
+              target="_blank"
+            >
+              Link
+            </KExternalLink>
+          </KBadge>
+        </div>
         <p>Using icon within the default slot basically becomes a don't unless you are willing to override some default component styles.</p>
         <div class="horizontal-spacing">
           <KBadge>
@@ -398,6 +451,7 @@ import { inject } from 'vue'
 import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
 import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
 import { KongIcon, WarningOutlineIcon, CloseIcon } from '@kong/icons'
+import KExternalLink from '@/components/KExternalLink/KExternalLink.vue'
 
 const handleIconClick = (): void => {
   alert('Icon clicked!')
diff --git a/src/styles/mixins/_badges.scss b/src/styles/mixins/_badges.scss
index 339ee038d9..c194927204 100644
--- a/src/styles/mixins/_badges.scss
+++ b/src/styles/mixins/_badges.scss
@@ -29,13 +29,22 @@
   background-color: $bgColor;
   color: $textColor;
 
-  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
   :deep([role="button"]):not([disabled]):not(#{$kongponentsKCopyTooltipWrapperSelector}):not(.badge-content) {
     &:hover,
     &:focus {
       color: $hoverColor !important;
     }
   }
+
+  :deep(a) {
+    color: $textColor;
+    font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
+    text-decoration: none;
+
+    &:hover {
+      color: $hoverColor;
+    }
+  }
 }
 
 @mixin decorativeBadgeAppearance {