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 3f600f9ca8e6..95750e82c57b 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
@@ -2,7 +2,7 @@
 
 exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -10,25 +10,26 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-compressed"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-dbzl5z-empty-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
       data-test-subj="test subject string"
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           Option one
         </span>
@@ -36,19 +37,21 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-dbzl5z-empty-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
+      data-test-subj="button01"
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -56,20 +59,18 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1ra7a0c-empty-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-compressed-empty-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -81,7 +82,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
 
 exports[`EuiButtonGroup button props buttonSize compressed is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -89,53 +90,59 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-compressed"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-dbzl5z-empty-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
       data-test-subj="test subject string"
+      title="Option one"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button00"
             name="test"
             type="radio"
+            value=""
           />
           Option one
         </span>
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-dbzl5z-empty-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
+      title="Option two"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button01"
             name="test"
             type="radio"
+            value=""
           />
           Option two
         </span>
@@ -143,20 +150,18 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1ra7a0c-empty-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-compressed-empty-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -168,7 +173,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
 
 exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -176,25 +181,26 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-m"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-m-euiButtonGroupButton-m-uncompressed-base-text"
       data-test-subj="test subject string"
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           Option one
         </span>
@@ -202,19 +208,21 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-m-euiButtonGroupButton-m-uncompressed-base-text"
+      data-test-subj="button01"
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -222,20 +230,18 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-euiButtonGroupButton-m-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -247,7 +253,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -255,53 +261,59 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-m"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-m-euiButtonGroupButton-m-uncompressed-base-text"
       data-test-subj="test subject string"
+      title="Option one"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button00"
             name="test"
             type="radio"
+            value=""
           />
           Option one
         </span>
       </span>
     </label>
     <label
-      class="euiButtonGroupButton  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-m-euiButtonGroupButton-m-uncompressed-base-text"
+      title="Option two"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button01"
             name="test"
             type="radio"
+            value=""
           />
           Option two
         </span>
@@ -309,20 +321,18 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-euiButtonGroupButton-m-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -334,7 +344,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -342,25 +352,26 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           Option one
         </span>
@@ -368,19 +379,21 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      data-test-subj="button01"
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -388,20 +401,18 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -413,7 +424,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -421,53 +432,59 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      title="Option one"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button00"
             name="test"
             type="radio"
+            value=""
           />
           Option one
         </span>
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      title="Option two"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button01"
             name="test"
             type="radio"
+            value=""
           />
           Option two
         </span>
@@ -475,20 +492,18 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -500,7 +515,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--accent"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -508,25 +523,26 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-11dmnaa-base-accent-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-accent"
       data-test-subj="test subject string"
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           Option one
         </span>
@@ -534,19 +550,21 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-11dmnaa-base-accent-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-accent"
+      data-test-subj="button01"
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -554,20 +572,18 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -579,7 +595,7 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color accent is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--accent"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -587,53 +603,59 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-11dmnaa-base-accent-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-accent"
       data-test-subj="test subject string"
+      title="Option one"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button00"
             name="test"
             type="radio"
+            value=""
           />
           Option one
         </span>
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-11dmnaa-base-accent-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-accent"
+      title="Option two"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button01"
             name="test"
             type="radio"
+            value=""
           />
           Option two
         </span>
@@ -641,20 +663,18 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -666,7 +686,7 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -674,25 +694,26 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1old2bv-base-danger-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-danger"
       data-test-subj="test subject string"
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           Option one
         </span>
@@ -700,19 +721,21 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1old2bv-base-danger-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-danger"
+      data-test-subj="button01"
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -720,20 +743,18 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -745,7 +766,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -753,53 +774,59 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1old2bv-base-danger-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-danger"
       data-test-subj="test subject string"
+      title="Option one"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button00"
             name="test"
             type="radio"
+            value=""
           />
           Option one
         </span>
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1old2bv-base-danger-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-danger"
+      title="Option two"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button01"
             name="test"
             type="radio"
+            value=""
           />
           Option two
         </span>
@@ -807,20 +834,18 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -832,7 +857,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -840,25 +865,26 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-c1t84v-base-primary-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-primary"
       data-test-subj="test subject string"
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           Option one
         </span>
@@ -866,19 +892,21 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-c1t84v-base-primary-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-primary"
+      data-test-subj="button01"
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -886,20 +914,18 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -911,7 +937,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color primary is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -919,53 +945,59 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-c1t84v-base-primary-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-primary"
       data-test-subj="test subject string"
+      title="Option one"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button00"
             name="test"
             type="radio"
+            value=""
           />
           Option one
         </span>
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-c1t84v-base-primary-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-primary"
+      title="Option two"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button01"
             name="test"
             type="radio"
+            value=""
           />
           Option two
         </span>
@@ -973,20 +1005,18 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -998,7 +1028,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
 
 exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--success"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1006,25 +1036,26 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-vufpcj-base-success-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-success"
       data-test-subj="test subject string"
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           Option one
         </span>
@@ -1032,19 +1063,21 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-vufpcj-base-success-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-success"
+      data-test-subj="button01"
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -1052,20 +1085,18 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -1077,7 +1108,7 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color success is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--success"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1085,53 +1116,59 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] =
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-vufpcj-base-success-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-success"
       data-test-subj="test subject string"
+      title="Option one"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button00"
             name="test"
             type="radio"
+            value=""
           />
           Option one
         </span>
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-vufpcj-base-success-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-success"
+      title="Option two"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button01"
             name="test"
             type="radio"
+            value=""
           />
           Option two
         </span>
@@ -1139,20 +1176,18 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] =
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -1164,7 +1199,7 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] =
 
 exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1172,25 +1207,26 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           Option one
         </span>
@@ -1198,19 +1234,21 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      data-test-subj="button01"
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -1218,20 +1256,18 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -1243,7 +1279,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1251,53 +1287,59 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      title="Option one"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button00"
             name="test"
             type="radio"
+            value=""
           />
           Option one
         </span>
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      title="Option two"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button01"
             name="test"
             type="radio"
+            value=""
           />
           Option two
         </span>
@@ -1305,20 +1347,18 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -1330,7 +1370,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1338,25 +1378,26 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-fhqo9b-base-warning-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-warning"
       data-test-subj="test subject string"
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           Option one
         </span>
@@ -1364,19 +1405,21 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-fhqo9b-base-warning-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-warning"
+      data-test-subj="button01"
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -1384,20 +1427,18 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -1409,7 +1450,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color warning is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1417,53 +1458,59 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-fhqo9b-base-warning-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-warning"
       data-test-subj="test subject string"
+      title="Option one"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button00"
             name="test"
             type="radio"
+            value=""
           />
           Option one
         </span>
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-fhqo9b-base-warning-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-warning"
+      title="Option two"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button01"
             name="test"
             type="radio"
+            value=""
           />
           Option two
         </span>
@@ -1471,20 +1518,18 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -1496,7 +1541,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
 
 exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled"
+  class="euiButtonGroup euiButtonGroup-isDisabled emotion-euiButtonGroup"
   disabled=""
 >
   <legend
@@ -1505,26 +1550,27 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="test subject string"
       disabled=""
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           Option one
         </span>
@@ -1532,20 +1578,22 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button01"
       disabled=""
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -1553,20 +1601,18 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -1578,7 +1624,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled"
+  class="euiButtonGroup euiButtonGroup-isDisabled emotion-euiButtonGroup"
   disabled=""
 >
   <legend
@@ -1587,26 +1633,27 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="test subject string"
       disabled=""
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           Option one
         </span>
@@ -1614,20 +1661,22 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button01"
       disabled=""
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -1635,20 +1684,18 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -1660,7 +1707,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth"
+  class="euiButtonGroup emotion-euiButtonGroup-fullWidth"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1668,25 +1715,26 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-fullWidth-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           Option one
         </span>
@@ -1694,19 +1742,21 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      data-test-subj="button01"
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -1714,20 +1764,18 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -1739,7 +1787,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth"
+  class="euiButtonGroup emotion-euiButtonGroup-fullWidth"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1747,53 +1795,59 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-fullWidth-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      title="Option one"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button00"
             name="test"
             type="radio"
+            value=""
           />
           Option one
         </span>
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      title="Option two"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button01"
             name="test"
             type="radio"
+            value=""
           />
           Option two
         </span>
@@ -1801,20 +1855,18 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -1826,7 +1878,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1834,25 +1886,26 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isIconOnly testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
+          data-text="Option one"
         >
           Option one
         </span>
@@ -1860,19 +1913,21 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isIconOnly css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
+      data-test-subj="button01"
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -1880,20 +1935,18 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isIconOnly css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -1905,7 +1958,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1913,53 +1966,59 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isIconOnly testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      title="Option one"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
+          data-text="Option one"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button00"
             name="test"
             type="radio"
+            value=""
           />
           Option one
         </span>
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isIconOnly css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
+      title="Option two"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
+          data-text="Option two"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button01"
             name="test"
             type="radio"
+            value=""
           />
           Option two
         </span>
@@ -1967,20 +2026,18 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isIconOnly css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -1990,9 +2047,9 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
 </fieldset>
 `;
 
-exports[`EuiButtonGroup button props selection idSelected is rendered for single 1`] = `
+exports[`EuiButtonGroup type="multi" idToSelectedMap 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -2000,75 +2057,67 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
-    <label
+    <button
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isSelected testClass1 testClass2 css-qmwmig-fill-text-EuiButtonGroupButton"
+      aria-pressed="true"
+      class="euiButtonGroupButton euiButtonGroupButton-isSelected testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-fill-text"
       data-test-subj="test subject string"
+      title="Option one"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
-          <input
-            checked=""
-            class="euiScreenReaderOnly"
-            data-test-subj="button00"
-            name="test"
-            type="radio"
-          />
           Option one
         </span>
       </span>
-    </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+    </button>
+    <button
+      aria-pressed="true"
+      class="euiButtonGroupButton euiButtonGroupButton-isSelected emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-fill-text"
+      data-test-subj="button01"
+      title="Option two"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
-          <input
-            class="euiScreenReaderOnly"
-            data-test-subj="button01"
-            name="test"
-            type="radio"
-          />
           Option two
         </span>
       </span>
-    </label>
+    </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -2078,9 +2127,11 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
 </fieldset>
 `;
 
-exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for multi 1`] = `
+exports[`EuiButtonGroup type="multi" renders 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  aria-label="aria-label"
+  class="euiButtonGroup testClass1 testClass2 emotion-euiButtonGroup"
+  data-test-subj="test subject string"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -2088,45 +2139,48 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
-      aria-pressed="true"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isSelected testClass1 testClass2 css-qmwmig-fill-text-EuiButtonGroupButton"
+      aria-pressed="false"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           Option one
         </span>
       </span>
     </button>
     <button
