diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 1054c043e28..23d20226efc 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -11,6 +11,24 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
 
+/*
+ * Preload all EuiIcons - Storybook does not support dynamic icon loading
+ * TODO: https://github.com/elastic/eui/issues/5463
+ */
+import { typeToPathMap } from '../src/components/icon/icon_map';
+import { appendIconComponentCache } from '../src/components/icon/icon';
+const iconCache: Record<string, React.FC> = {};
+
+Object.entries(typeToPathMap).forEach(async ([iconType, iconFileName]) => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const iconExport = require(`../src/components/icon/assets/${iconFileName}`);
+  iconCache[iconType] = iconExport.icon;
+});
+appendIconComponentCache(iconCache);
+
+/*
+ * Theming
+ */
 import { EuiProvider } from '../src/components/provider';
 import { writingModeStyles } from './writing_mode.styles';
 
@@ -63,6 +81,7 @@ const preview: Preview = {
     actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: { disable: true }, // Use colorMode instead
     controls: {
+      sort: 'requiredFirst',
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
diff --git a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap
index 53af988e3e1..9f034b50274 100644
--- a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap
+++ b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiSkipLink is rendered 1`] = `
 <a
   aria-label="aria-label"
-  class="euiSkipLink testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-fill-primary-euiSkipLink-euiScreenReaderOnly"
+  class="euiSkipLink testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
   data-test-subj="test subject string"
   href="#somewhere"
   rel="noreferrer"
@@ -22,7 +22,7 @@ exports[`EuiSkipLink is rendered 1`] = `
 
 exports[`EuiSkipLink props position absolute is rendered 1`] = `
 <a
-  class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-s-fill-primary-euiSkipLink-absolute-euiScreenReaderOnly"
+  class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-absolute-euiScreenReaderOnly"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -34,7 +34,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = `
 
 exports[`EuiSkipLink props position fixed is rendered 1`] = `
 <a
-  class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-s-fill-primary-euiSkipLink-fixed-euiScreenReaderOnly"
+  class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-fixed-euiScreenReaderOnly"
   href="#somewhere"
   rel="noreferrer"
   tabindex="0"
@@ -47,7 +47,7 @@ exports[`EuiSkipLink props position fixed is rendered 1`] = `
 
 exports[`EuiSkipLink props position static is rendered 1`] = `
 <a
-  class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-s-fill-primary-euiSkipLink-euiScreenReaderOnly"
+  class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -59,7 +59,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = `
 
 exports[`EuiSkipLink props tabIndex is rendered 1`] = `
 <a
-  class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-s-fill-primary-euiSkipLink-euiScreenReaderOnly"
+  class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
   href="#somewhere"
   rel="noreferrer"
   tabindex="-1"
diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index 81af15442e3..bd668c7318b 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
       aria-controls="20"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
       tabindex="-1"
       type="button"
     >
@@ -65,7 +65,7 @@ exports[`EuiAccordion behavior does not open when isDisabled 1`] = `
       aria-controls="18"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiAccordion__iconButton"
       disabled=""
       tabindex="-1"
       type="button"
@@ -121,7 +121,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
       aria-controls="17"
       aria-expanded="true"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-isOpen"
+      class="euiButtonIcon euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton-isOpen"
       tabindex="-1"
       type="button"
     >
@@ -175,7 +175,7 @@ exports[`EuiAccordion behavior opens when div is clicked if element is a div 1`]
       aria-controls="19"
       aria-expanded="true"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-isOpen"
+      class="euiButtonIcon euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton-isOpen"
       tabindex="-1"
       type="button"
     >
@@ -231,7 +231,7 @@ exports[`EuiAccordion is rendered 1`] = `
       aria-controls="0"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
       tabindex="-1"
       type="button"
     >
@@ -281,7 +281,7 @@ exports[`EuiAccordion isDisabled is rendered 1`] = `
       aria-controls="16"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiAccordion__iconButton"
       disabled=""
       tabindex="-1"
       type="button"
@@ -379,7 +379,7 @@ exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
       aria-controls="8"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton--right emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-arrowRight"
+      class="euiButtonIcon euiAccordion__iconButton euiAccordion__iconButton--right emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton-arrowRight"
       tabindex="-1"
       type="button"
     >
@@ -419,7 +419,7 @@ exports[`EuiAccordion props arrowProps is rendered 1`] = `
       aria-expanded="false"
       aria-label="aria-label"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton testClass1 testClass2 emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton testClass1 testClass2 emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
       data-test-subj="test subject string"
       tabindex="-1"
       type="button"
@@ -470,7 +470,7 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
       aria-controls="3"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
       tabindex="-1"
       type="button"
     >
@@ -524,7 +524,7 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
       aria-controls="2"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
       tabindex="-1"
       type="button"
     >
@@ -574,7 +574,7 @@ exports[`EuiAccordion props buttonElement is rendered 1`] = `
       aria-controls="5"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
       tabindex="0"
       type="button"
     >
@@ -622,7 +622,7 @@ exports[`EuiAccordion props buttonProps is rendered 1`] = `
       aria-controls="4"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
       tabindex="-1"
       type="button"
     >
@@ -674,7 +674,7 @@ exports[`EuiAccordion props element is rendered 1`] = `
       aria-controls="1"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
       tabindex="0"
       type="button"
     >
@@ -722,7 +722,7 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
       aria-controls="6"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
       tabindex="-1"
       type="button"
     >
@@ -779,7 +779,7 @@ exports[`EuiAccordion props forceState closed is rendered 1`] = `
       aria-controls="11"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
       tabindex="-1"
       type="button"
     >
@@ -833,7 +833,7 @@ exports[`EuiAccordion props forceState open is rendered 1`] = `
       aria-controls="12"
       aria-expanded="true"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-isOpen"
+      class="euiButtonIcon euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton-isOpen"
       tabindex="-1"
       type="button"
     >
@@ -887,7 +887,7 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
       aria-controls="7"
       aria-expanded="true"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-isOpen"
+      class="euiButtonIcon euiAccordion__iconButton euiAccordion__iconButton-isOpen emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton-isOpen"
       tabindex="-1"
       type="button"
     >
@@ -941,7 +941,7 @@ exports[`EuiAccordion props isLoading is rendered 1`] = `
       aria-controls="14"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
       tabindex="-1"
       type="button"
     >
@@ -1000,7 +1000,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
       aria-controls="15"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton"
+      class="euiButtonIcon euiAccordion__iconButton emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton"
       tabindex="-1"
       type="button"
     >
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
index b678c9f763f..5a57f704748 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -821,7 +821,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </span>
           <button
             aria-label="Previous page"
-            class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+            class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
             data-test-subj="pagination-button-previous"
             disabled=""
             type="button"
@@ -886,7 +886,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           <a
             aria-controls="__table_generated-id"
             aria-label="Next page"
-            class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+            class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
             data-test-subj="pagination-button-next"
             href="#__table_generated-id"
             rel="noreferrer"
diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
index e55f5fc0b47..de0a1a653d4 100644
--- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`CollapsedItemActions render 1`] = `
     >
       <button
         aria-label="All actions"
-        class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+        class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
         data-test-subj="euiCollapsedItemActionsButton"
         type="button"
       >
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index d9a2c3127f4..5430e1c4e5d 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -162,7 +162,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
           <a
             aria-controls="__table_generated-id"
             aria-label="Previous page"
-            class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+            class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
             data-test-subj="pagination-button-previous"
             href="#__table_generated-id"
             rel="noreferrer"
@@ -227,7 +227,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
           </ul>
           <button
             aria-label="Next page"
-            class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+            class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
             data-test-subj="pagination-button-next"
             disabled=""
             type="button"
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index 89fa202379a..a843fdb478e 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiButton is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
+  class="testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   data-test-subj="test subject string"
   type="button"
 >
@@ -21,7 +21,7 @@ exports[`EuiButton is rendered 1`] = `
 
 exports[`EuiButton props color accent is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-accent"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-accent"
   type="button"
 >
   <span
@@ -32,7 +32,7 @@ exports[`EuiButton props color accent is rendered 1`] = `
 
 exports[`EuiButton props color danger is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-danger"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-danger"
   type="button"
 >
   <span
@@ -43,7 +43,7 @@ exports[`EuiButton props color danger is rendered 1`] = `
 
 exports[`EuiButton props color ghost is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-text"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text"
   type="button"
 >
   <span
@@ -54,7 +54,7 @@ exports[`EuiButton props color ghost is rendered 1`] = `
 
 exports[`EuiButton props color primary is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   type="button"
 >
   <span
@@ -65,7 +65,7 @@ exports[`EuiButton props color primary is rendered 1`] = `
 
 exports[`EuiButton props color success is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-success"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-success"
   type="button"
 >
   <span
@@ -76,7 +76,7 @@ exports[`EuiButton props color success is rendered 1`] = `
 
 exports[`EuiButton props color text is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-text"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text"
   type="button"
 >
   <span
@@ -87,7 +87,7 @@ exports[`EuiButton props color text is rendered 1`] = `
 
 exports[`EuiButton props color warning is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-warning"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-warning"
   type="button"
 >
   <span
@@ -98,7 +98,7 @@ exports[`EuiButton props color warning is rendered 1`] = `
 
 exports[`EuiButton props contentProps is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   type="button"
 >
   <span
@@ -117,7 +117,7 @@ exports[`EuiButton props contentProps is rendered 1`] = `
 
 exports[`EuiButton props fill is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-fill-primary"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary"
   type="button"
 >
   <span
@@ -128,7 +128,7 @@ exports[`EuiButton props fill is rendered 1`] = `
 
 exports[`EuiButton props fullWidth is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-primary"
   type="button"
 >
   <span
@@ -139,7 +139,7 @@ exports[`EuiButton props fullWidth is rendered 1`] = `
 
 exports[`EuiButton props href secures the rel attribute when the target is _blank 1`] = `
 <a
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   href="#"
   rel="noopener noreferrer"
   target="_blank"
@@ -152,7 +152,7 @@ exports[`EuiButton props href secures the rel attribute when the target is _blan
 
 exports[`EuiButton props iconSide left is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   type="button"
 >
   <span
@@ -173,7 +173,7 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
 
 exports[`EuiButton props iconSide right is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   type="button"
 >
   <span
@@ -194,7 +194,7 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
 
 exports[`EuiButton props iconSize m is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   type="button"
 >
   <span
@@ -215,7 +215,7 @@ exports[`EuiButton props iconSize m is rendered 1`] = `
 
 exports[`EuiButton props iconSize s is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   type="button"
 >
   <span
@@ -236,7 +236,7 @@ exports[`EuiButton props iconSize s is rendered 1`] = `
 
 exports[`EuiButton props iconType is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   type="button"
 >
   <span
@@ -252,7 +252,7 @@ exports[`EuiButton props iconType is rendered 1`] = `
 
 exports[`EuiButton props isDisabled is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-base-disabled"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-base-disabled"
   disabled=""
   type="button"
 >
@@ -264,7 +264,7 @@ exports[`EuiButton props isDisabled is rendered 1`] = `
 
 exports[`EuiButton props isDisabled renders a button even when href is defined 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-base-disabled"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-base-disabled"
   disabled=""
   type="button"
 >
@@ -276,7 +276,7 @@ exports[`EuiButton props isDisabled renders a button even when href is defined 1
 
 exports[`EuiButton props isDisabled renders if passed as disabled 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-base-disabled"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-base-disabled"
   disabled=""
   type="button"
 >
@@ -288,7 +288,7 @@ exports[`EuiButton props isDisabled renders if passed as disabled 1`] = `
 
 exports[`EuiButton props isLoading is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-base-disabled"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-base-disabled"
   disabled=""
   type="button"
 >
@@ -308,7 +308,7 @@ exports[`EuiButton props isLoading is rendered 1`] = `
 exports[`EuiButton props isSelected is rendered as false 1`] = `
 <button
   aria-pressed="false"
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   type="button"
 >
   <span
@@ -320,7 +320,7 @@ exports[`EuiButton props isSelected is rendered as false 1`] = `
 exports[`EuiButton props isSelected is rendered as true 1`] = `
 <button
   aria-pressed="true"
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   type="button"
 >
   <span
@@ -331,7 +331,7 @@ exports[`EuiButton props isSelected is rendered as true 1`] = `
 
 exports[`EuiButton props minWidth is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-base-primary"
   type="button"
 >
   <span
@@ -342,7 +342,7 @@ exports[`EuiButton props minWidth is rendered 1`] = `
 
 exports[`EuiButton props size m is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   type="button"
 >
   <span
@@ -353,7 +353,7 @@ exports[`EuiButton props size m is rendered 1`] = `
 
 exports[`EuiButton props size s is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-s-defaultMinWidth-s-base-primary"
+  class="euiButton emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
   type="button"
 >
   <span
@@ -364,7 +364,7 @@ exports[`EuiButton props size s is rendered 1`] = `
 
 exports[`EuiButton props textProps is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-base-primary"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   type="button"
 >
   <span
diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss
index b1848d1135e..dfe48e2e339 100644
--- a/src/components/button/_index.scss
+++ b/src/components/button/_index.scss
@@ -1,3 +1,2 @@
 @import 'button_content';
 @import 'button_empty/index';
-@import 'button_icon/index';
diff --git a/src/components/button/button_display/__snapshots__/_button_display.test.tsx.snap b/src/components/button/button_display/__snapshots__/_button_display.test.tsx.snap
index 2d8be4b8f27..f1280f59cd4 100644
--- a/src/components/button/button_display/__snapshots__/_button_display.test.tsx.snap
+++ b/src/components/button/button_display/__snapshots__/_button_display.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiButtonDisplay renders 1`] = `
 <button
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-m"
+  class="testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth"
   data-test-subj="test subject string"
   type="button"
 >
diff --git a/src/components/button/button_display/_button_display.styles.ts b/src/components/button/button_display/_button_display.styles.ts
index ea9f2556be9..dacbce5ad90 100644
--- a/src/components/button/button_display/_button_display.styles.ts
+++ b/src/components/button/button_display/_button_display.styles.ts
@@ -13,6 +13,8 @@ import {
   logicalShorthandCSS,
   logicalTextAlignStyle,
 } from '../../../global_styling';
+import { euiButtonSizeMap } from '../../../themes/amsterdam/global_styling/mixins';
+import { EuiButtonDisplaySizes } from './_button_display';
 
 // Provides a solid reset and base for handling sizing layout
 // Does not include any visual styles
@@ -28,16 +30,19 @@ export const euiButtonBaseCSS = () => {
   `;
 };
 
-const _buttonSize = (size: string) => {
-  return `
-    ${logicalCSS('height', size)};
-    // prevents descenders from getting cut off
-    line-height: ${size};
-  `;
-};
-
 export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
+  const sizes = euiButtonSizeMap(euiThemeContext);
+
+  const _buttonSize = (sizeKey: EuiButtonDisplaySizes) => {
+    const size = sizes[sizeKey];
+    return css`
+      ${logicalCSS('height', size.height)}
+      line-height: ${size.height}; /* Prevents descenders from getting cut off */
+      ${euiFontSize(euiThemeContext, size.fontScale)}
+      border-radius: ${size.radius};
+    `;
+  };
 
   return {
     // Base
@@ -63,8 +68,8 @@ export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('min-width', `${euiTheme.base * 7}px`)}
     `,
     // Sizes
-    xs: css(_buttonSize(euiTheme.size.l), euiFontSize(euiThemeContext, 'xs')),
-    s: css(_buttonSize(euiTheme.size.xl), euiFontSize(euiThemeContext, 's')),
-    m: css(_buttonSize(euiTheme.size.xxl), euiFontSize(euiThemeContext, 's')),
+    xs: css(_buttonSize('xs')),
+    s: css(_buttonSize('s')),
+    m: css(_buttonSize('m')),
   };
 };
diff --git a/src/components/button/button_display/_button_display.tsx b/src/components/button/button_display/_button_display.tsx
index 1837c47fecf..679bd04d118 100644
--- a/src/components/button/button_display/_button_display.tsx
+++ b/src/components/button/button_display/_button_display.tsx
@@ -32,7 +32,6 @@ import {
   EuiButtonDisplayContentType,
 } from './_button_display_content';
 import { validateHref } from '../../../services/security/href_validator';
-import { useEuiButtonRadiusCSS } from '../../../themes/amsterdam/global_styling/mixins';
 
 const SIZES = ['xs', 's', 'm'] as const;
 export type EuiButtonDisplaySizes = (typeof SIZES)[number];
@@ -142,14 +141,12 @@ export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
     const theme = useEuiTheme();
 
     const styles = euiButtonDisplayStyles(theme);
-    const buttonRadiusStyle = useEuiButtonRadiusCSS()[size];
     const cssStyles = [
       styles.euiButtonDisplay,
       styles[size],
       fullWidth && styles.fullWidth,
       minWidth == null && styles.defaultMinWidth,
       buttonIsDisabled && styles.isDisabled,
-      buttonRadiusStyle,
     ];
 
     const innerNode = (
diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
index 95750e82c57..c51210bd898 100644
--- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
+++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -37,7 +37,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
       data-test-subj="button01"
       title="Option two"
       type="button"
@@ -59,7 +59,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-compressed-empty-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-compressed-empty-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -94,7 +94,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -122,7 +122,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       </span>
     </label>
     <label
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
       title="Option two"
       type="button"
     >
@@ -150,7 +150,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-compressed-empty-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-compressed-empty-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -186,7 +186,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-m-euiButtonGroupButton-m-uncompressed-base-text"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-euiButtonGroupButton-m-uncompressed-base-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -208,7 +208,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-m-euiButtonGroupButton-m-uncompressed-base-text"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-euiButtonGroupButton-m-uncompressed-base-text"
       data-test-subj="button01"
       title="Option two"
       type="button"
@@ -230,7 +230,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-euiButtonGroupButton-m-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-euiButtonGroupButton-m-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -265,7 +265,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-m-euiButtonGroupButton-m-uncompressed-base-text"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-euiButtonGroupButton-m-uncompressed-base-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -293,7 +293,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-m-euiButtonGroupButton-m-uncompressed-base-text"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-euiButtonGroupButton-m-uncompressed-base-text"
       title="Option two"
       type="button"
     >
@@ -321,7 +321,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-euiButtonGroupButton-m-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-euiButtonGroupButton-m-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -357,7 +357,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -379,7 +379,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="button01"
       title="Option two"
       type="button"
@@ -401,7 +401,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -436,7 +436,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -464,7 +464,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       title="Option two"
       type="button"
     >
@@ -492,7 +492,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -528,7 +528,7 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-accent"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-accent"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -550,7 +550,7 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-accent"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-accent"
       data-test-subj="button01"
       title="Option two"
       type="button"
@@ -572,7 +572,7 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -607,7 +607,7 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = `
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-accent"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-accent"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -635,7 +635,7 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-accent"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-accent"
       title="Option two"
       type="button"
     >
@@ -663,7 +663,7 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -699,7 +699,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-danger"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-danger"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -721,7 +721,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-danger"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-danger"
       data-test-subj="button01"
       title="Option two"
       type="button"
@@ -743,7 +743,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -778,7 +778,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-danger"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-danger"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -806,7 +806,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-danger"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-danger"
       title="Option two"
       type="button"
     >
@@ -834,7 +834,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -870,7 +870,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-primary"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-primary"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -892,7 +892,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-primary"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-primary"
       data-test-subj="button01"
       title="Option two"
       type="button"
@@ -914,7 +914,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -949,7 +949,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-primary"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-primary"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -977,7 +977,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       </span>
     </label>
     <label
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-primary"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-primary"
       title="Option two"
       type="button"
     >
@@ -1005,7 +1005,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -1041,7 +1041,7 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-success"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-success"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -1063,7 +1063,7 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-success"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-success"
       data-test-subj="button01"
       title="Option two"
       type="button"
@@ -1085,7 +1085,7 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -1120,7 +1120,7 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] =
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-success"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-success"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -1148,7 +1148,7 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] =
       </span>
     </label>
     <label
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-success"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-success"
       title="Option two"
       type="button"
     >
@@ -1176,7 +1176,7 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] =
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -1212,7 +1212,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -1234,7 +1234,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="button01"
       title="Option two"
       type="button"
@@ -1256,7 +1256,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -1291,7 +1291,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -1319,7 +1319,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       title="Option two"
       type="button"
     >
@@ -1347,7 +1347,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -1383,7 +1383,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-warning"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-warning"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -1405,7 +1405,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-warning"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-warning"
       data-test-subj="button01"
       title="Option two"
       type="button"
@@ -1427,7 +1427,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -1462,7 +1462,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-warning"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-warning"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -1490,7 +1490,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       </span>
     </label>
     <label
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-warning"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-warning"
       title="Option two"
       type="button"
     >
@@ -1518,7 +1518,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -1555,7 +1555,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="test subject string"
       disabled=""
       title="Option one"
@@ -1578,7 +1578,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button01"
       disabled=""
       title="Option two"
@@ -1601,7 +1601,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -1638,7 +1638,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="test subject string"
       disabled=""
       title="Option one"
@@ -1661,7 +1661,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button01"
       disabled=""
       title="Option two"
@@ -1684,7 +1684,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -1720,7 +1720,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -1742,7 +1742,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="button01"
       title="Option two"
       type="button"
@@ -1764,7 +1764,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -1799,7 +1799,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -1827,7 +1827,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       title="Option two"
       type="button"
     >
@@ -1855,7 +1855,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -1891,7 +1891,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -1913,7 +1913,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
       data-test-subj="button01"
       title="Option two"
       type="button"
@@ -1935,7 +1935,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-iconOnly-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -1970,7 +1970,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -1998,7 +1998,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
       title="Option two"
       type="button"
     >
@@ -2026,7 +2026,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-iconOnly-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -2062,7 +2062,7 @@ exports[`EuiButtonGroup type="multi" idToSelectedMap 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="true"
-      class="euiButtonGroupButton euiButtonGroupButton-isSelected testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-fill-text"
+      class="euiButtonGroupButton euiButtonGroupButton-isSelected testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-fill-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -2084,7 +2084,7 @@ exports[`EuiButtonGroup type="multi" idToSelectedMap 1`] = `
     </button>
     <button
       aria-pressed="true"
-      class="euiButtonGroupButton euiButtonGroupButton-isSelected emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-fill-text"
+      class="euiButtonGroupButton euiButtonGroupButton-isSelected emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-fill-text"
       data-test-subj="button01"
       title="Option two"
       type="button"
@@ -2106,7 +2106,7 @@ exports[`EuiButtonGroup type="multi" idToSelectedMap 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -2144,7 +2144,7 @@ exports[`EuiButtonGroup type="multi" renders 1`] = `
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -2166,7 +2166,7 @@ exports[`EuiButtonGroup type="multi" renders 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="button01"
       title="Option two"
       type="button"
@@ -2188,7 +2188,7 @@ exports[`EuiButtonGroup type="multi" renders 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -2223,7 +2223,7 @@ exports[`EuiButtonGroup type="single" idSelected 1`] = `
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton-isSelected testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-fill-text"
+      class="euiButtonGroupButton euiButtonGroupButton-isSelected testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-fill-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -2252,7 +2252,7 @@ exports[`EuiButtonGroup type="single" idSelected 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       title="Option two"
       type="button"
     >
@@ -2280,7 +2280,7 @@ exports[`EuiButtonGroup type="single" idSelected 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
@@ -2317,7 +2317,7 @@ exports[`EuiButtonGroup type="single" renders 1`] = `
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
       title="Option one"
       type="button"
@@ -2345,7 +2345,7 @@ exports[`EuiButtonGroup type="single" renders 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-uncompressed-base-text"
       title="Option two"
       type="button"
     >
@@ -2373,7 +2373,7 @@ exports[`EuiButtonGroup type="single" renders 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="button02"
       disabled=""
       title="Option three"
diff --git a/src/components/button/button_group/button_group.stories.tsx b/src/components/button/button_group/button_group.stories.tsx
index 10b8c6aa0b6..9e3c8cdd3cc 100644
--- a/src/components/button/button_group/button_group.stories.tsx
+++ b/src/components/button/button_group/button_group.stories.tsx
@@ -21,7 +21,6 @@ const meta: Meta<EuiButtonGroupProps> = {
   component: EuiButtonGroup,
   parameters: {
     controls: {
-      sort: 'requiredFirst',
       exclude: ['data-test-subj'],
     },
   },
diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
index c743d8b066e..ce3881e76cb 100644
--- a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
+++ b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiButtonIcon is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiButtonIcon euiButtonIcon--xSmall testClass1 testClass2 emotion-euiButtonIcon-empty-primary-hoverStyles"
+  class="euiButtonIcon testClass1 testClass2 emotion-euiButtonIcon-xs-empty-primary"
   data-test-subj="test subject string"
   type="button"
 >
@@ -19,7 +19,7 @@ exports[`EuiButtonIcon is rendered 1`] = `
 exports[`EuiButtonIcon props color accent is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-accent-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-accent"
   type="button"
 >
   <span
@@ -34,7 +34,7 @@ exports[`EuiButtonIcon props color accent is rendered 1`] = `
 exports[`EuiButtonIcon props color danger is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-danger-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-danger"
   type="button"
 >
   <span
@@ -49,7 +49,7 @@ exports[`EuiButtonIcon props color danger is rendered 1`] = `
 exports[`EuiButtonIcon props color ghost is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiColorMode-dark-colorClassName"
   type="button"
 >
   <span
@@ -64,7 +64,7 @@ exports[`EuiButtonIcon props color ghost is rendered 1`] = `
 exports[`EuiButtonIcon props color primary is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-primary-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
   type="button"
 >
   <span
@@ -79,7 +79,7 @@ exports[`EuiButtonIcon props color primary is rendered 1`] = `
 exports[`EuiButtonIcon props color success is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-success-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-success"
   type="button"
 >
   <span
@@ -94,7 +94,7 @@ exports[`EuiButtonIcon props color success is rendered 1`] = `
 exports[`EuiButtonIcon props color text is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
   type="button"
 >
   <span
@@ -109,7 +109,7 @@ exports[`EuiButtonIcon props color text is rendered 1`] = `
 exports[`EuiButtonIcon props color warning is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-warning-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-warning"
   type="button"
 >
   <span
@@ -124,7 +124,7 @@ exports[`EuiButtonIcon props color warning is rendered 1`] = `
 exports[`EuiButtonIcon props display base is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-base-primary"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-base-primary"
   type="button"
 >
   <span
@@ -139,7 +139,7 @@ exports[`EuiButtonIcon props display base is rendered 1`] = `
 exports[`EuiButtonIcon props display empty is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-primary-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
   type="button"
 >
   <span
@@ -154,7 +154,7 @@ exports[`EuiButtonIcon props display empty is rendered 1`] = `
 exports[`EuiButtonIcon props display fill is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-fill-primary"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-fill-primary"
   type="button"
 >
   <span
@@ -169,7 +169,7 @@ exports[`EuiButtonIcon props display fill is rendered 1`] = `
 exports[`EuiButtonIcon props href secures the rel attribute when the target is _blank 1`] = `
 <a
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-primary-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
   href="#"
   rel="noopener noreferrer"
   target="_blank"
@@ -186,7 +186,7 @@ exports[`EuiButtonIcon props href secures the rel attribute when the target is _
 exports[`EuiButtonIcon props iconType is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-primary-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
   type="button"
 >
   <span
@@ -201,7 +201,7 @@ exports[`EuiButtonIcon props iconType is rendered 1`] = `
 exports[`EuiButtonIcon props isDisabled is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-disabled-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
   disabled=""
   type="button"
 >
@@ -217,7 +217,7 @@ exports[`EuiButtonIcon props isDisabled is rendered 1`] = `
 exports[`EuiButtonIcon props isDisabled or disabled is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-disabled-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
   disabled=""
   type="button"
 >
@@ -233,7 +233,7 @@ exports[`EuiButtonIcon props isDisabled or disabled is rendered 1`] = `
 exports[`EuiButtonIcon props isDisabled renders a button even when href is defined 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-disabled-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
   disabled=""
   type="button"
 >
@@ -249,7 +249,7 @@ exports[`EuiButtonIcon props isDisabled renders a button even when href is defin
 exports[`EuiButtonIcon props isLoading is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-disabled-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
   disabled=""
   type="button"
 >
@@ -257,6 +257,7 @@ exports[`EuiButtonIcon props isLoading is rendered 1`] = `
     aria-label="Loading"
     class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
     role="progressbar"
+    style="border-color: #07c currentcolor currentcolor currentcolor;"
   />
 </button>
 `;
@@ -265,7 +266,7 @@ exports[`EuiButtonIcon props isSelected is rendered as false 1`] = `
 <button
   aria-label="button"
   aria-pressed="false"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-primary-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
   type="button"
 >
   <span
@@ -281,7 +282,7 @@ exports[`EuiButtonIcon props isSelected is rendered as true 1`] = `
 <button
   aria-label="button"
   aria-pressed="true"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-primary-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
   type="button"
 >
   <span
@@ -296,7 +297,7 @@ exports[`EuiButtonIcon props isSelected is rendered as true 1`] = `
 exports[`EuiButtonIcon props size m is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-empty-primary-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-m-empty-primary"
   type="button"
 >
   <span
@@ -311,7 +312,7 @@ exports[`EuiButtonIcon props size m is rendered 1`] = `
 exports[`EuiButtonIcon props size s is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-empty-primary-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-s-empty-primary"
   type="button"
 >
   <span
@@ -326,7 +327,7 @@ exports[`EuiButtonIcon props size s is rendered 1`] = `
 exports[`EuiButtonIcon props size xs is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-primary-hoverStyles"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
   type="button"
 >
   <span
diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss
deleted file mode 100644
index 9d8519a7604..00000000000
--- a/src/components/button/button_icon/_button_icon.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.euiButtonIcon {
-  @include euiButton;
-
-  border-radius: $euiBorderRadius;
-  width: $euiButtonHeight;
-
-  // Ensures center alignment of any sized icon inside buttons and anchors
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-around;
-
-  & > svg {
-    // prevents the element and its children from receiving any pointer events to fix not bubbling click event in Safari
-    // https://stackoverflow.com/questions/24078524/svg-click-events-not-firing-bubbling-when-using-use-element
-    pointer-events: none;
-  }
-
-  &:disabled {
-    @include euiButtonContentDisabled;
-  }
-}
-
-.euiButtonIcon--xSmall {
-  height: $euiButtonHeightXSmall;
-  width: $euiButtonHeightXSmall;
-  border-radius: $euiBorderRadius * (2 / 3);
-}
-
-.euiButtonIcon--small {
-  height: $euiButtonHeightSmall;
-  width: $euiButtonHeightSmall;
-  border-radius: $euiBorderRadius * (2 / 3);
-}
diff --git a/src/components/button/button_icon/_index.scss b/src/components/button/button_icon/_index.scss
deleted file mode 100644
index d7a1e7f325a..00000000000
--- a/src/components/button/button_icon/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'button_icon';
diff --git a/src/components/button/button_icon/button_icon.stories.tsx b/src/components/button/button_icon/button_icon.stories.tsx
new file mode 100644
index 00000000000..29d2e49cf62
--- /dev/null
+++ b/src/components/button/button_icon/button_icon.stories.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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 type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiButtonIcon, EuiButtonIconProps } from './button_icon';
+
+const meta: Meta<EuiButtonIconProps> = {
+  title: 'EuiButtonIcon',
+  component: EuiButtonIcon,
+};
+
+export default meta;
+type Story = StoryObj<EuiButtonIconProps>;
+
+export const Playground: Story = {
+  args: {
+    iconType: 'faceHappy',
+    color: 'primary',
+    display: 'empty',
+    size: 'xs',
+    iconSize: 'm',
+    isDisabled: false,
+    isLoading: false,
+    isSelected: false,
+  },
+};
diff --git a/src/components/button/button_icon/button_icon.styles.ts b/src/components/button/button_icon/button_icon.styles.ts
new file mode 100644
index 00000000000..38ea22118da
--- /dev/null
+++ b/src/components/button/button_icon/button_icon.styles.ts
@@ -0,0 +1,68 @@
+/*
+ * 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 { UseEuiTheme } from '../../../services';
+import { logicalSizeCSS } from '../../../global_styling';
+import {
+  _EuiButtonColor,
+  euiButtonEmptyColor,
+  euiButtonSizeMap,
+} from '../../../themes/amsterdam/global_styling/mixins/button';
+
+import { euiButtonBaseCSS } from '../button_display/_button_display.styles';
+
+export const euiButtonIconStyles = (euiThemeContext: UseEuiTheme) => {
+  const sizes = euiButtonSizeMap(euiThemeContext);
+
+  return {
+    euiButtonIcon: css`
+      ${euiButtonBaseCSS()}
+
+      /* Ensures center alignment of any sized icon inside buttons and anchors */
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-around;
+
+      /* Prevents the element and its children from receiving any pointer events to fix not bubbling click event in Safari
+         https://stackoverflow.com/questions/24078524/svg-click-events-not-firing-bubbling-when-using-use-element */
+      & > svg {
+        pointer-events: none;
+      }
+    `,
+    isDisabled: css`
+      cursor: not-allowed;
+    `,
+    // Sizes
+    xs: css`
+      ${logicalSizeCSS(sizes.xs.height)}
+      border-radius: ${sizes.xs.radius};
+    `,
+    s: css`
+      ${logicalSizeCSS(sizes.s.height)}
+      border-radius: ${sizes.s.radius};
+    `,
+    m: css`
+      ${logicalSizeCSS(sizes.m.height)}
+      border-radius: ${sizes.m.radius};
+    `,
+  };
+};
+
+export const _emptyHoverStyles = (
+  euiThemeContext: UseEuiTheme,
+  color: _EuiButtonColor | 'disabled'
+) => {
+  return css`
+    &:hover {
+      background-color: ${euiButtonEmptyColor(euiThemeContext, color)
+        .backgroundColor};
+    }
+  `;
+};
diff --git a/src/components/button/button_icon/button_icon.test.tsx b/src/components/button/button_icon/button_icon.test.tsx
index ba6c6a93f56..30424343b1f 100644
--- a/src/components/button/button_icon/button_icon.test.tsx
+++ b/src/components/button/button_icon/button_icon.test.tsx
@@ -7,7 +7,8 @@
  */
 
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { fireEvent } from '@testing-library/dom';
+import { render } from '../../../test/rtl';
 import { requiredProps } from '../../../test/required_props';
 import { shouldRenderCustomStyles } from '../../../test/internal';
 
@@ -15,38 +16,38 @@ import { EuiButtonIcon, DISPLAYS, SIZES } from './button_icon';
 import { BUTTON_COLORS } from '../../../themes/amsterdam/global_styling/mixins';
 
 describe('EuiButtonIcon', () => {
+  shouldRenderCustomStyles(
+    <EuiButtonIcon iconType="user" {...requiredProps} />
+  );
+
   test('is rendered', () => {
-    const component = render(
+    const { container } = render(
       <EuiButtonIcon iconType="user" {...requiredProps} />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
-  shouldRenderCustomStyles(
-    <EuiButtonIcon iconType="user" {...requiredProps} />
-  );
-
   describe('props', () => {
     describe('isDisabled', () => {
       it('is rendered', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon iconType="user" aria-label="button" isDisabled />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
 
       it('or disabled is rendered', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon iconType="user" aria-label="button" disabled />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
 
       it('renders a button even when href is defined', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon
             iconType="user"
             aria-label="button"
@@ -55,44 +56,44 @@ describe('EuiButtonIcon', () => {
           />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
 
     describe('iconType', () => {
       it('is rendered', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon aria-label="button" iconType="user" />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
 
     describe('color', () => {
       BUTTON_COLORS.forEach((color) => {
         test(`${color} is rendered`, () => {
-          const component = render(
+          const { container } = render(
             <EuiButtonIcon iconType="user" aria-label="button" color={color} />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
       });
 
       test('ghost is rendered', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon iconType="user" aria-label="button" color={'ghost'} />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
 
     describe('display', () => {
       DISPLAYS.forEach((display) => {
         test(`${display} is rendered`, () => {
-          const component = render(
+          const { container } = render(
             <EuiButtonIcon
               iconType="user"
               aria-label="button"
@@ -100,7 +101,7 @@ describe('EuiButtonIcon', () => {
             />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
       });
     });
@@ -108,26 +109,26 @@ describe('EuiButtonIcon', () => {
     describe('size', () => {
       SIZES.forEach((size) => {
         test(`${size} is rendered`, () => {
-          const component = render(
+          const { container } = render(
             <EuiButtonIcon iconType="user" aria-label="button" size={size} />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
       });
     });
 
     describe('isSelected', () => {
       it('is rendered as true', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon iconType="user" aria-label="button" isSelected />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
 
       it('is rendered as false', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon
             iconType="user"
             aria-label="button"
@@ -135,13 +136,13 @@ describe('EuiButtonIcon', () => {
           />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
 
     describe('href', () => {
       it('secures the rel attribute when the target is _blank', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon
             iconType="user"
             aria-label="button"
@@ -150,42 +151,42 @@ describe('EuiButtonIcon', () => {
           />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
 
     describe('onClick', () => {
       it('supports onClick and href', () => {
-        const handler = jest.fn();
-        const component = mount(
+        const onClick = jest.fn();
+        const { container } = render(
           <EuiButtonIcon
             iconType="user"
             aria-label="hoi"
             href="#"
-            onClick={handler}
+            onClick={onClick}
           />
         );
-        component.find('a').simulate('click');
-        expect(handler.mock.calls.length).toEqual(1);
+        fireEvent.click(container.querySelector('a')!);
+        expect(onClick).toHaveBeenCalledTimes(1);
       });
 
       it('supports onClick as a button', () => {
-        const handler = jest.fn();
-        const component = mount(
-          <EuiButtonIcon iconType="user" aria-label="hoi" onClick={handler} />
+        const onClick = jest.fn();
+        const { container } = render(
+          <EuiButtonIcon iconType="user" aria-label="hoi" onClick={onClick} />
         );
-        component.find('button').simulate('click');
-        expect(handler.mock.calls.length).toEqual(1);
+        fireEvent.click(container.querySelector('button')!);
+        expect(onClick).toHaveBeenCalledTimes(1);
       });
     });
 
     describe('isLoading', () => {
       it('is rendered', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon aria-label="button" iconType="user" isLoading />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
   });
diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
index 9888848626f..239fac6a985 100644
--- a/src/components/button/button_icon/button_icon.tsx
+++ b/src/components/button/button_icon/button_icon.tsx
@@ -24,7 +24,6 @@ import {
   ExclusiveUnion,
   PropsForAnchor,
   PropsForButton,
-  keysOf,
 } from '../../common';
 
 import { IconType, IconSize, EuiIcon } from '../../icon';
@@ -32,21 +31,18 @@ import { IconType, IconSize, EuiIcon } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
 
 import {
-  euiButtonEmptyColor,
   useEuiButtonColorCSS,
+  useEuiButtonFocusCSS,
   _EuiButtonColor,
 } from '../../../themes/amsterdam/global_styling/mixins/button';
 import { isButtonDisabled } from '../button_display/_button_display';
-import { css } from '@emotion/react';
+import { euiButtonIconStyles, _emptyHoverStyles } from './button_icon.styles';
 
-const displayToClassNameMap = {
-  base: null,
-  empty: 'euiButtonIcon--empty',
-  fill: 'euiButtonIcon--fill',
-};
+export const SIZES = ['xs', 's', 'm'] as const;
+export type EuiButtonIconSizes = (typeof SIZES)[number];
 
-export const DISPLAYS = keysOf(displayToClassNameMap);
-type EuiButtonIconDisplay = keyof typeof displayToClassNameMap;
+export const DISPLAYS = ['base', 'empty', 'fill'] as const;
+type EuiButtonIconDisplay = (typeof DISPLAYS)[number];
 
 export interface EuiButtonIconProps extends CommonProps {
   iconType: IconType;
@@ -109,16 +105,6 @@ type Props = ExclusiveUnion<
   EuiButtonIconPropsForButton
 >;
 
-const sizeToClassNameMap = {
-  xs: 'euiButtonIcon--xSmall',
-  s: 'euiButtonIcon--small',
-  m: 'euiButtonIcon--medium',
-};
-
-export type EuiButtonIconSizes = keyof typeof sizeToClassNameMap;
-
-export const SIZES = keysOf(sizeToClassNameMap);
-
 export const EuiButtonIcon: FunctionComponent<Props> = (props) => {
   const {
     className,
@@ -157,29 +143,22 @@ export const EuiButtonIcon: FunctionComponent<Props> = (props) => {
   }
 
   const color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
+  const buttonColorStyles = useEuiButtonColorCSS({ display });
+  const buttonFocusStyle = useEuiButtonFocusCSS();
+
+  const styles = euiButtonIconStyles(euiThemeContext);
+  const emptyHoverStyles = _emptyHoverStyles(euiThemeContext, color);
 
-  const styles = {
-    euiButtonIcon: css``,
-    colors: useEuiButtonColorCSS({ display }),
-    // Temporary extra style for empty `:hover` state until we decide how to handle universally
-    hoverStyles: css`
-      &:hover {
-        background-color: ${euiButtonEmptyColor(euiThemeContext, color)
-          .backgroundColor};
-      }
-    `,
-  };
   const cssStyles = [
     styles.euiButtonIcon,
-    styles.colors[color],
-    display === 'empty' && styles.hoverStyles,
+    styles[size],
+    buttonColorStyles[color],
+    buttonFocusStyle,
+    display === 'empty' && emptyHoverStyles,
+    isDisabled && styles.isDisabled,
   ];
 
-  const classes = classNames(
-    'euiButtonIcon',
-    size && sizeToClassNameMap[size],
-    className
-  );
+  const classes = classNames('euiButtonIcon', className);
 
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
@@ -205,13 +184,24 @@ export const EuiButtonIcon: FunctionComponent<Props> = (props) => {
     );
   }
 
-  // `original` size doesn't exist in `EuiLoadingSpinner`
-  // when the `iconSize` is `original` we don't pass any size to the `EuiLoadingSpinner`
-  // so it gets the default size
-  const loadingSize = iconSize === 'original' ? undefined : iconSize;
-
   if (iconType && isLoading) {
-    buttonIcon = <EuiLoadingSpinner size={loadingSize} />;
+    // `original` size doesn't exist in `EuiLoadingSpinner`
+    // when the `iconSize` is `original` we don't pass any size to the `EuiLoadingSpinner`
+    // so it gets the default size
+    const loadingSize = iconSize === 'original' ? undefined : iconSize;
+
+    // When the button is disabled the text gets gray
+    // and in some buttons the background gets a light gray
+    // for better contrast we want to change the border of the spinner
+    // to have the same color of the text. This way we ensure the borders
+    // are always visible. The default spinner color could be very light.
+    const loadingSpinnerColor = isDisabled
+      ? { border: 'currentcolor' }
+      : undefined;
+
+    buttonIcon = (
+      <EuiLoadingSpinner size={loadingSize} color={loadingSpinnerColor} />
+    );
   }
 
   // <a> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index 8d793a08153..ee77f960e27 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -82,7 +82,7 @@ exports[`EuiCard horizontal selectable 1`] = `
   <button
     aria-checked="false"
     aria-describedby="generated-idTitle generated-idDescription"
-    class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-text-euiCardSelect"
+    class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-text-euiCardSelect"
     role="switch"
     type="button"
   >
@@ -1077,7 +1077,7 @@ exports[`EuiCard props selectable 1`] = `
   <button
     aria-checked="false"
     aria-describedby="generated-idTitle generated-idDescription"
-    class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-text-euiCardSelect"
+    class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-text-euiCardSelect"
     role="switch"
     type="button"
   >
diff --git a/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap b/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap
index 1c1862c68ad..f7e2a5c0865 100644
--- a/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap
+++ b/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`EuiCardSelect is rendered 1`] = `
 <button
   aria-checked="false"
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-text-euiCardSelect"
+  class="testClass1 testClass2 emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-text-euiCardSelect"
   data-test-subj="test subject string"
   role="switch"
   type="button"
@@ -20,7 +20,7 @@ exports[`EuiCardSelect is rendered 1`] = `
 exports[`EuiCardSelect props can override color 1`] = `
 <button
   aria-checked="false"
-  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-danger-euiCardSelect"
+  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-danger-euiCardSelect"
   role="switch"
   type="button"
 >
@@ -35,7 +35,7 @@ exports[`EuiCardSelect props can override color 1`] = `
 exports[`EuiCardSelect props can override text 1`] = `
 <button
   aria-checked="false"
-  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-text-euiCardSelect"
+  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-text-euiCardSelect"
   role="switch"
   type="button"
 >
@@ -54,7 +54,7 @@ exports[`EuiCardSelect props can override text 1`] = `
 exports[`EuiCardSelect props isDisabled 1`] = `
 <button
   aria-checked="false"
-  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-isDisabled-m-base-disabled-euiCardSelect"
+  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-isDisabled-base-disabled-euiCardSelect"
   disabled=""
   role="switch"
   type="button"
@@ -70,7 +70,7 @@ exports[`EuiCardSelect props isDisabled 1`] = `
 exports[`EuiCardSelect props isSelected 1`] = `
 <button
   aria-checked="true"
-  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-m-base-success-euiCardSelect"
+  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-success-euiCardSelect"
   role="switch"
   type="button"
 >
diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
index 8b0792c99d4..e9fd6d229f5 100644
--- a/src/components/code/__snapshots__/code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -82,7 +82,7 @@ exports[`EuiCodeBlock fullscreen displays content in fullscreen mode 1`] = `
   >
     <button
       aria-label="Collapse"
-      class="euiButtonIcon euiButtonIcon--xSmall euiCodeBlock__fullScreenButton emotion-euiButtonIcon-empty-text-hoverStyles"
+      class="euiButtonIcon euiCodeBlock__fullScreenButton emotion-euiButtonIcon-xs-empty-text"
       type="button"
     >
       <span
@@ -518,7 +518,7 @@ exports[`EuiCodeBlock props overflowHeight is rendered 1`] = `
   >
     <button
       aria-label="Expand"
-      class="euiButtonIcon euiButtonIcon--xSmall euiCodeBlock__fullScreenButton emotion-euiButtonIcon-empty-text-hoverStyles"
+      class="euiButtonIcon euiCodeBlock__fullScreenButton emotion-euiButtonIcon-xs-empty-text"
       type="button"
     >
       <span
@@ -773,7 +773,7 @@ exports[`EuiCodeBlock virtualization renders a virtualized code block 1`] = `
   >
     <button
       aria-label="Expand"
-      class="euiButtonIcon euiButtonIcon--xSmall euiCodeBlock__fullScreenButton emotion-euiButtonIcon-empty-text-hoverStyles"
+      class="euiButtonIcon euiCodeBlock__fullScreenButton emotion-euiButtonIcon-xs-empty-text"
       type="button"
     >
       <span
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index 933e1e56d3d..3677d6e1e06 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -28,7 +28,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -82,7 +82,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -131,7 +131,7 @@ Array [
       </p>
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
+        class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -185,7 +185,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -235,7 +235,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -312,7 +312,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -394,7 +394,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index e489a2eb575..b4e3496cf35 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -237,7 +237,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro
       aria-controls="id"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton--right emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-arrowRight"
+      class="euiButtonIcon euiAccordion__iconButton euiAccordion__iconButton--right emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton-arrowRight"
       tabindex="-1"
       type="button"
     >
@@ -302,7 +302,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accord
       aria-controls="id"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton--right emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-arrowRight"
+      class="euiButtonIcon euiAccordion__iconButton euiAccordion__iconButton--right emotion-euiButtonIcon-xs-empty-text-euiAccordion__iconButton-arrowRight"
       tabindex="-1"
       type="button"
     >
diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
index 9fc05d0f7eb..36ffd4e89c3 100644
--- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
+++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
@@ -47,7 +47,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -143,7 +143,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -239,7 +239,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -335,7 +335,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -430,7 +430,7 @@ exports[`EuiControlBar props position is rendered 1`] = `
       </ol>
     </nav>
     <button
-      class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
+      class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
       data-test-subj="dts"
       type="button"
     >
@@ -519,7 +519,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -615,7 +615,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -716,7 +716,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-s-base-text"
+        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 0e0ce8c2819..b60ebc84bf3 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
       <a
         aria-controls="generated-id"
         aria-label="Previous page"
-        class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+        class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
         data-test-subj="pagination-button-previous"
         href="#generated-id"
         rel="noreferrer"
@@ -119,7 +119,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
       </ul>
       <button
         aria-label="Next page"
-        class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+        class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
         data-test-subj="pagination-button-next"
         disabled=""
         type="button"
@@ -524,7 +524,7 @@ Array [
               >
                 <button
                   aria-label="Keyboard shortcuts"
-                  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+                  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
                   data-test-subj="dataGridKeyboardShortcutsButton"
                   type="button"
                 >
@@ -550,7 +550,7 @@ Array [
               >
                 <button
                   aria-label="Display options"
-                  class="euiButtonIcon euiButtonIcon--xSmall euiDataGrid__controlBtn emotion-euiButtonIcon-empty-text-hoverStyles"
+                  class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
                   data-test-subj="dataGridDisplaySelectorButton"
                   type="button"
                 >
@@ -569,7 +569,7 @@ Array [
           >
             <button
               aria-label="Enter fullscreen"
-              class="euiButtonIcon euiButtonIcon--xSmall euiDataGrid__controlBtn emotion-euiButtonIcon-empty-text-hoverStyles"
+              class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
               data-test-subj="dataGridFullScreenButton"
               type="button"
             >
@@ -996,7 +996,7 @@ Array [
               >
                 <button
                   aria-label="Keyboard shortcuts"
-                  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+                  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
                   data-test-subj="dataGridKeyboardShortcutsButton"
                   type="button"
                 >
@@ -1022,7 +1022,7 @@ Array [
               >
                 <button
                   aria-label="Display options"
-                  class="euiButtonIcon euiButtonIcon--xSmall euiDataGrid__controlBtn emotion-euiButtonIcon-empty-text-hoverStyles"
+                  class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
                   data-test-subj="dataGridDisplaySelectorButton"
                   type="button"
                 >
@@ -1041,7 +1041,7 @@ Array [
           >
             <button
               aria-label="Enter fullscreen"
-              class="euiButtonIcon euiButtonIcon--xSmall euiDataGrid__controlBtn emotion-euiButtonIcon-empty-text-hoverStyles"
+              class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
               data-test-subj="dataGridFullScreenButton"
               type="button"
             >
@@ -1785,7 +1785,7 @@ Array [
               >
                 <button
                   aria-label="Keyboard shortcuts"
-                  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+                  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
                   data-test-subj="dataGridKeyboardShortcutsButton"
                   type="button"
                 >
@@ -1811,7 +1811,7 @@ Array [
               >
                 <button
                   aria-label="Display options"
-                  class="euiButtonIcon euiButtonIcon--xSmall euiDataGrid__controlBtn emotion-euiButtonIcon-empty-text-hoverStyles"
+                  class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
                   data-test-subj="dataGridDisplaySelectorButton"
                   type="button"
                 >
@@ -1830,7 +1830,7 @@ Array [
           >
             <button
               aria-label="Enter fullscreen"
-              class="euiButtonIcon euiButtonIcon--xSmall euiDataGrid__controlBtn emotion-euiButtonIcon-empty-text-hoverStyles"
+              class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
               data-test-subj="dataGridFullScreenButton"
               type="button"
             >
@@ -2256,7 +2256,7 @@ Array [
               >
                 <button
                   aria-label="Keyboard shortcuts"
-                  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+                  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
                   data-test-subj="dataGridKeyboardShortcutsButton"
                   type="button"
                 >
@@ -2282,7 +2282,7 @@ Array [
               >
                 <button
                   aria-label="Display options"
-                  class="euiButtonIcon euiButtonIcon--xSmall euiDataGrid__controlBtn emotion-euiButtonIcon-empty-text-hoverStyles"
+                  class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
                   data-test-subj="dataGridDisplaySelectorButton"
                   type="button"
                 >
@@ -2301,7 +2301,7 @@ Array [
           >
             <button
               aria-label="Enter fullscreen"
-              class="euiButtonIcon euiButtonIcon--xSmall euiDataGrid__controlBtn emotion-euiButtonIcon-empty-text-hoverStyles"
+              class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
               data-test-subj="dataGridFullScreenButton"
               type="button"
             >
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
index c3b33ace12d..e4312a0d7c1 100644
--- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
               >
                 <button
                   aria-label="Remove Column A from data grid sort"
-                  class="euiButtonIcon euiButtonIcon--xSmall euiDataGridColumnSorting__button emotion-euiButtonIcon-empty-text-hoverStyles"
+                  class="euiButtonIcon euiDataGridColumnSorting__button emotion-euiButtonIcon-xs-empty-text"
                   type="button"
                 >
                   <span
@@ -154,7 +154,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                     class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-fullWidth-compressed"
                   >
                     <label
-                      class="euiButtonGroupButton euiButtonGroupButton-isSelected emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-fill-text"
+                      class="euiButtonGroupButton euiButtonGroupButton-isSelected emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-fill-text"
                       data-test-subj="euiDataGridColumnSorting-sortColumn-columnA-asc"
                       title="Low-High"
                       type="button"
@@ -179,7 +179,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                       </span>
                     </label>
                     <label
-                      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
+                      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
                       data-test-subj="euiDataGridColumnSorting-sortColumn-columnA-desc"
                       title="High-Low"
                       type="button"
diff --git a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
index 20094cfee34..bac78149098 100644
--- a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key
         >
           <button
             aria-label="Keyboard shortcuts"
-            class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+            class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
             data-test-subj="dataGridKeyboardShortcutsButton"
             type="button"
           >
diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
index 4677e02206a..02a83befda7 100644
--- a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
+++ b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-m-fill-primary"
+      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"
@@ -128,7 +128,7 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-s-s-fill-primary"
+      class="euiSuperUpdateButton emotion-euiButtonDisplay-s-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"
@@ -331,7 +331,7 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-isDisabled-m-fill-disabled"
+      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-isDisabled-fill-disabled"
       data-test-subj="superDatePickerApplyTimeButton"
       disabled=""
       style="min-inline-size: 118px;"
@@ -398,7 +398,7 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-m-fill-primary"
+      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"
@@ -524,7 +524,7 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-m-fill-primary"
+      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       type="button"
     >
@@ -600,7 +600,7 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-m-fill-primary"
+      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"
@@ -673,7 +673,7 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-m-fill-primary"
+      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"
@@ -747,7 +747,7 @@ exports[`EuiSuperDatePicker renders 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-m-fill-primary"
+      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"
@@ -858,7 +858,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-m-fill-primary"
+      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
index de67a54675d..92d6dfb8082 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
@@ -41,7 +41,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             >
               <button
                 aria-label="Previous time window"
-                class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-primary-hoverStyles"
+                class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
                 type="button"
               >
                 <span
@@ -61,7 +61,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             >
               <button
                 aria-label="Next time window"
-                class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-primary-hoverStyles"
+                class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
                 type="button"
               >
                 <span
@@ -214,7 +214,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
       >
         <button
           aria-describedby="generated-id generated-id"
-          class="euiQuickSelect__applyButton emotion-euiButtonDisplay-s-defaultMinWidth-s-base-primary"
+          class="euiQuickSelect__applyButton emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
           type="button"
         >
           <span
diff --git a/src/components/facet/__snapshots__/facet_button.test.tsx.snap b/src/components/facet/__snapshots__/facet_button.test.tsx.snap
index 93c75252b95..8de5a816c46 100644
--- a/src/components/facet/__snapshots__/facet_button.test.tsx.snap
+++ b/src/components/facet/__snapshots__/facet_button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiFacetButton is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiFacetButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiFacetButton"
+  class="euiFacetButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-euiFacetButton"
   data-test-subj="test subject string"
   title="aria-label"
   type="button"
@@ -22,7 +22,7 @@ exports[`EuiFacetButton is rendered 1`] = `
 
 exports[`EuiFacetButton props icon is rendered 1`] = `
 <button
-  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiFacetButton"
+  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-euiFacetButton"
   type="button"
 >
   <span
@@ -43,7 +43,7 @@ exports[`EuiFacetButton props icon is rendered 1`] = `
 
 exports[`EuiFacetButton props isDisabled is rendered 1`] = `
 <button
-  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiFacetButton"
+  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiFacetButton"
   disabled=""
   type="button"
 >
@@ -71,7 +71,7 @@ exports[`EuiFacetButton props isDisabled is rendered 1`] = `
 
 exports[`EuiFacetButton props isLoading is rendered 1`] = `
 <button
-  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiFacetButton"
+  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-euiFacetButton"
   disabled=""
   type="button"
 >
@@ -94,7 +94,7 @@ exports[`EuiFacetButton props isLoading is rendered 1`] = `
 
 exports[`EuiFacetButton props isSelected is rendered 1`] = `
 <button
-  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiFacetButton"
+  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-euiFacetButton"
   type="button"
 >
   <span
@@ -111,7 +111,7 @@ exports[`EuiFacetButton props isSelected is rendered 1`] = `
 
 exports[`EuiFacetButton props quantity is rendered 1`] = `
 <button
-  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiFacetButton"
+  class="euiFacetButton emotion-euiButtonDisplay-s-defaultMinWidth-euiFacetButton"
   type="button"
 >
   <span
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index def4e660f76..4939ac699f0 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -28,7 +28,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -77,7 +77,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -125,7 +125,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-right"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-fill-text-euiFlyout__closeButton-outside-right"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -173,7 +173,7 @@ Array [
         </p>
         <button
           aria-label="aria-label"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton testClass1 testClass2 emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton testClass1 testClass2 emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="test subject string"
           type="button"
         >
@@ -256,7 +256,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -305,7 +305,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -354,7 +354,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -402,7 +402,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -450,7 +450,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -498,7 +498,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -545,7 +545,7 @@ Array [
       </p>
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+        class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -592,7 +592,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -640,7 +640,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -688,7 +688,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -736,7 +736,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -784,7 +784,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -832,7 +832,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -881,7 +881,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -929,7 +929,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -977,7 +977,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -1025,7 +1025,7 @@ Array [
         </p>
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+          class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -1065,7 +1065,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+        class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -1124,7 +1124,7 @@ exports[`EuiFlyout renders extra screen reader instructions when fixed EuiHeader
           </p>
           <button
             aria-label="Close this dialog"
-            class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-empty-text-hoverStyles-euiFlyout__closeButton-inside"
+            class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
             data-test-subj="euiFlyoutCloseButton"
             type="button"
           >
diff --git a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
index 57cd8caf400..313a89bcd26 100644
--- a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
+++ b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
@@ -105,7 +105,7 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
   </span>
   <button
     aria-label="Show password as plain text. Note: this will visually expose your password on the screen."
-    class="euiButtonIcon euiButtonIcon--xSmall euiFormControlLayout__append emotion-euiButtonIcon-empty-primary-hoverStyles"
+    class="euiButtonIcon euiFormControlLayout__append emotion-euiButtonIcon-xs-empty-primary"
     title="Show password as plain text. Note: this will visually expose your password on the screen."
     type="button"
   >
@@ -148,7 +148,7 @@ exports[`EuiFieldPassword props dual dualToggleProps is rendered 1`] = `
   </div>
   <button
     aria-label="aria-label"
-    class="euiButtonIcon euiButtonIcon--xSmall euiFormControlLayout__append testClass1 testClass2 emotion-euiButtonIcon-empty-primary-hoverStyles"
+    class="euiButtonIcon euiFormControlLayout__append testClass1 testClass2 emotion-euiButtonIcon-xs-empty-primary"
     data-test-subj="test subject string"
     title="Show password as plain text. Note: this will visually expose your password on the screen."
     type="button"
@@ -341,7 +341,7 @@ exports[`EuiFieldPassword props type dual is rendered 1`] = `
   </div>
   <button
     aria-label="Show password as plain text. Note: this will visually expose your password on the screen."
-    class="euiButtonIcon euiButtonIcon--xSmall euiFormControlLayout__append emotion-euiButtonIcon-empty-primary-hoverStyles"
+    class="euiButtonIcon euiFormControlLayout__append emotion-euiButtonIcon-xs-empty-primary"
     title="Show password as plain text. Note: this will visually expose your password on the screen."
     type="button"
   >
diff --git a/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
index 16d2621d462..49ca1c0f88e 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`EuiInlineEditForm edit mode editModeProps.cancelButtonProps 1`] = `
         >
           <button
             aria-label="Save edit"
-            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-success"
             data-test-subj="euiInlineEditModeSaveButton"
             type="button"
           >
@@ -68,7 +68,7 @@ exports[`EuiInlineEditForm edit mode editModeProps.cancelButtonProps 1`] = `
           </button>
           <button
             aria-label="Uh no. Do not save."
-            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-disabled"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-disabled-isDisabled"
             data-test-subj="euiInlineEditModeCancelButton"
             disabled=""
             type="button"
@@ -143,7 +143,7 @@ exports[`EuiInlineEditForm edit mode editModeProps.formRowProps 1`] = `
         >
           <button
             aria-label="Save edit"
-            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-success"
             data-test-subj="euiInlineEditModeSaveButton"
             type="button"
           >
@@ -156,7 +156,7 @@ exports[`EuiInlineEditForm edit mode editModeProps.formRowProps 1`] = `
           </button>
           <button
             aria-label="Cancel edit"
-            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-danger"
             data-test-subj="euiInlineEditModeCancelButton"
             type="button"
           >
@@ -235,7 +235,7 @@ exports[`EuiInlineEditForm edit mode editModeProps.inputProps 1`] = `
         >
           <button
             aria-label="Save edit"
-            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-success"
             data-test-subj="euiInlineEditModeSaveButton"
             type="button"
           >
@@ -248,7 +248,7 @@ exports[`EuiInlineEditForm edit mode editModeProps.inputProps 1`] = `
           </button>
           <button
             aria-label="Cancel edit"
-            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-danger"
             data-test-subj="euiInlineEditModeCancelButton"
             type="button"
           >
@@ -321,7 +321,7 @@ exports[`EuiInlineEditForm edit mode editModeProps.saveButtonProps 1`] = `
         >
           <button
             aria-label="Yes! Let's save."
-            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-primary"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-primary"
             data-test-subj="euiInlineEditModeSaveButton"
             type="button"
           >
@@ -334,7 +334,7 @@ exports[`EuiInlineEditForm edit mode editModeProps.saveButtonProps 1`] = `
           </button>
           <button
             aria-label="Cancel edit"
-            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-danger"
             data-test-subj="euiInlineEditModeCancelButton"
             type="button"
           >
@@ -416,7 +416,7 @@ exports[`EuiInlineEditForm edit mode isInvalid 1`] = `
         >
           <button
             aria-label="Save edit"
-            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-success"
             data-test-subj="euiInlineEditModeSaveButton"
             type="button"
           >
@@ -429,7 +429,7 @@ exports[`EuiInlineEditForm edit mode isInvalid 1`] = `
           </button>
           <button
             aria-label="Cancel edit"
-            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-danger"
             data-test-subj="euiInlineEditModeCancelButton"
             type="button"
           >
@@ -612,7 +612,7 @@ exports[`EuiInlineEditForm edit mode renders 1`] = `
         >
           <button
             aria-label="Save edit"
-            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-success"
             data-test-subj="euiInlineEditModeSaveButton"
             type="button"
           >
@@ -625,7 +625,7 @@ exports[`EuiInlineEditForm edit mode renders 1`] = `
           </button>
           <button
             aria-label="Cancel edit"
-            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+            class="euiButtonIcon emotion-euiButtonIcon-m-base-danger"
             data-test-subj="euiInlineEditModeCancelButton"
             type="button"
           >
diff --git a/src/components/list_group/__snapshots__/list_group.test.tsx.snap b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
index 37664455bca..5515e019168 100644
--- a/src/components/list_group/__snapshots__/list_group.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`EuiListGroup listItems is rendered 1`] = `
     </span>
     <button
       aria-label="bell"
-      class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-text-hoverStyles-euiListGroupItemExtraAction-alwaysShow"
+      class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-alwaysShow"
       type="button"
     >
       <span
@@ -145,7 +145,7 @@ exports[`EuiListGroup listItems is rendered with color 1`] = `
     </span>
     <button
       aria-label="bell"
-      class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-primary-hoverStyles-euiListGroupItemExtraAction-alwaysShow"
+      class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-primary-euiListGroupItemExtraAction-alwaysShow"
       type="button"
     >
       <span
diff --git a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
index bce94d5da09..823bc138294 100644
--- a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`EuiListGroupItem props extraAction can be disabled 1`] = `
   </span>
   <button
     aria-label="label"
-    class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-disabled-hoverStyles-euiListGroupItemExtraAction-hoverStyles"
+    class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiListGroupItemExtraAction-hoverStyles"
     disabled=""
     type="button"
   >
@@ -116,7 +116,7 @@ exports[`EuiListGroupItem props extraAction is rendered 1`] = `
   </span>
   <button
     aria-label="label"
-    class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-text-hoverStyles-euiListGroupItemExtraAction-alwaysShow"
+    class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-alwaysShow"
     type="button"
   >
     <span
diff --git a/src/components/list_group/__snapshots__/list_group_item_extra_action.test.tsx.snap b/src/components/list_group/__snapshots__/list_group_item_extra_action.test.tsx.snap
index 70b4c9b1d79..0a8e24a114c 100644
--- a/src/components/list_group/__snapshots__/list_group_item_extra_action.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group_item_extra_action.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiListGroupItem is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction testClass1 testClass2 emotion-euiButtonIcon-empty-primary-hoverStyles-euiListGroupItemExtraAction-hoverStyles"
+  class="euiButtonIcon euiListGroupItemExtraAction testClass1 testClass2 emotion-euiButtonIcon-xs-empty-primary-euiListGroupItemExtraAction-hoverStyles"
   data-test-subj="test subject string"
   type="button"
 >
@@ -19,7 +19,7 @@ exports[`EuiListGroupItem is rendered 1`] = `
 exports[`EuiListGroupItem props alwaysShow 1`] = `
 <button
   aria-label="aria-label"
-  class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction testClass1 testClass2 emotion-euiButtonIcon-empty-primary-hoverStyles-euiListGroupItemExtraAction-alwaysShow"
+  class="euiButtonIcon euiListGroupItemExtraAction testClass1 testClass2 emotion-euiButtonIcon-xs-empty-primary-euiListGroupItemExtraAction-alwaysShow"
   data-test-subj="test subject string"
   type="button"
 >
@@ -35,7 +35,7 @@ exports[`EuiListGroupItem props alwaysShow 1`] = `
 exports[`EuiListGroupItem props color 1`] = `
 <button
   aria-label="aria-label"
-  class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction testClass1 testClass2 emotion-euiButtonIcon-empty-accent-hoverStyles-euiListGroupItemExtraAction-hoverStyles"
+  class="euiButtonIcon euiListGroupItemExtraAction testClass1 testClass2 emotion-euiButtonIcon-xs-empty-accent-euiListGroupItemExtraAction-hoverStyles"
   data-test-subj="test subject string"
   type="button"
 >
@@ -51,7 +51,7 @@ exports[`EuiListGroupItem props color 1`] = `
 exports[`EuiListGroupItem props isDisabled 1`] = `
 <button
   aria-label="aria-label"
-  class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction testClass1 testClass2 emotion-euiButtonIcon-empty-disabled-hoverStyles-euiListGroupItemExtraAction-hoverStyles"
+  class="euiButtonIcon euiListGroupItemExtraAction testClass1 testClass2 emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiListGroupItemExtraAction-hoverStyles"
   data-test-subj="test subject string"
   disabled=""
   type="button"
@@ -68,7 +68,7 @@ exports[`EuiListGroupItem props isDisabled 1`] = `
 exports[`EuiListGroupItem props parentIsDisabled 1`] = `
 <button
   aria-label="aria-label"
-  class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction testClass1 testClass2 emotion-euiButtonIcon-empty-disabled-hoverStyles-euiListGroupItemExtraAction"
+  class="euiButtonIcon euiListGroupItemExtraAction testClass1 testClass2 emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiListGroupItemExtraAction"
   data-test-subj="test subject string"
   disabled=""
   type="button"
diff --git a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
index 9e6da828e8b..f2a0fccde71 100644
--- a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
+++ b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </span>
     <button
       aria-label="Pin Label with iconType to the top"
-      class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-text-hoverStyles-euiListGroupItemExtraAction-hoverStyles-euiPinnableListGroup__itemExtraAction"
+      class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-hoverStyles-euiPinnableListGroup__itemExtraAction"
       title="Pin Label with iconType to the top"
       type="button"
     >
@@ -53,7 +53,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </span>
     <button
       aria-label="bell"
-      class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-text-hoverStyles-euiListGroupItemExtraAction-alwaysShow"
+      class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-alwaysShow"
       type="button"
     >
       <span
@@ -81,7 +81,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </a>
     <button
       aria-label="Pin Active link to the top"
-      class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-text-hoverStyles-euiListGroupItemExtraAction-hoverStyles-euiPinnableListGroup__itemExtraAction"
+      class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-hoverStyles-euiPinnableListGroup__itemExtraAction"
       title="Pin Active link to the top"
       type="button"
     >
@@ -109,7 +109,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </button>
     <button
       aria-label="Unpin Button with onClick to the top"
-      class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-text-hoverStyles-euiListGroupItemExtraAction-alwaysShow-euiPinnableListGroup__itemExtraAction-pinned"
+      class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-alwaysShow-euiPinnableListGroup__itemExtraAction-pinned"
       title="Unpin Button with onClick to the top"
       type="button"
     >
@@ -138,7 +138,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </a>
     <button
       aria-label="Pin Link with href to the top"
-      class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-text-hoverStyles-euiListGroupItemExtraAction-hoverStyles-euiPinnableListGroup__itemExtraAction"
+      class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-hoverStyles-euiPinnableListGroup__itemExtraAction"
       title="Pin Link with href to the top"
       type="button"
     >
@@ -195,7 +195,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </span>
     <button
       aria-label="Pin item"
-      class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-text-hoverStyles-euiListGroupItemExtraAction-hoverStyles-euiPinnableListGroup__itemExtraAction"
+      class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-hoverStyles-euiPinnableListGroup__itemExtraAction"
       title="Pin item"
       type="button"
     >
@@ -222,7 +222,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </span>
     <button
       aria-label="bell"
-      class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-text-hoverStyles-euiListGroupItemExtraAction-alwaysShow"
+      class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-alwaysShow"
       type="button"
     >
       <span
@@ -250,7 +250,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </a>
     <button
       aria-label="Pin item"
-      class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-text-hoverStyles-euiListGroupItemExtraAction-hoverStyles-euiPinnableListGroup__itemExtraAction"
+      class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-hoverStyles-euiPinnableListGroup__itemExtraAction"
       title="Pin item"
       type="button"
     >
@@ -278,7 +278,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </button>
     <button
       aria-label="Unpin item"
-      class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-text-hoverStyles-euiListGroupItemExtraAction-alwaysShow-euiPinnableListGroup__itemExtraAction-pinned"
+      class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-alwaysShow-euiPinnableListGroup__itemExtraAction-pinned"
       title="Unpin item"
       type="button"
     >
@@ -307,7 +307,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </a>
     <button
       aria-label="Pin item"
-      class="euiButtonIcon euiButtonIcon--xSmall euiListGroupItemExtraAction emotion-euiButtonIcon-empty-text-hoverStyles-euiListGroupItemExtraAction-hoverStyles-euiPinnableListGroup__itemExtraAction"
+      class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-hoverStyles-euiPinnableListGroup__itemExtraAction"
       title="Pin item"
       type="button"
     >
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 286ba8b3cb8..16b2ce3d6df 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
       >
         <button
           aria-label="Bold"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -34,7 +34,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
       >
         <button
           aria-label="Italic"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -54,7 +54,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
       >
         <button
           aria-label="Unordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -71,7 +71,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
       >
         <button
           aria-label="Ordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -88,7 +88,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
       >
         <button
           aria-label="Task list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -108,7 +108,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
       >
         <button
           aria-label="Quote"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -125,7 +125,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
       >
         <button
           aria-label="Code"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -142,7 +142,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
       >
         <button
           aria-label="Link"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -204,7 +204,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
           >
             <button
               aria-label="Show markdown help"
-              class="euiButtonIcon euiButtonIcon--small euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-empty-text-hoverStyles"
+              class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text"
               title="Syntax help"
               type="button"
             >
@@ -247,7 +247,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Bold"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -264,7 +264,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Italic"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -284,7 +284,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Unordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -301,7 +301,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Ordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -318,7 +318,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Task list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -338,7 +338,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Quote"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -355,7 +355,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Code"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -372,7 +372,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Link"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -392,7 +392,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Tooltip"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -453,7 +453,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         >
           <button
             aria-label="Show markdown help"
-            class="euiButtonIcon euiButtonIcon--small euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-empty-text-hoverStyles"
+            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text"
             type="button"
           >
             <span
@@ -494,7 +494,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Bold"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -511,7 +511,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Italic"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -531,7 +531,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Unordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -548,7 +548,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Ordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -565,7 +565,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Task list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -585,7 +585,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Quote"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -602,7 +602,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Code"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -619,7 +619,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Link"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -639,7 +639,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Tooltip"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -699,7 +699,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
         >
           <button
             aria-label="Show markdown help"
-            class="euiButtonIcon euiButtonIcon--small euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-empty-text-hoverStyles"
+            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text"
             type="button"
           >
             <span
@@ -740,7 +740,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Bold"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -757,7 +757,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Italic"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -777,7 +777,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Unordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -794,7 +794,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Ordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -811,7 +811,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Task list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -831,7 +831,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Quote"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -848,7 +848,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Code"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -865,7 +865,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Link"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -885,7 +885,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Tooltip"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -945,7 +945,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
         >
           <button
             aria-label="Show markdown help"
-            class="euiButtonIcon euiButtonIcon--small euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-empty-text-hoverStyles"
+            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text"
             type="button"
           >
             <span
@@ -986,7 +986,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Bold"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1003,7 +1003,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Italic"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1023,7 +1023,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Unordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1040,7 +1040,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Ordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1057,7 +1057,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Task list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1077,7 +1077,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Quote"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1094,7 +1094,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Code"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1111,7 +1111,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Link"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1131,7 +1131,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Tooltip"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1191,7 +1191,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
         >
           <button
             aria-label="Show markdown help"
-            class="euiButtonIcon euiButtonIcon--small euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-empty-text-hoverStyles"
+            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text"
             type="button"
           >
             <span
@@ -1232,7 +1232,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Bold"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1249,7 +1249,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Italic"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1269,7 +1269,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Unordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1286,7 +1286,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Ordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1303,7 +1303,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Task list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1323,7 +1323,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Quote"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1340,7 +1340,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Code"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1357,7 +1357,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Link"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1377,7 +1377,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Tooltip"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
           data-test-subj="euiMarkdownEditorToolbarButton"
           type="button"
         >
@@ -1437,7 +1437,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
         >
           <button
             aria-label="Show markdown help"
-            class="euiButtonIcon euiButtonIcon--small euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-empty-text-hoverStyles"
+            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text"
             type="button"
           >
             <span
@@ -1478,7 +1478,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
       >
         <button
           aria-label="Bold"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-disabled-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
           data-test-subj="euiMarkdownEditorToolbarButton"
           disabled=""
           type="button"
@@ -1496,7 +1496,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
       >
         <button
           aria-label="Italic"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-disabled-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
           data-test-subj="euiMarkdownEditorToolbarButton"
           disabled=""
           type="button"
@@ -1517,7 +1517,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
       >
         <button
           aria-label="Unordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-disabled-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
           data-test-subj="euiMarkdownEditorToolbarButton"
           disabled=""
           type="button"
@@ -1535,7 +1535,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
       >
         <button
           aria-label="Ordered list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-disabled-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
           data-test-subj="euiMarkdownEditorToolbarButton"
           disabled=""
           type="button"
@@ -1553,7 +1553,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
       >
         <button
           aria-label="Task list"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-disabled-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
           data-test-subj="euiMarkdownEditorToolbarButton"
           disabled=""
           type="button"
@@ -1574,7 +1574,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
       >
         <button
           aria-label="Quote"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-disabled-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
           data-test-subj="euiMarkdownEditorToolbarButton"
           disabled=""
           type="button"
@@ -1592,7 +1592,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
       >
         <button
           aria-label="Code"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-disabled-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
           data-test-subj="euiMarkdownEditorToolbarButton"
           disabled=""
           type="button"
@@ -1610,7 +1610,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
       >
         <button
           aria-label="Link"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-disabled-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
           data-test-subj="euiMarkdownEditorToolbarButton"
           disabled=""
           type="button"
@@ -1631,7 +1631,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
       >
         <button
           aria-label="Tooltip"
-          class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-disabled-hoverStyles"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
           data-test-subj="euiMarkdownEditorToolbarButton"
           disabled=""
           type="button"
@@ -1694,7 +1694,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
         >
           <button
             aria-label="Show markdown help"
-            class="euiButtonIcon euiButtonIcon--small euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-empty-disabled-hoverStyles"
+            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-disabled-isDisabled"
             disabled=""
             type="button"
           >
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index ab79a4d4291..ccbb045a822 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -18,7 +18,7 @@ Array [
     >
       <button
         aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles-euiModal__closeIcon"
+        class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
         type="button"
       >
         <span
@@ -73,7 +73,7 @@ Array [
           </span>
         </button>
         <button
-          class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-fill-primary"
+          class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary"
           data-test-subj="confirmModalConfirmButton"
           type="button"
         >
@@ -116,7 +116,7 @@ Array [
     >
       <button
         aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles-euiModal__closeIcon"
+        class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
         type="button"
       >
         <span
@@ -155,7 +155,7 @@ Array [
           </span>
         </button>
         <button
-          class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-m-fill-primary"
+          class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary"
           data-test-subj="confirmModalConfirmButton"
           type="button"
         >
diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
index c992006b697..60d6975e09c 100644
--- a/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`EuiModal renders 1`] = `
       >
         <button
           aria-label="Closes this modal window"
-          class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles-euiModal__closeIcon"
+          class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
           type="button"
         >
           <span
diff --git a/src/components/notification/__snapshots__/notification_event.test.tsx.snap b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
index 1d9f8807840..4ef353a248b 100644
--- a/src/components/notification/__snapshots__/notification_event.test.tsx.snap
+++ b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
@@ -376,7 +376,7 @@ exports[`EuiNotificationEvent props isRead  is rendered 1`] = `
   >
     <button
       aria-label="Mark title as unread"
-      class="euiButtonIcon euiButtonIcon--xSmall euiNotificationEventReadButton euiNotificationEventReadButton--isRead emotion-euiButtonIcon-empty-primary-hoverStyles"
+      class="euiButtonIcon euiNotificationEventReadButton euiNotificationEventReadButton--isRead emotion-euiButtonIcon-xs-empty-primary"
       data-test-subj="id-notificationEventReadButton"
       title="Mark as unread"
       type="button"
diff --git a/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap b/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap
index de295d0c318..40409bdb818 100644
--- a/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap
+++ b/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiNotificationEventReadButton is rendered 1`] = `
 <button
   aria-label="Mark eventName as unread"
-  class="euiButtonIcon euiButtonIcon--xSmall euiNotificationEventReadButton euiNotificationEventReadButton--isRead emotion-euiButtonIcon-empty-primary-hoverStyles"
+  class="euiButtonIcon euiNotificationEventReadButton euiNotificationEventReadButton--isRead emotion-euiButtonIcon-xs-empty-primary"
   data-test-subj="id-notificationEventReadButton"
   title="Mark as unread"
   type="button"
@@ -20,7 +20,7 @@ exports[`EuiNotificationEventReadButton is rendered 1`] = `
 exports[`EuiNotificationEventReadButton renders isRead to false 1`] = `
 <button
   aria-label="Mark eventName as read"
-  class="euiButtonIcon euiButtonIcon--xSmall euiNotificationEventReadButton emotion-euiButtonIcon-empty-primary-hoverStyles"
+  class="euiButtonIcon euiNotificationEventReadButton emotion-euiButtonIcon-xs-empty-primary"
   data-test-subj="id-notificationEventReadButton"
   title="Mark as read"
   type="button"
diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
index 1d66f223310..859439d03ba 100644
--- a/src/components/pagination/__snapshots__/pagination.test.tsx.snap
+++ b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`EuiPagination is rendered 1`] = `
   </span>
   <button
     aria-label="Previous page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-previous"
     disabled=""
     type="button"
@@ -57,7 +57,7 @@ exports[`EuiPagination is rendered 1`] = `
   </ul>
   <button
     aria-label="Next page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-next"
     disabled=""
     type="button"
@@ -86,7 +86,7 @@ exports[`EuiPagination props activePage can be -1 1`] = `
   </span>
   <button
     aria-label="First page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
     data-test-subj="pagination-button-first"
     title="First page"
     type="button"
@@ -100,7 +100,7 @@ exports[`EuiPagination props activePage can be -1 1`] = `
   </button>
   <button
     aria-label="Previous page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
     data-test-subj="pagination-button-previous"
     title="Previous page"
     type="button"
@@ -114,7 +114,7 @@ exports[`EuiPagination props activePage can be -1 1`] = `
   </button>
   <button
     aria-label="Next page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-next"
     disabled=""
     type="button"
@@ -128,7 +128,7 @@ exports[`EuiPagination props activePage can be -1 1`] = `
   </button>
   <button
     aria-label="Last page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-last"
     disabled=""
     type="button"
@@ -157,7 +157,7 @@ exports[`EuiPagination props activePage is rendered 1`] = `
   </span>
   <button
     aria-label="Previous page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
     data-test-subj="pagination-button-previous"
     title="Previous page"
     type="button"
@@ -343,7 +343,7 @@ exports[`EuiPagination props activePage is rendered 1`] = `
   </ul>
   <button
     aria-label="Next page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
     data-test-subj="pagination-button-next"
     title="Next page"
     type="button"
@@ -372,7 +372,7 @@ exports[`EuiPagination props aria-controls is rendered 1`] = `
   </span>
   <button
     aria-label="Previous page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-previous"
     disabled=""
     type="button"
@@ -413,7 +413,7 @@ exports[`EuiPagination props aria-controls is rendered 1`] = `
   </ul>
   <button
     aria-label="Next page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-next"
     disabled=""
     type="button"
@@ -442,7 +442,7 @@ exports[`EuiPagination props compressed is rendered 1`] = `
   </span>
   <button
     aria-label="First page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-first"
     disabled=""
     type="button"
@@ -456,7 +456,7 @@ exports[`EuiPagination props compressed is rendered 1`] = `
   </button>
   <button
     aria-label="Previous page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-previous"
     disabled=""
     type="button"
@@ -481,7 +481,7 @@ exports[`EuiPagination props compressed is rendered 1`] = `
   </div>
   <button
     aria-label="Next page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-next"
     disabled=""
     type="button"
@@ -495,7 +495,7 @@ exports[`EuiPagination props compressed is rendered 1`] = `
   </button>
   <button
     aria-label="Last page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-last"
     disabled=""
     type="button"
@@ -524,7 +524,7 @@ exports[`EuiPagination props pageCount can be 0 1`] = `
   </span>
   <button
     aria-label="First page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-first"
     disabled=""
     type="button"
@@ -538,7 +538,7 @@ exports[`EuiPagination props pageCount can be 0 1`] = `
   </button>
   <button
     aria-label="Previous page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-previous"
     disabled=""
     type="button"
@@ -552,7 +552,7 @@ exports[`EuiPagination props pageCount can be 0 1`] = `
   </button>
   <button
     aria-label="Next page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
     data-test-subj="pagination-button-next"
     title="Next page"
     type="button"
@@ -566,7 +566,7 @@ exports[`EuiPagination props pageCount can be 0 1`] = `
   </button>
   <button
     aria-label="Last page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
     data-test-subj="pagination-button-last"
     title="Last page"
     type="button"
@@ -595,7 +595,7 @@ exports[`EuiPagination props pageCount is rendered 1`] = `
   </span>
   <button
     aria-label="Previous page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-previous"
     disabled=""
     type="button"
@@ -741,7 +741,7 @@ exports[`EuiPagination props pageCount is rendered 1`] = `
   </ul>
   <button
     aria-label="Next page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
     data-test-subj="pagination-button-next"
     title="Next page"
     type="button"
@@ -770,7 +770,7 @@ exports[`EuiPagination props responsive can be customized 1`] = `
   </span>
   <button
     aria-label="Previous page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-previous"
     disabled=""
     type="button"
@@ -810,7 +810,7 @@ exports[`EuiPagination props responsive can be customized 1`] = `
   </ul>
   <button
     aria-label="Next page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-next"
     disabled=""
     type="button"
@@ -839,7 +839,7 @@ exports[`EuiPagination props responsive can be false 1`] = `
   </span>
   <button
     aria-label="Previous page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-previous"
     disabled=""
     type="button"
@@ -879,7 +879,7 @@ exports[`EuiPagination props responsive can be false 1`] = `
   </ul>
   <button
     aria-label="Next page"
-    class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-disabled-hoverStyles-euiPaginationArrowButton"
+    class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiPaginationArrowButton"
     data-test-subj="pagination-button-next"
     disabled=""
     type="button"
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
index 172c566c437..1c67965f27c 100644
--- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
+++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`EuiTablePagination is rendered 1`] = `
       </span>
       <button
         aria-label="Previous page"
-        class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+        class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
         data-test-subj="pagination-button-previous"
         title="Previous page"
         type="button"
@@ -175,7 +175,7 @@ exports[`EuiTablePagination is rendered 1`] = `
       </ul>
       <button
         aria-label="Next page"
-        class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+        class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
         data-test-subj="pagination-button-next"
         title="Next page"
         type="button"
@@ -217,7 +217,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
       </span>
       <button
         aria-label="Previous page"
-        class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+        class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
         data-test-subj="pagination-button-previous"
         title="Previous page"
         type="button"
@@ -338,7 +338,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
       </ul>
       <button
         aria-label="Next page"
-        class="euiButtonIcon euiButtonIcon--xSmall euiPaginationArrowButton emotion-euiButtonIcon-empty-text-hoverStyles-euiPaginationArrowButton"
+        class="euiButtonIcon euiPaginationArrowButton emotion-euiButtonIcon-xs-empty-text-euiPaginationArrowButton"
         data-test-subj="pagination-button-next"
         title="Next page"
         type="button"
diff --git a/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap b/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap
index 38b55453b7a..133e03bb97e 100644
--- a/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap
+++ b/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`EuiGlobalToastList props side can be changed to left 1`] = `
     </div>
     <button
       aria-label="Dismiss toast"
-      class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles-euiToast__closeButton"
+      class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiToast__closeButton"
       data-test-subj="toastCloseButton"
       type="button"
     >
@@ -92,7 +92,7 @@ exports[`EuiGlobalToastList props side can be changed to left 1`] = `
     </div>
     <button
       aria-label="Dismiss toast"
-      class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles-euiToast__closeButton"
+      class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiToast__closeButton"
       data-test-subj="toastCloseButton"
       type="button"
     >
@@ -148,7 +148,7 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
     </div>
     <button
       aria-label="Dismiss toast"
-      class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles-euiToast__closeButton"
+      class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiToast__closeButton"
       data-test-subj="toastCloseButton"
       type="button"
     >
@@ -195,7 +195,7 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
     </div>
     <button
       aria-label="Dismiss toast"
-      class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles-euiToast__closeButton"
+      class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiToast__closeButton"
       data-test-subj="toastCloseButton"
       type="button"
     >
diff --git a/src/themes/amsterdam/global_styling/mixins/button.ts b/src/themes/amsterdam/global_styling/mixins/button.ts
index 4ed86e4f774..b3b63ca94e6 100644
--- a/src/themes/amsterdam/global_styling/mixins/button.ts
+++ b/src/themes/amsterdam/global_styling/mixins/button.ts
@@ -215,26 +215,6 @@ export const useEuiButtonColorCSS = (options: _EuiButtonOptions = {}) => {
   };
 };
 
-/**
- * Based on the button size, creates the style properties.
- * @returns An object of button size keys with Emption styles for `border-radius`
- */
-export const useEuiButtonRadiusCSS = () => {
-  const { euiTheme } = useEuiTheme();
-
-  return {
-    xs: css`
-      border-radius: ${euiTheme.border.radius.small};
-    `,
-    s: css`
-      border-radius: ${euiTheme.border.radius.small};
-    `,
-    m: css`
-      border-radius: ${euiTheme.border.radius.medium};
-    `,
-  };
-};
-
 /**
  * Creates the translate animation when button is in focus.
  * @returns string
@@ -262,3 +242,25 @@ export const useEuiButtonFocusCSS = () => {
     }
   `;
 };
+
+/**
+ * Map of `size` props to various sizings/scales
+ * that should remain consistent across all buttons
+ */
+export const euiButtonSizeMap = ({ euiTheme }: UseEuiTheme) => ({
+  xs: {
+    height: euiTheme.size.l,
+    radius: euiTheme.border.radius.small,
+    fontScale: 'xs' as const,
+  },
+  s: {
+    height: euiTheme.size.xl,
+    radius: euiTheme.border.radius.small,
+    fontScale: 's' as const,
+  },
+  m: {
+    height: euiTheme.size.xxl,
+    radius: euiTheme.border.radius.medium,
+    fontScale: 's' as const,
+  },
+});
diff --git a/upcoming_changelogs/6844.md b/upcoming_changelogs/6844.md
new file mode 100644
index 00000000000..e9b0516181b
--- /dev/null
+++ b/upcoming_changelogs/6844.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiButtonIcon` to Emotion