diff --git a/src-docs/src/views/badge/badge.js b/src-docs/src/views/badge/badge.tsx
similarity index 100%
rename from src-docs/src/views/badge/badge.js
rename to src-docs/src/views/badge/badge.tsx
diff --git a/src-docs/src/views/badge/badge_button.js b/src-docs/src/views/badge/badge_button.tsx
similarity index 100%
rename from src-docs/src/views/badge/badge_button.js
rename to src-docs/src/views/badge/badge_button.tsx
diff --git a/src-docs/src/views/badge/badge_health.js b/src-docs/src/views/badge/badge_health.tsx
similarity index 100%
rename from src-docs/src/views/badge/badge_health.js
rename to src-docs/src/views/badge/badge_health.tsx
diff --git a/src-docs/src/views/badge/badge_href.js b/src-docs/src/views/badge/badge_href.tsx
similarity index 100%
rename from src-docs/src/views/badge/badge_href.js
rename to src-docs/src/views/badge/badge_href.tsx
diff --git a/src-docs/src/views/badge/badge_truncate.js b/src-docs/src/views/badge/badge_truncate.tsx
similarity index 100%
rename from src-docs/src/views/badge/badge_truncate.js
rename to src-docs/src/views/badge/badge_truncate.tsx
diff --git a/src-docs/src/views/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.tsx
similarity index 100%
rename from src-docs/src/views/badge/badge_with_icon.js
rename to src-docs/src/views/badge/badge_with_icon.tsx
diff --git a/src/components/badge/__snapshots__/badge.test.tsx.snap b/src/components/badge/__snapshots__/badge.test.tsx.snap
index 33407947df7..d90d329a82c 100644
--- a/src/components/badge/__snapshots__/badge.test.tsx.snap
+++ b/src/components/badge/__snapshots__/badge.test.tsx.snap
@@ -3,15 +3,15 @@
 exports[`EuiBadge is disabled 1`] = `
 <span
   aria-label="aria-label"
-  class="euiBadge euiBadge-isDisabled euiBadge--iconLeft testClass1 testClass2"
+  class="euiBadge testClass1 testClass2 emotion-euiBadge-disabled"
   data-test-subj="test subject string"
-  style="background-color:#d3dae6;color:#000"
+  style="background-color:#D3DAE6;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -22,15 +22,15 @@ exports[`EuiBadge is disabled 1`] = `
 exports[`EuiBadge is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiBadge euiBadge--iconLeft testClass1 testClass2"
+  class="euiBadge testClass1 testClass2 emotion-euiBadge"
   data-test-subj="test subject string"
-  style="background-color:#d3dae6;color:#000"
+  style="background-color:#D3DAE6;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -40,15 +40,15 @@ exports[`EuiBadge is rendered 1`] = `
 
 exports[`EuiBadge is rendered with href and rel provided 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft testClass1 testClass2"
-  style="background-color:#d3dae6;color:#000"
+  class="euiBadge testClass1 testClass2 emotion-euiBadge"
+  style="background-color:#D3DAE6;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <a
       aria-label="aria-label"
-      class="euiBadge__childButton"
+      class="euiBadge__childButton emotion-euiBadge__childButton"
       data-test-subj="test subject string"
       href="/#/"
       rel="noopener noreferrer"
@@ -62,17 +62,17 @@ exports[`EuiBadge is rendered with href and rel provided 1`] = `
 exports[`EuiBadge is rendered with href provided 1`] = `
 <a
   aria-label="aria-label"
-  class="euiBadge euiBadge-isClickable euiBadge--iconLeft testClass1 testClass2"
+  class="euiBadge testClass1 testClass2 emotion-euiBadge-clickable"
   data-test-subj="test subject string"
   href="/#/"
   rel="noreferrer"
-  style="background-color:#d3dae6;color:#000"
+  style="background-color:#D3DAE6;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text-clickable"
     >
       Content
     </span>
@@ -82,15 +82,15 @@ exports[`EuiBadge is rendered with href provided 1`] = `
 
 exports[`EuiBadge is rendered with iconOnClick and href provided 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft testClass1 testClass2"
-  style="background-color:#d3dae6;color:#000"
+  class="euiBadge testClass1 testClass2 emotion-euiBadge"
+  style="background-color:#D3DAE6;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <a
       aria-label="aria-label"
-      class="euiBadge__childButton"
+      class="euiBadge__childButton emotion-euiBadge__childButton"
       data-test-subj="test subject string"
       href="/#/"
       rel="noreferrer"
@@ -103,15 +103,15 @@ exports[`EuiBadge is rendered with iconOnClick and href provided 1`] = `
 
 exports[`EuiBadge is rendered with iconOnClick and onClick provided 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft testClass1 testClass2"
-  style="background-color:#d3dae6;color:#000"
+  class="euiBadge testClass1 testClass2 emotion-euiBadge"
+  style="background-color:#D3DAE6;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <button
       aria-label="aria-label"
-      class="euiBadge__childButton"
+      class="euiBadge__childButton emotion-euiBadge__childButton"
       data-test-subj="test subject string"
     >
       Content
@@ -123,15 +123,15 @@ exports[`EuiBadge is rendered with iconOnClick and onClick provided 1`] = `
 exports[`EuiBadge is rendered with iconOnClick provided 1`] = `
 <span
   aria-label="aria-label"
-  class="euiBadge euiBadge--iconLeft testClass1 testClass2"
+  class="euiBadge testClass1 testClass2 emotion-euiBadge"
   data-test-subj="test subject string"
-  style="background-color:#d3dae6;color:#000"
+  style="background-color:#D3DAE6;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -142,15 +142,15 @@ exports[`EuiBadge is rendered with iconOnClick provided 1`] = `
 exports[`EuiBadge is rendered with onClick provided 1`] = `
 <button
   aria-label="aria-label"
-  class="euiBadge euiBadge-isClickable euiBadge--iconLeft testClass1 testClass2"
+  class="euiBadge testClass1 testClass2 emotion-euiBadge-clickable"
   data-test-subj="test subject string"
-  style="background-color:#d3dae6;color:#000"
+  style="background-color:#D3DAE6;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text-clickable"
     >
       Content
     </span>
@@ -160,14 +160,14 @@ exports[`EuiBadge is rendered with onClick provided 1`] = `
 
 exports[`EuiBadge props color accent is rendered 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
+  class="euiBadge emotion-euiBadge"
   style="background-color:#ee789d;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -177,14 +177,14 @@ exports[`EuiBadge props color accent is rendered 1`] = `
 
 exports[`EuiBadge props color accepts hex 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
-  style="background-color:#333;color:#fff"
+  class="euiBadge emotion-euiBadge"
+  style="background-color:#333;color:#FFF"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -194,14 +194,14 @@ exports[`EuiBadge props color accepts hex 1`] = `
 
 exports[`EuiBadge props color accepts rgba 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
+  class="euiBadge emotion-euiBadge"
   style="background-color:rgba(255,255,255,1);color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -211,14 +211,14 @@ exports[`EuiBadge props color accepts rgba 1`] = `
 
 exports[`EuiBadge props color danger is rendered 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
+  class="euiBadge emotion-euiBadge"
   style="background-color:#ff7e62;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -228,14 +228,30 @@ exports[`EuiBadge props color danger is rendered 1`] = `
 
 exports[`EuiBadge props color default is rendered 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
-  style="background-color:#d3dae6;color:#000"
+  class="euiBadge emotion-euiBadge"
+  style="background-color:#D3DAE6;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
+    >
+      Content
+    </span>
+  </span>
+</span>
+`;
+
+exports[`EuiBadge props color hollow is rendered 1`] = `
+<span
+  class="euiBadge emotion-euiBadge-hollow"
+>
+  <span
+    class="euiBadge__content emotion-euiBadge__content"
+  >
+    <span
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -245,14 +261,14 @@ exports[`EuiBadge props color default is rendered 1`] = `
 
 exports[`EuiBadge props color primary is rendered 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
+  class="euiBadge emotion-euiBadge"
   style="background-color:#79aad9;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -262,14 +278,14 @@ exports[`EuiBadge props color primary is rendered 1`] = `
 
 exports[`EuiBadge props color success is rendered 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
+  class="euiBadge emotion-euiBadge"
   style="background-color:#6dccb1;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -279,14 +295,14 @@ exports[`EuiBadge props color success is rendered 1`] = `
 
 exports[`EuiBadge props color warning is rendered 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
+  class="euiBadge emotion-euiBadge"
   style="background-color:#f1d86f;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -296,41 +312,41 @@ exports[`EuiBadge props color warning is rendered 1`] = `
 
 exports[`EuiBadge props iconSide left is rendered 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
-  style="background-color:#d3dae6;color:#000"
+  class="euiBadge emotion-euiBadge"
+  style="background-color:#D3DAE6;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
-    >
-      Content
-    </span>
-    <span
-      class="euiBadge__icon"
+      class="euiBadge__icon emotion-euiBadge__icon-left"
       color="inherit"
       data-euiicon-type="user"
     />
+    <span
+      class="euiBadge__text emotion-euiBadge__text"
+    >
+      Content
+    </span>
   </span>
 </span>
 `;
 
 exports[`EuiBadge props iconSide right is rendered 1`] = `
 <span
-  class="euiBadge euiBadge--iconRight"
-  style="background-color:#d3dae6;color:#000"
+  class="euiBadge emotion-euiBadge"
+  style="background-color:#D3DAE6;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
     <span
-      class="euiBadge__icon"
+      class="euiBadge__icon emotion-euiBadge__icon-right"
       color="inherit"
       data-euiicon-type="user"
     />
@@ -340,36 +356,36 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `
 
 exports[`EuiBadge props iconType is rendered 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
-  style="background-color:#d3dae6;color:#000"
+  class="euiBadge emotion-euiBadge"
+  style="background-color:#D3DAE6;color:#000"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
-    >
-      Content
-    </span>
-    <span
-      class="euiBadge__icon"
+      class="euiBadge__icon emotion-euiBadge__icon-left"
       color="inherit"
       data-euiicon-type="user"
     />
+    <span
+      class="euiBadge__text emotion-euiBadge__text"
+    >
+      Content
+    </span>
   </span>
 </span>
 `;
 
 exports[`EuiBadge props style is rendered 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
-  style="background-color:#d3dae6;color:#000;border:4px solid tomato"
+  class="euiBadge emotion-euiBadge"
+  style="background-color:#D3DAE6;color:#000;border:4px solid tomato"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -379,14 +395,14 @@ exports[`EuiBadge props style is rendered 1`] = `
 
 exports[`EuiBadge props style is rendered with accent 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
+  class="euiBadge emotion-euiBadge"
   style="background-color:#ee789d;color:#000;border:4px solid tomato"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -396,14 +412,14 @@ exports[`EuiBadge props style is rendered with accent 1`] = `
 
 exports[`EuiBadge props style is rendered with danger 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
+  class="euiBadge emotion-euiBadge"
   style="background-color:#ff7e62;color:#000;border:4px solid tomato"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -413,14 +429,14 @@ exports[`EuiBadge props style is rendered with danger 1`] = `
 
 exports[`EuiBadge props style is rendered with default 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
-  style="background-color:#d3dae6;color:#000;border:4px solid tomato"
+  class="euiBadge emotion-euiBadge"
+  style="background-color:#D3DAE6;color:#000;border:4px solid tomato"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -430,14 +446,31 @@ exports[`EuiBadge props style is rendered with default 1`] = `
 
 exports[`EuiBadge props style is rendered with hollow 1`] = `
 <span
-  class="euiBadge euiBadge--hollow euiBadge--iconLeft"
+  class="euiBadge emotion-euiBadge-hollow"
+  style="border:4px solid tomato"
+>
+  <span
+    class="euiBadge__content emotion-euiBadge__content"
+  >
+    <span
+      class="euiBadge__text emotion-euiBadge__text"
+    >
+      Content
+    </span>
+  </span>
+</span>
+`;
+
+exports[`EuiBadge props style is rendered with hollow 2`] = `
+<span
+  class="euiBadge emotion-euiBadge-hollow"
   style="border:4px solid tomato"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -447,14 +480,14 @@ exports[`EuiBadge props style is rendered with hollow 1`] = `
 
 exports[`EuiBadge props style is rendered with primary 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
+  class="euiBadge emotion-euiBadge"
   style="background-color:#79aad9;color:#000;border:4px solid tomato"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -464,14 +497,14 @@ exports[`EuiBadge props style is rendered with primary 1`] = `
 
 exports[`EuiBadge props style is rendered with success 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
+  class="euiBadge emotion-euiBadge"
   style="background-color:#6dccb1;color:#000;border:4px solid tomato"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
@@ -481,14 +514,14 @@ exports[`EuiBadge props style is rendered with success 1`] = `
 
 exports[`EuiBadge props style is rendered with warning 1`] = `
 <span
-  class="euiBadge euiBadge--iconLeft"
+  class="euiBadge emotion-euiBadge"
   style="background-color:#f1d86f;color:#000;border:4px solid tomato"
 >
   <span
-    class="euiBadge__content"
+    class="euiBadge__content emotion-euiBadge__content"
   >
     <span
-      class="euiBadge__text"
+      class="euiBadge__text emotion-euiBadge__text"
     >
       Content
     </span>
diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss
deleted file mode 100644
index 7ea0964e889..00000000000
--- a/src/components/badge/_badge.scss
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 1. Accounts for the border
- */
-.euiBadge {
-  font-size: $euiFontSizeXS;
-  font-weight: $euiFontWeightMedium;
-  line-height: $euiSize + 2px; /* 1 */
-  padding: 0 $euiSizeS;
-  display: inline-block;
-  text-decoration: none;
-  border-radius: $euiBorderRadius / 2;
-  border: solid 1px transparent;
-  background-color: transparent;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: default;
-  max-width: 100%;
-  // The badge will only ever be as wide as its content
-  // So, make the text left aligned to ensure all badges line up the same
-  text-align: left;
-
-  &.euiBadge-isDisabled {
-    // sass-lint:disable-block no-important
-    // Using !important to override inline styles
-    color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2) !important;
-    background-color: $euiButtonColorDisabled !important;
-  }
-
-  &:focus-within {
-    @include euiFocusRing('small');
-  }
-
-  + .euiBadge {
-    margin-left: $euiSizeXS;
-  }
-
-  .euiBadge__content {
-    min-height: $euiSize + ($euiBorderWidthThin * 2); // Ensure proper height in case of just displaying an icon
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-  }
-
-  .euiBadge__childButton {
-    @include euiTextTruncate;
-    text-align: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit;
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-
-    &:not(:disabled) {
-      &:hover,
-      &:focus {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .euiBadge__iconButton {
-    font-size: 0; // Makes the button only as large as the icon so it aligns vertically better
-    margin-left: $euiSizeXS;
-
-    &:focus {
-      background-color: transparentize($euiColorGhost, .2);
-      color: $euiColorInk;
-      border-radius: 2px;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-
-    .euiBadge__icon {
-      // Remove margins from icon itself so that focus state doesn't include that space
-      margin: 0 !important; // sass-lint:disable-line no-important
-    }
-  }
-
-  .euiBadge__text {
-    @include euiTextTruncate;
-    cursor: default;
-  }
-
-  .euiBadge__icon {
-    &:not(:only-child) {
-      margin-left: $euiSizeXS;
-    }
-  }
-
-  &.euiBadge--iconLeft {
-    .euiBadge__content {
-      flex-direction: row-reverse;
-    }
-
-    .euiBadge__iconButton,
-    .euiBadge__icon:not(:only-child) {
-      margin-right: $euiSizeXS;
-      margin-left: 0;
-    }
-  }
-}
-
-.euiBadge-isClickable {
-  &:not(:disabled) {
-    &:hover,
-    &:focus {
-      text-decoration: underline;
-    }
-  }
-
-  &.euiBadge-isDisabled {
-    cursor: not-allowed;
-  }
-
-  &:focus {
-    @include euiFocusRing('small');
-  }
-
-  .euiBadge__text {
-    cursor: inherit;
-  }
-}
-
-// Hollow has a border and is mostly used for autocompleters.
-.euiBadge--hollow {
-  background-color: $euiColorEmptyShade;
-  border-color: lightOrDarkTheme($euiBorderColor, tint($euiBorderColor, 15%));
-  color: $euiTextColor;
-}
diff --git a/src/components/badge/_index.scss b/src/components/badge/_index.scss
index a271275b2dc..f35a82d92fb 100644
--- a/src/components/badge/_index.scss
+++ b/src/components/badge/_index.scss
@@ -1,4 +1,3 @@
-@import 'badge';
 @import 'badge_group/index';
 @import 'beta_badge/index';
 @import 'notification_badge/index';
diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts
new file mode 100644
index 00000000000..bc7e10f4d52
--- /dev/null
+++ b/src/components/badge/badge.styles.ts
@@ -0,0 +1,171 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import {
+  euiFontSize,
+  euiFocusRing,
+  euiTextTruncate,
+  logicalCSS,
+  logicalTextAlignCSS,
+} from '../../global_styling';
+import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
+import { UseEuiTheme, tint, transparentize } from '../../services';
+
+export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme, colorMode } = euiThemeContext;
+
+  return {
+    euiBadge: css`
+      display: inline-block;
+      vertical-align: middle;
+      padding: 0 ${euiTheme.size.s};
+      ${logicalCSS('max-width', '100%')}
+      font-size: ${euiFontSize(euiThemeContext, 'xs').fontSize};
+      line-height: ${euiTheme.base + 2}px; // Accounts for the border
+      font-weight: ${euiTheme.font.weight.medium};
+      white-space: nowrap;
+      text-decoration: none;
+      cursor: default;
+      background-color: transparent;
+      border: ${euiTheme.border.width.thin} solid transparent;
+      border-radius: ${parseFloat(String(euiTheme.border.radius.medium)) / 2}px;
+      // The badge will only ever be as wide as its content
+      // So, make the text left aligned to ensure all badges line up the same
+      ${logicalTextAlignCSS('left')}
+
+      &:focus-within {
+        ${euiFocusRing(euiThemeContext)}
+      }
+
+      & + .euiBadge {
+        ${logicalCSS('margin-left', euiTheme.size.xs)}
+      }
+    `,
+    clickable: css`
+      &:not(:disabled) {
+        &:hover,
+        &:focus {
+          text-decoration: underline;
+        }
+      }
+
+      &:focus {
+        ${euiFocusRing(euiThemeContext)}
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    `,
+    disabled: css`
+      // Using !important to override inline styles
+      color: ${euiButtonColor(euiThemeContext, 'disabled').color} !important;
+      background-color: ${euiButtonColor(euiThemeContext, 'disabled')
+        .backgroundColor} !important;
+    `,
+    // Hollow has a border and is mostly used for autocompleters.
+    hollow: css`
+      background-color: ${euiTheme.colors.emptyShade};
+      border-color: ${colorMode === 'DARK'
+        ? tint(euiTheme.border.color, 0.15)
+        : euiTheme.border.color};
+      color: ${euiTheme.colors.text};
+    `,
+
+    // Content wrapper
+    euiBadge__content: css`
+      ${logicalCSS(
+        // Ensure proper height in case of just displaying an icon
+        'min-height',
+        `${
+          euiTheme.base + parseFloat(String(euiTheme.border.width.thin)) * 2
+        }px`
+      )}
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+    `,
+
+    // Text
+    text: {
+      euiBadge__text: css`
+        ${euiTextTruncate()}
+        cursor: inherit;
+      `,
+      clickable: css`
+        cursor: pointer;
+      `,
+    },
+
+    // Icon
+    icon: {
+      euiBadge__icon: css``,
+      right: css`
+        &:not(:only-child) {
+          ${logicalCSS('margin-left', euiTheme.size.xs)}
+        }
+      `,
+      left: css`
+        &:not(:only-child) {
+          ${logicalCSS('margin-right', euiTheme.size.xs)}
+        }
+      `,
+    },
+
+    // Clickable icons (iconOnClick)
+    iconButton: {
+      euiBadge__iconButton: css`
+        font-size: 0; // Makes the button only as large as the icon so it aligns vertically better
+
+        &:focus {
+          background-color: ${transparentize(euiTheme.colors.ghost, 0.8)};
+          color: ${euiTheme.colors.ink};
+          border-radius: ${
+            parseFloat(String(euiTheme.border.radius.small)) / 2
+          }px;
+        }
+
+        &:disabled {
+          cursor: not-allowed;
+        }
+
+        .euiBadge__icon {
+          // Remove margins from icon itself so that focus state doesn't include that space
+          margin: 0 !important;
+        }
+      }`,
+      right: css`
+        ${logicalCSS('margin-left', euiTheme.size.xs)}
+      `,
+      left: css`
+        ${logicalCSS('margin-right', euiTheme.size.xs)}
+      `,
+    },
+
+    // Used in badges with both onClick & iconOnClick
+    euiBadge__childButton: css`
+      ${euiTextTruncate()}
+      text-align: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      color: inherit;
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+
+      &:not(:disabled) {
+        &:hover,
+        &:focus {
+          text-decoration: underline;
+        }
+      }
+    `,
+  };
+};
diff --git a/src/components/badge/badge.test.tsx b/src/components/badge/badge.test.tsx
index 5dd0c1409ca..b7b200b5088 100644
--- a/src/components/badge/badge.test.tsx
+++ b/src/components/badge/badge.test.tsx
@@ -9,10 +9,13 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiBadge, COLORS, ICON_SIDES } from './badge';
 
 describe('EuiBadge', () => {
+  shouldRenderCustomStyles(<EuiBadge {...requiredProps} />);
+
   test('is rendered', () => {
     const component = render(<EuiBadge {...requiredProps}>Content</EuiBadge>);
 
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index b4dd9725557..629cedf5e75 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -13,21 +13,44 @@ import React, {
   MouseEventHandler,
   ReactNode,
   Ref,
+  useMemo,
 } from 'react';
 import classNames from 'classnames';
 import chroma from 'chroma-js';
-import { CommonProps, ExclusiveUnion, keysOf, PropsOf } from '../common';
+import { CommonProps, ExclusiveUnion, PropsOf } from '../common';
 import {
+  useEuiTheme,
+  UseEuiTheme,
   euiPaletteColorBlindBehindText,
   getSecureRelForTarget,
   isColorDark,
+  wcagContrastMin,
 } from '../../services';
 import { EuiInnerText } from '../inner_text';
-import { EuiIcon, IconColor, IconType } from '../icon';
+import { EuiIcon, IconType } from '../icon';
 import { chromaValid, parseColor } from '../color_picker/utils';
 import { validateHref } from '../../services/security/href_validator';
 
-type IconSide = 'left' | 'right';
+import { euiBadgeStyles } from './badge.styles';
+
+export const ICON_SIDES = ['left', 'right'] as const;
+type IconSide = typeof ICON_SIDES[number];
+
+export const COLORS = [
+  'default',
+  'hollow',
+  'primary',
+  'success',
+  'accent',
+  'warning',
+  'danger',
+] as const;
+type BadgeColor = typeof COLORS[number];
+
+// The color blind palette has some stricter accessibility needs with regards to
+// charts and contrast. We use the euiPaletteColorBlindBehindText variant here since our
+// accessibility concerns pertain to foreground (text) and background contrast
+const visColors = euiPaletteColorBlindBehindText();
 
 type WithButtonProps = {
   /**
@@ -75,7 +98,7 @@ export type EuiBadgeProps = {
   /**
    * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
    */
-  color?: IconColor;
+  color?: BadgeColor | string;
   /**
    * Will override any color passed through the `color` prop.
    */
@@ -92,34 +115,6 @@ export type EuiBadgeProps = {
     WithSpanProps
   >;
 
-// TODO - replace with variables once https://github.com/elastic/eui/issues/2731 is closed
-const colorInk = '#000';
-const colorGhost = '#fff';
-
-// The color blind palette has some stricter accessibility needs with regards to
-// charts and contrast. We use the euiPaletteColorBlindBehindText variant here since our
-// accessibility concerns pertain to foreground (text) and background contrast
-const visColors = euiPaletteColorBlindBehindText();
-
-const colorToHexMap: { [color in IconColor]: string } = {
-  // TODO - replace with variable once https://github.com/elastic/eui/issues/2731 is closed
-  default: '#d3dae6',
-  primary: visColors[1],
-  success: visColors[0],
-  accent: visColors[2],
-  warning: visColors[5],
-  danger: visColors[9],
-};
-
-export const COLORS = keysOf(colorToHexMap);
-
-const iconSideToClassNameMap: { [side in IconSide]: string } = {
-  left: 'euiBadge--iconLeft',
-  right: 'euiBadge--iconRight',
-};
-
-export const ICON_SIDES = keysOf(iconSideToClassNameMap);
-
 export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
   children,
   color = 'default',
@@ -138,72 +133,93 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
   style,
   ...rest
 }) => {
+  const euiTheme = useEuiTheme();
+
   const isHrefValid = !href || validateHref(href);
   const isDisabled = _isDisabled || !isHrefValid;
 
-  let optionalCustomStyles: object | undefined = style;
-  let textColor = null;
-  // TODO - replace with variable once https://github.com/elastic/eui/issues/2731 is closed
-  const wcagContrastBase = 4.5; // WCAG AA contrast level
-  let wcagContrast = null;
-  let colorHex = null;
-
-  // Check if a valid color name was provided
-  try {
-    if (COLORS.indexOf(color) > -1) {
-      // Get the hex equivalent for the provided color name
-      colorHex = colorToHexMap[color];
-
-      // Set dark or light text color based upon best contrast
-      textColor = setTextColor(colorHex);
-
-      optionalCustomStyles = {
-        backgroundColor: colorHex,
-        color: textColor,
-        ...optionalCustomStyles,
-      };
-    } else if (color !== 'hollow') {
-      // This is a custom color that is neither from the base palette nor hollow
-      // Let's do our best to ensure that it provides sufficient contrast
-
-      // Set dark or light text color based upon best contrast
-      textColor = setTextColor(color);
-
-      // Check the contrast
-      wcagContrast = getColorContrast(textColor, color);
-
-      if (wcagContrast < wcagContrastBase) {
-        // It's low contrast, so lets show a warning in the console
-        console.warn(
-          'Warning: ',
-          color,
-          ' badge has low contrast of ',
-          wcagContrast.toFixed(2),
-          '. Should be above ',
-          wcagContrastBase,
-          '.'
-        );
+  const optionalCustomStyles = useMemo(() => {
+    const colorToHexMap: { [color in BadgeColor]: string } = {
+      default: euiTheme.euiTheme.colors.lightShade,
+      hollow: '',
+      primary: visColors[1],
+      success: visColors[0],
+      accent: visColors[2],
+      warning: visColors[5],
+      danger: visColors[9],
+    };
+
+    let textColor = null;
+    let contrastRatio = null;
+    let colorHex = null;
+
+    try {
+      // Check if a valid color name was provided
+      if (COLORS.includes(color as BadgeColor)) {
+        if (color === 'hollow') return style; // hollow uses its own CSS class
+
+        // Get the hex equivalent for the provided color name
+        colorHex = colorToHexMap[color as BadgeColor];
+
+        // Set dark or light text color based upon best contrast
+        textColor = setTextColor(euiTheme, colorHex);
+
+        return {
+          backgroundColor: colorHex,
+          color: textColor,
+          ...style,
+        };
+      } else {
+        // This is a custom color- let's do our best to ensure that it provides sufficient contrast
+
+        // Set dark or light text color based upon best contrast
+        textColor = setTextColor(euiTheme, color);
+
+        // Check the contrast
+        contrastRatio = getColorContrast(textColor, color);
+
+        if (contrastRatio < wcagContrastMin) {
+          // It's low contrast, so lets show a warning in the console
+          console.warn(
+            'Warning: ',
+            color,
+            ' badge has low contrast of ',
+            contrastRatio.toFixed(2),
+            '. Should be above ',
+            wcagContrastMin,
+            '.'
+          );
+        }
+
+        return {
+          backgroundColor: color,
+          color: textColor,
+          ...style,
+        };
       }
-
-      optionalCustomStyles = {
-        backgroundColor: color,
-        color: textColor,
-        ...optionalCustomStyles,
-      };
+    } catch (err) {
+      handleInvalidColor(color);
     }
-  } catch (err) {
-    handleInvalidColor(color);
-  }
-  const classes = classNames(
-    'euiBadge',
-    {
-      'euiBadge-isClickable': (onClick || href) && !iconOnClick,
-      'euiBadge-isDisabled': isDisabled,
-      'euiBadge--hollow': color === 'hollow',
-    },
-    iconSideToClassNameMap[iconSide],
-    className
-  );
+  }, [color, style, euiTheme]);
+
+  const styles = euiBadgeStyles(euiTheme);
+  const cssStyles = [
+    styles.euiBadge,
+    (onClick || href) && !iconOnClick && styles.clickable,
+    isDisabled && styles.disabled,
+    color === 'hollow' && styles.hollow,
+  ];
+  const textCssStyles = [
+    styles.text.euiBadge__text,
+    (onClick || href) && !isDisabled && styles.text.clickable,
+  ];
+  const iconCssStyles = [styles.icon.euiBadge__icon, styles.icon[iconSide]];
+  const iconButtonCssStyles = [
+    styles.iconButton.euiBadge__iconButton,
+    styles.iconButton[iconSide],
+  ];
+
+  const classes = classNames('euiBadge', className);
 
   const closeClassNames = classNames(
     'euiBadge__icon',
@@ -241,6 +257,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
         <button
           type="button"
           className="euiBadge__iconButton"
+          css={iconButtonCssStyles}
           aria-label={iconOnClickAriaLabel}
           disabled={isDisabled}
           title={iconOnClickAriaLabel}
@@ -250,6 +267,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
             type={iconType}
             size="s"
             color="inherit" // forces the icon to inherit its parent color
+            css={iconCssStyles}
             {...closeButtonProps}
             className={closeClassNames}
           />
@@ -261,6 +279,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
           type={iconType}
           size={children ? 's' : 'm'}
           className="euiBadge__icon"
+          css={iconCssStyles}
           color="inherit" // forces the icon to inherit its parent color
         />
       );
@@ -274,20 +293,27 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
   }
 
   const content = (
-    <span className="euiBadge__content">
-      {children && <span className="euiBadge__text">{children}</span>}
-      {optionalIcon}
+    <span className="euiBadge__content" css={styles.euiBadge__content}>
+      {iconSide === 'left' && optionalIcon}
+      {children && (
+        <span className="euiBadge__text" css={textCssStyles}>
+          {children}
+        </span>
+      )}
+      {iconSide === 'right' && optionalIcon}
     </span>
   );
 
   if (iconOnClick) {
     return onClick || href ? (
-      <span className={classes} style={optionalCustomStyles}>
-        <span className="euiBadge__content">
+      <span className={classes} css={cssStyles} style={optionalCustomStyles}>
+        <span className="euiBadge__content" css={styles.euiBadge__content}>
+          {iconSide === 'left' && optionalIcon}
           <EuiInnerText>
             {(ref, innerText) => (
               <Element
                 className="euiBadge__childButton"
+                css={styles.euiBadge__childButton}
                 disabled={isDisabled}
                 aria-label={onClickAriaLabel}
                 ref={ref}
@@ -299,7 +325,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
               </Element>
             )}
           </EuiInnerText>
-          {optionalIcon}
+          {iconSide === 'right' && optionalIcon}
         </span>
       </span>
     ) : (
@@ -307,6 +333,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
         {(ref, innerText) => (
           <span
             className={classes}
+            css={cssStyles}
             style={optionalCustomStyles}
             ref={ref}
             title={innerText}
@@ -325,6 +352,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
             disabled={isDisabled}
             aria-label={onClickAriaLabel}
             className={classes}
+            css={cssStyles}
             style={optionalCustomStyles}
             ref={ref as Ref<HTMLButtonElement & HTMLAnchorElement>}
             title={innerText}
@@ -342,6 +370,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
         {(ref, innerText) => (
           <span
             className={classes}
+            css={cssStyles}
             style={optionalCustomStyles}
             ref={ref}
             title={innerText}
@@ -360,16 +389,16 @@ function getColorContrast(textColor: string, color: string) {
   return contrastValue;
 }
 
-function setTextColor(bgColor: string) {
+function setTextColor({ euiTheme }: UseEuiTheme, bgColor: string) {
   const textColor = isColorDark(...chroma(bgColor).rgb())
-    ? colorGhost
-    : colorInk;
+    ? euiTheme.colors.ghost
+    : euiTheme.colors.ink;
 
   return textColor;
 }
 
-function handleInvalidColor(color: null | IconColor | string) {
-  const isNamedColor = (color && COLORS.includes(color)) || color === 'hollow';
+function handleInvalidColor(color: null | BadgeColor | string) {
+  const isNamedColor = COLORS.includes(color as BadgeColor);
   const isValidColorString = color && chromaValid(parseColor(color) || '');
   if (!isNamedColor && !isValidColorString) {
     console.warn(
diff --git a/src/components/badge/badge_group/__snapshots__/badge_group.test.tsx.snap b/src/components/badge/badge_group/__snapshots__/badge_group.test.tsx.snap
index 57ba7cbeb02..18b270c05e1 100644
--- a/src/components/badge/badge_group/__snapshots__/badge_group.test.tsx.snap
+++ b/src/components/badge/badge_group/__snapshots__/badge_group.test.tsx.snap
@@ -28,14 +28,14 @@ exports[`EuiBadgeGroup is rendered 1`] = `
     class="euiBadgeGroup__item"
   >
     <span
-      class="euiBadge euiBadge--iconLeft"
-      style="background-color:#d3dae6;color:#000"
+      class="euiBadge emotion-euiBadge"
+      style="background-color:#D3DAE6;color:#000"
     >
       <span
-        class="euiBadge__content"
+        class="euiBadge__content emotion-euiBadge__content"
       >
         <span
-          class="euiBadge__text"
+          class="euiBadge__text emotion-euiBadge__text"
         >
           Content
         </span>
diff --git a/src/components/notification/__snapshots__/notification_event.test.tsx.snap b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
index 3bbb1d4038d..df7b2ec2972 100644
--- a/src/components/notification/__snapshots__/notification_event.test.tsx.snap
+++ b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
@@ -17,13 +17,13 @@ exports[`EuiNotificationEvent is rendered 1`] = `
         class="euiNotificationEventMeta__section"
       >
         <span
-          class="euiBadge euiBadge--hollow euiBadge--iconLeft euiNotificationEventMeta__badge"
+          class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge-hollow"
         >
           <span
-            class="euiBadge__content"
+            class="euiBadge__content emotion-euiBadge__content"
           >
             <span
-              class="euiBadge__text"
+              class="euiBadge__text emotion-euiBadge__text"
             >
               Alert
             </span>
@@ -77,14 +77,14 @@ exports[`EuiNotificationEvent props badgeColor is rendered 1`] = `
         class="euiNotificationEventMeta__section"
       >
         <span
-          class="euiBadge euiBadge--iconLeft euiNotificationEventMeta__badge"
+          class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge"
           style="background-color:#f1d86f;color:#000"
         >
           <span
-            class="euiBadge__content"
+            class="euiBadge__content emotion-euiBadge__content"
           >
             <span
-              class="euiBadge__text"
+              class="euiBadge__text emotion-euiBadge__text"
             >
               Alert
             </span>
@@ -190,13 +190,13 @@ exports[`EuiNotificationEvent props headingLevel is rendered 1`] = `
         class="euiNotificationEventMeta__section"
       >
         <span
-          class="euiBadge euiBadge--hollow euiBadge--iconLeft euiNotificationEventMeta__badge"
+          class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge-hollow"
         >
           <span
-            class="euiBadge__content"
+            class="euiBadge__content emotion-euiBadge__content"
           >
             <span
-              class="euiBadge__text"
+              class="euiBadge__text emotion-euiBadge__text"
             >
               Alert
             </span>
@@ -256,13 +256,13 @@ exports[`EuiNotificationEvent props iconAriaLabel is rendered 1`] = `
           my icon aria label
         </span>
         <span
-          class="euiBadge euiBadge--hollow euiBadge--iconLeft euiNotificationEventMeta__badge"
+          class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge-hollow"
         >
           <span
-            class="euiBadge__content"
+            class="euiBadge__content emotion-euiBadge__content"
           >
             <span
-              class="euiBadge__text"
+              class="euiBadge__text emotion-euiBadge__text"
             >
               Alert
             </span>
@@ -321,13 +321,13 @@ exports[`EuiNotificationEvent props iconType is rendered 1`] = `
           data-euiicon-type="logoCloud"
         />
         <span
-          class="euiBadge euiBadge--hollow euiBadge--iconLeft euiNotificationEventMeta__badge"
+          class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge-hollow"
         >
           <span
-            class="euiBadge__content"
+            class="euiBadge__content emotion-euiBadge__content"
           >
             <span
-              class="euiBadge__text"
+              class="euiBadge__text emotion-euiBadge__text"
             >
               Alert
             </span>
@@ -399,13 +399,13 @@ exports[`EuiNotificationEvent props isRead  is rendered 1`] = `
         class="euiNotificationEventMeta__section"
       >
         <span
-          class="euiBadge euiBadge--hollow euiBadge--iconLeft euiNotificationEventMeta__badge"
+          class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge-hollow"
         >
           <span
-            class="euiBadge__content"
+            class="euiBadge__content emotion-euiBadge__content"
           >
             <span
-              class="euiBadge__text"
+              class="euiBadge__text emotion-euiBadge__text"
             >
               Alert
             </span>
@@ -459,13 +459,13 @@ exports[`EuiNotificationEvent props multiple messages are rendered 1`] = `
         class="euiNotificationEventMeta__section"
       >
         <span
-          class="euiBadge euiBadge--hollow euiBadge--iconLeft euiNotificationEventMeta__badge"
+          class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge-hollow"
         >
           <span
-            class="euiBadge__content"
+            class="euiBadge__content emotion-euiBadge__content"
           >
             <span
-              class="euiBadge__text"
+              class="euiBadge__text emotion-euiBadge__text"
             >
               Alert
             </span>
@@ -573,13 +573,13 @@ exports[`EuiNotificationEvent props primaryAction is rendered 1`] = `
         class="euiNotificationEventMeta__section"
       >
         <span
-          class="euiBadge euiBadge--hollow euiBadge--iconLeft euiNotificationEventMeta__badge"
+          class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge-hollow"
         >
           <span
-            class="euiBadge__content"
+            class="euiBadge__content emotion-euiBadge__content"
           >
             <span
-              class="euiBadge__text"
+              class="euiBadge__text emotion-euiBadge__text"
             >
               Alert
             </span>
@@ -652,13 +652,13 @@ exports[`EuiNotificationEvent props primaryActionProps is rendered 1`] = `
         class="euiNotificationEventMeta__section"
       >
         <span
-          class="euiBadge euiBadge--hollow euiBadge--iconLeft euiNotificationEventMeta__badge"
+          class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge-hollow"
         >
           <span
-            class="euiBadge__content"
+            class="euiBadge__content emotion-euiBadge__content"
           >
             <span
-              class="euiBadge__text"
+              class="euiBadge__text emotion-euiBadge__text"
             >
               Alert
             </span>
@@ -736,13 +736,13 @@ exports[`EuiNotificationEvent props severity  is rendered 1`] = `
         class="euiNotificationEventMeta__section"
       >
         <span
-          class="euiBadge euiBadge--hollow euiBadge--iconLeft euiNotificationEventMeta__badge"
+          class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge-hollow"
         >
           <span
-            class="euiBadge__content"
+            class="euiBadge__content emotion-euiBadge__content"
           >
             <span
-              class="euiBadge__text"
+              class="euiBadge__text emotion-euiBadge__text"
             >
               Alert: severity
             </span>
diff --git a/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap b/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap
index 7178a32f342..79fce570323 100644
--- a/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap
+++ b/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap
@@ -8,13 +8,13 @@ exports[`EuiNotificationEventMeta is rendered 1`] = `
     class="euiNotificationEventMeta__section"
   >
     <span
-      class="euiBadge euiBadge--hollow euiBadge--iconLeft euiNotificationEventMeta__badge"
+      class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge-hollow"
     >
       <span
-        class="euiBadge__content"
+        class="euiBadge__content emotion-euiBadge__content"
       >
         <span
-          class="euiBadge__text"
+          class="euiBadge__text emotion-euiBadge__text"
         >
           Alert
         </span>
@@ -43,14 +43,14 @@ exports[`EuiNotificationEventMeta props badgeColor  is rendered 1`] = `
     class="euiNotificationEventMeta__section"
   >
     <span
-      class="euiBadge euiBadge--iconLeft euiNotificationEventMeta__badge"
+      class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge"
       style="background-color:#6dccb1;color:#000"
     >
       <span
-        class="euiBadge__content"
+        class="euiBadge__content emotion-euiBadge__content"
       >
         <span
-          class="euiBadge__text"
+          class="euiBadge__text emotion-euiBadge__text"
         >
           Alert
         </span>
@@ -136,13 +136,13 @@ exports[`EuiNotificationEventMeta props logoCloud  is rendered 1`] = `
       data-euiicon-type="logoCloud"
     />
     <span
-      class="euiBadge euiBadge--hollow euiBadge--iconLeft euiNotificationEventMeta__badge"
+      class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge-hollow"
     >
       <span
-        class="euiBadge__content"
+        class="euiBadge__content emotion-euiBadge__content"
       >
         <span
-          class="euiBadge__text"
+          class="euiBadge__text emotion-euiBadge__text"
         >
           Alert
         </span>
@@ -171,13 +171,13 @@ exports[`EuiNotificationEventMeta props severity is rendered 1`] = `
     class="euiNotificationEventMeta__section"
   >
     <span
-      class="euiBadge euiBadge--hollow euiBadge--iconLeft euiNotificationEventMeta__badge"
+      class="euiBadge euiNotificationEventMeta__badge emotion-euiBadge-hollow"
     >
       <span
-        class="euiBadge__content"
+        class="euiBadge__content emotion-euiBadge__content"
       >
         <span
-          class="euiBadge__text"
+          class="euiBadge__text emotion-euiBadge__text"
         >
           Alert: severity
         </span>
diff --git a/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap b/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
index aa5d1072f4a..3ccd7ed75a4 100644
--- a/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
+++ b/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
@@ -294,13 +294,13 @@ exports[`EuiSelectableListItem props activeOptionIndex 1`] = `
                
               <span
                 aria-hidden="true"
-                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiSelectableListItem__onFocusBadge"
+                class="euiBadge euiSelectableListItem__onFocusBadge emotion-euiBadge-hollow"
               >
                 <span
-                  class="euiBadge__content"
+                  class="euiBadge__content emotion-euiBadge__content"
                 >
                   <span
-                    class="euiBadge__icon"
+                    class="euiBadge__icon emotion-euiBadge__icon-left"
                     color="inherit"
                     data-euiicon-type="returnKey"
                   />
diff --git a/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap b/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
index f9aa0f2393f..864a135f47f 100644
--- a/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
+++ b/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
@@ -153,13 +153,13 @@ exports[`EuiSelectableListItem props isFocused 1`] = `
        
       <span
         aria-hidden="true"
-        class="euiBadge euiBadge--hollow euiBadge--iconLeft euiSelectableListItem__onFocusBadge"
+        class="euiBadge euiSelectableListItem__onFocusBadge emotion-euiBadge-hollow"
       >
         <span
-          class="euiBadge__content"
+          class="euiBadge__content emotion-euiBadge__content"
         >
           <span
-            class="euiBadge__icon"
+            class="euiBadge__icon emotion-euiBadge__icon-left"
             color="inherit"
             data-euiicon-type="returnKey"
           />
diff --git a/src/services/color/contrast.ts b/src/services/color/contrast.ts
index e38ab513c03..13d70e5b8b9 100644
--- a/src/services/color/contrast.ts
+++ b/src/services/color/contrast.ts
@@ -10,6 +10,8 @@ import chroma from 'chroma-js';
 import { shade, tint, lightness as getLightness } from './manipulation';
 import { getOn } from '../theme/utils';
 
+export const wcagContrastMin = 4.5; // WCAG AA minimum contrast ratio for normal (non-large) text
+
 /**
  * Creates a new color that meets or exceeds WCAG level AA
  * @param foreground - Color to manipulate
diff --git a/src/services/index.ts b/src/services/index.ts
index 278dc54fa3a..7e4c22fa86f 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -69,6 +69,7 @@ export {
   lightness,
   makeHighContrastColor,
   makeDisabledContrastColor,
+  wcagContrastMin,
 } from './color';
 
 export type { EuiSetColorMethod } from './color_picker';
diff --git a/upcoming_changelogs/6224.md b/upcoming_changelogs/6224.md
new file mode 100644
index 00000000000..75b5725e65f
--- /dev/null
+++ b/upcoming_changelogs/6224.md
@@ -0,0 +1,5 @@
+- Updated `EuiBadge`'s disabled styling to match `EuiButton`
+
+**CSS-in-JS conversions**
+
+- Converted `EuiBadge` to Emotion