-      aria-pressed="true"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isSelected css-qmwmig-fill-text-EuiButtonGroupButton"
+      aria-pressed="false"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      data-test-subj="button01"
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           Option two
         </span>
@@ -2134,20 +2188,18 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -2157,11 +2209,9 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
 </fieldset>
 `;
 
-exports[`EuiButtonGroup type multi is rendered 1`] = `
+exports[`EuiButtonGroup type="single" idSelected 1`] = `
 <fieldset
-  aria-label="aria-label"
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
-  data-test-subj="test subject string"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -2169,66 +2219,79 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
-    <button
+    <label
       aria-label="aria-label"
-      aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isSelected testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-fill-text"
       data-test-subj="test subject string"
+      title="Option one"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
+          <input
+            checked=""
+            class="euiScreenReaderOnly"
+            data-test-subj="button00"
+            name="test"
+            type="radio"
+            value=""
+          />
           Option one
         </span>
       </span>
-    </button>
-    <button
-      aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+    </label>
+    <label
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      title="Option two"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
+          <input
+            class="euiScreenReaderOnly"
+            data-test-subj="button01"
+            name="test"
+            type="radio"
+            value=""
+          />
           Option two
         </span>
       </span>
-    </button>
+    </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
@@ -2238,10 +2301,10 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
 </fieldset>
 `;
 
-exports[`EuiButtonGroup type single is rendered 1`] = `
+exports[`EuiButtonGroup type="single" renders 1`] = `
 <fieldset
   aria-label="aria-label"
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
+  class="euiButtonGroup testClass1 testClass2 emotion-euiButtonGroup"
   data-test-subj="test subject string"
 >
   <legend
@@ -2250,53 +2313,59 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      title="Option one"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option one"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button00"
             name="test"
             type="radio"
+            value=""
           />
           Option one
         </span>
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      title="Option two"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option two"
         >
           <input
             class="euiScreenReaderOnly"
             data-test-subj="button01"
             name="test"
             type="radio"
+            value=""
           />
           Option two
         </span>
@@ -2304,20 +2373,18 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
+      data-test-subj="button02"
       disabled=""
+      title="Option three"
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="bolt"
-        />
-        <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
+          data-text="Option three"
         >
           Option three
         </span>
diff --git a/src/components/button/button_group/button_group.test.tsx b/src/components/button/button_group/button_group.test.tsx
index be35cd81acea..e296d122cc10 100644
--- a/src/components/button/button_group/button_group.test.tsx
+++ b/src/components/button/button_group/button_group.test.tsx
@@ -7,8 +7,10 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
+import { css } from '@emotion/react';
+import { render } from '../../../test/rtl';
 import { requiredProps as commonProps } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import {
   EuiButtonGroup,
@@ -38,7 +40,6 @@ const options: EuiButtonGroupOptionProps[] = [
   {
     id: 'button02',
     label: 'Option three',
-    iconType: 'bolt',
     isDisabled: true,
     type: 'submit',
   },
@@ -61,20 +62,46 @@ const requiredMultiProps: EuiButtonGroupProps = {
 };
 
 describe('EuiButtonGroup', () => {
-  describe('type', () => {
-    test('single is rendered', () => {
-      const component = render(
+  describe('type="single"', () => {
+    shouldRenderCustomStyles(<EuiButtonGroup {...requiredSingleProps} />);
+
+    it('renders', () => {
+      const { container } = render(
         <EuiButtonGroup {...requiredSingleProps} {...commonProps} />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
+    });
+
+    test('idSelected', () => {
+      const { container } = render(
+        <EuiButtonGroup {...requiredSingleProps} idSelected={options[0].id} />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
     });
-    test('multi is rendered', () => {
-      const component = render(
+  });
+
+  describe('type="multi"', () => {
+    shouldRenderCustomStyles(<EuiButtonGroup {...requiredMultiProps} />);
+
+    it('renders', () => {
+      const { container } = render(
         <EuiButtonGroup {...requiredMultiProps} {...commonProps} />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
+    });
+
+    test('idToSelectedMap', () => {
+      const { container } = render(
+        <EuiButtonGroup
+          {...requiredMultiProps}
+          idToSelectedMap={{ [options[0].id]: true, [options[1].id]: true }}
+        />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
     });
   });
 
@@ -82,111 +109,112 @@ describe('EuiButtonGroup', () => {
     describe('buttonSize', () => {
       SIZES.forEach((size) => {
         test(`${size} is rendered for single`, () => {
-          const component = render(
+          const { container } = render(
             <EuiButtonGroup {...requiredSingleProps} buttonSize={size} />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
         test(`${size} is rendered for multi`, () => {
-          const component = render(
+          const { container } = render(
             <EuiButtonGroup {...requiredMultiProps} buttonSize={size} />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
       });
     });
 
     describe('isDisabled', () => {
       it('is rendered for single', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonGroup {...requiredSingleProps} isDisabled />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
       it('is rendered for multi', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonGroup {...requiredMultiProps} isDisabled />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
 
     describe('isFullWidth', () => {
       it('is rendered for single', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonGroup {...requiredSingleProps} isFullWidth />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
       it('is rendered for multi', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonGroup {...requiredMultiProps} isFullWidth />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
 
     describe('isIconOnly', () => {
       it('is rendered for single', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonGroup {...requiredSingleProps} isIconOnly />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
       it('is rendered for multi', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonGroup {...requiredMultiProps} isIconOnly />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
 
     describe('color', () => {
       BUTTON_COLORS.forEach((color) => {
         test(`${color} is rendered for single`, () => {
-          const component = render(
+          const { container } = render(
             <EuiButtonGroup {...requiredSingleProps} color={color} />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
         test(`${color} is rendered for multi`, () => {
-          const component = render(
+          const { container } = render(
             <EuiButtonGroup {...requiredMultiProps} color={color} />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
       });
     });
+  });
 
-    describe('selection', () => {
-      it('idSelected is rendered for single', () => {
-        const component = render(
-          <EuiButtonGroup {...requiredSingleProps} idSelected={options[0].id} />
-        );
-
-        expect(component).toMatchSnapshot();
-      });
-
-      it('idToSelectedMap is rendered for multi', () => {
-        const component = render(
-          <EuiButtonGroup
-            {...requiredMultiProps}
-            idToSelectedMap={{ [options[0].id]: true, [options[1].id]: true }}
-          />
-        );
-
-        expect(component).toMatchSnapshot();
-      });
-    });
+  it('correctly merges css props passed to `options`', () => {
+    const { getByTestSubject } = render(
+      <EuiButtonGroup
+        {...requiredMultiProps}
+        options={[
+          ...options,
+          {
+            id: 'buttonWithCss',
+            label: 'Option 4',
+            css: css`
+              text-transform: uppercase;
+            `,
+          },
+        ]}
+      />
+    );
+
+    expect(getByTestSubject('buttonWithCss')).toHaveStyle(
+      'text-transform: uppercase'
+    );
   });
 });
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 968c7774ec4f..c3b33ace12db 100644
--- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -143,7 +143,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                 class="euiFlexItem emotion-euiFlexItem-grow-1"
               >
                 <fieldset
-                  class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text euiButtonGroup--fullWidth euiDataGridColumnSorting__order"
+                  class="euiButtonGroup euiDataGridColumnSorting__order emotion-euiButtonGroup-fullWidth"
                 >
                   <legend
                     class="emotion-euiScreenReaderOnly"
@@ -151,26 +151,25 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                     Select sorting method for Column A
                   </legend>
                   <div
-                    class="euiButtonGroup__buttons"
+                    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-fullWidth-compressed"
                   >
                     <label
-                      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isSelected css-qmwmig-fill-text-EuiButtonGroupButton"
+                      class="euiButtonGroupButton euiButtonGroupButton-isSelected emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-fill-text"
                       data-test-subj="euiDataGridColumnSorting-sortColumn-columnA-asc"
-                      for="generated-id"
                       title="Low-High"
+                      type="button"
                     >
                       <span
-                        class="euiButtonContent euiButton__content"
+                        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
                       >
                         <span
-                          class="euiButton__text euiButtonGroupButton__textShift"
+                          class="eui-textTruncate emotion-euiButtonGroupButton__text"
                           data-text="Low-High"
                         >
                           <input
                             checked=""
                             class="euiScreenReaderOnly"
                             data-test-subj="columnAAsc"
-                            id="generated-id"
                             name="columnA"
                             type="radio"
                             value="asc"
@@ -180,22 +179,21 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                       </span>
                     </label>
                     <label
-                      class="euiButtonGroupButton euiButtonGroupButton--small  css-dbzl5z-empty-text-EuiButtonGroupButton"
+                      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
                       data-test-subj="euiDataGridColumnSorting-sortColumn-columnA-desc"
-                      for="generated-id"
                       title="High-Low"
+                      type="button"
                     >
                       <span
-                        class="euiButtonContent euiButton__content"
+                        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
                       >
                         <span
-                          class="euiButton__text euiButtonGroupButton__textShift"
+                          class="eui-textTruncate emotion-euiButtonGroupButton__text"
                           data-text="High-Low"
                         >
                           <input
                             class="euiScreenReaderOnly"
                             data-test-subj="columnADesc"
-                            id="generated-id"
                             name="columnA"
                             type="radio"
                             value="desc"