From 0a9cb7a7899cf328bc001100028d36e68f77a386 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Wed, 15 Jul 2020 13:22:18 -0400
Subject: [PATCH] Chore/decouple button content (#3730)

* [New] EuiButtonContent

For rendering the contents of buttons, icon (loading spinner) and text wrapper for children

* Use EuiButtonContent in EuiButtonEmpty

* Fixing classNames and disabled states

* Create EuiButtonDisplay for internal usage

* Fix snaps

* ts gymnastics

* Added tests for EuiButtonContent

* More optimization

- Extend EuiButtonContentProps
- Content styles are in button_content.scss

* Restricted list of `element`s
---
 CHANGELOG.md                                  |   1 +
 .../__snapshots__/skip_link.test.tsx.snap     |  12 +-
 .../in_memory_table.test.tsx.snap             |  95 ++++--
 .../button/__snapshots__/button.test.tsx.snap | 109 +++++--
 .../button_content.test.tsx.snap              |  79 +++++
 src/components/button/_button.scss            |  19 +-
 src/components/button/_button_content.scss    |   7 +
 src/components/button/_index.scss             |   1 +
 src/components/button/button.test.tsx         |  25 +-
 src/components/button/button.tsx              | 222 +++++++------
 src/components/button/button_content.test.tsx |  72 +++++
 src/components/button/button_content.tsx      |  88 ++++++
 .../__snapshots__/button_empty.test.tsx.snap  | 122 ++++++--
 .../button/button_empty/_button_empty.scss    |  18 +-
 .../button/button_empty/button_empty.test.tsx |  39 ++-
 .../button/button_empty/button_empty.tsx      |  96 +++---
 src/components/button/button_empty/index.ts   |   1 -
 .../__snapshots__/button_group.test.tsx.snap  | 116 +++----
 .../button/button_group/button_group.tsx      |   5 +-
 .../__snapshots__/button_toggle.test.tsx.snap |   2 +-
 src/components/button/index.ts                |   1 -
 .../card/__snapshots__/card.test.tsx.snap     |   2 +-
 .../__snapshots__/card_select.test.tsx.snap   |  15 +-
 .../collapsible_nav.test.tsx.snap             |  40 +--
 .../__snapshots__/control_bar.test.tsx.snap   | 294 +++++++++++++-----
 .../__snapshots__/data_grid.test.tsx.snap     |  73 ++---
 .../__snapshots__/filter_button.test.tsx.snap |  43 ++-
 .../__snapshots__/header_link.test.tsx.snap   |   4 +-
 .../__snapshots__/confirm_modal.test.tsx.snap |   8 +-
 .../__snapshots__/pagination.test.tsx.snap    |   2 +-
 .../pagination_button.test.tsx.snap           |   2 +-
 .../table_sort_mobile.test.tsx.snap           |   7 +-
 .../table_pagination.test.tsx.snap            |  31 +-
 src/global_styling/mixins/_button.scss        |  17 +-
 34 files changed, 1115 insertions(+), 553 deletions(-)
 create mode 100644 src/components/button/__snapshots__/button_content.test.tsx.snap
 create mode 100644 src/components/button/_button_content.scss
 create mode 100644 src/components/button/button_content.test.tsx
 create mode 100644 src/components/button/button_content.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 28e9b4178af..c326eee1f35 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ No public interface changes since `27.1.0`.
 - Added `index.d.ts` file to `lib/test`  and `es/test` ([#3715](https://github.com/elastic/eui/pull/3715))
 - Added `descriptionFlexItemProps` and `fieldFlexItemProps` props to `EuiDescribedFormGroup` ([#3717](https://github.com/elastic/eui/pull/3717))
 - Expanded `EuiBasicTable`'s default action's name configuration to accept a function that returns a React node ([#3739](https://github.com/elastic/eui/pull/3739))
+- Added internal use only button building blocks for reusability in other button components ([#3730](https://github.com/elastic/eui/pull/3730))
 
 ## [`27.0.0`](https://github.com/elastic/eui/tree/v27.0.0)
 - Added `paddingSize` prop to `EuiCard` ([#3638](https://github.com/elastic/eui/pull/3638))
diff --git a/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap b/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap
index 8d73fa7dd02..5a12b3e9c5c 100644
--- a/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap
+++ b/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`EuiSkipLink is rendered 1`] = `
   rel="noreferrer"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -27,7 +27,7 @@ exports[`EuiSkipLink props onClick is rendered 1`] = `
   rel="noreferrer"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -43,7 +43,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = `
   rel="noreferrer"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -60,7 +60,7 @@ exports[`EuiSkipLink props position fixed is rendered 1`] = `
   tabindex="0"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -76,7 +76,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = `
   rel="noreferrer"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -93,7 +93,7 @@ exports[`EuiSkipLink props tabIndex is rendered 1`] = `
   tabindex="-1"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index a43deaf32db..a182dd61cc6 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -383,40 +383,49 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                               size="xs"
                             >
                               <button
-                                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--iconRight"
+                                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
                                 data-test-subj="tablePaginationPopoverButton"
                                 onClick={[Function]}
                                 type="button"
                               >
-                                <span
+                                <EuiButtonContent
                                   className="euiButtonEmpty__content"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButtonEmpty__text",
+                                    }
+                                  }
                                 >
-                                  <EuiIcon
-                                    aria-hidden="true"
-                                    className="euiButtonEmpty__icon"
-                                    size="m"
-                                    type="arrowDown"
-                                  >
-                                    <div
-                                      aria-hidden="true"
-                                      className="euiButtonEmpty__icon"
-                                      data-euiicon-type="arrowDown"
-                                      size="m"
-                                    />
-                                  </EuiIcon>
                                   <span
-                                    className="euiButtonEmpty__text"
+                                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                   >
-                                    <EuiI18n
-                                      default="Rows per page"
-                                      token="euiTablePagination.rowsPerPage"
+                                    <EuiIcon
+                                      className="euiButtonContent__icon"
+                                      size="m"
+                                      type="arrowDown"
                                     >
-                                      Rows per page
-                                    </EuiI18n>
-                                    : 
-                                    2
+                                      <div
+                                        className="euiButtonContent__icon"
+                                        data-euiicon-type="arrowDown"
+                                        size="m"
+                                      />
+                                    </EuiIcon>
+                                    <span
+                                      className="euiButtonEmpty__text"
+                                    >
+                                      <EuiI18n
+                                        default="Rows per page"
+                                        token="euiTablePagination.rowsPerPage"
+                                      >
+                                        Rows per page
+                                      </EuiI18n>
+                                      : 
+                                      2
+                                    </span>
                                   </span>
-                                </span>
+                                </EuiButtonContent>
                               </button>
                             </EuiButtonEmpty>
                           </div>
@@ -545,15 +554,25 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                         onClick={[Function]}
                                         rel="noreferrer"
                                       >
-                                        <span
+                                        <EuiButtonContent
                                           className="euiButtonEmpty__content"
+                                          iconSide="left"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text",
+                                            }
+                                          }
                                         >
                                           <span
-                                            className="euiButtonEmpty__text"
+                                            className="euiButtonContent euiButtonEmpty__content"
                                           >
-                                            1
+                                            <span
+                                              className="euiButtonEmpty__text"
+                                            >
+                                              1
+                                            </span>
                                           </span>
-                                        </span>
+                                        </EuiButtonContent>
                                       </a>
                                     </EuiButtonEmpty>
                                   </EuiI18n>
@@ -611,21 +630,31 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                         aria-controls="generated-id"
                                         aria-current={true}
                                         aria-label="Page 2 of 2"
-                                        className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                        className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                                         data-test-subj="pagination-button-1"
                                         disabled={true}
                                         onClick={[Function]}
                                         type="button"
                                       >
-                                        <span
+                                        <EuiButtonContent
                                           className="euiButtonEmpty__content"
+                                          iconSide="left"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text",
+                                            }
+                                          }
                                         >
                                           <span
-                                            className="euiButtonEmpty__text"
+                                            className="euiButtonContent euiButtonEmpty__content"
                                           >
-                                            2
+                                            <span
+                                              className="euiButtonEmpty__text"
+                                            >
+                                              2
+                                            </span>
                                           </span>
-                                        </span>
+                                        </EuiButtonContent>
                                       </button>
                                     </EuiButtonEmpty>
                                   </EuiI18n>
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index 4df2e87c8ca..8e699c46818 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`EuiButton is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -25,7 +25,7 @@ exports[`EuiButton props color danger is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -40,7 +40,7 @@ exports[`EuiButton props color ghost is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -55,7 +55,7 @@ exports[`EuiButton props color primary is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -70,7 +70,7 @@ exports[`EuiButton props color secondary is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -85,7 +85,7 @@ exports[`EuiButton props color text is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -100,7 +100,7 @@ exports[`EuiButton props color warning is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -109,13 +109,32 @@ exports[`EuiButton props color warning is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiButton props contentProps is rendered 1`] = `
+<button
+  class="euiButton euiButton--primary"
+  type="button"
+>
+  <span
+    aria-label="aria-label"
+    class="euiButtonContent euiButton__content testClass1 testClass2"
+    data-test-subj="test subject string"
+  >
+    <span
+      class="euiButton__text"
+    >
+      Content
+    </span>
+  </span>
+</button>
+`;
+
 exports[`EuiButton props fill is rendered 1`] = `
 <button
   class="euiButton euiButton--primary euiButton--fill"
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -130,7 +149,7 @@ exports[`EuiButton props fullWidth is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -147,7 +166,7 @@ exports[`EuiButton props href secures the rel attribute when the target is _blan
   target="_blank"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -162,11 +181,10 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <div
-      aria-hidden="true"
-      class="euiButton__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
@@ -180,15 +198,14 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
 
 exports[`EuiButton props iconSide right is rendered 1`] = `
 <button
-  class="euiButton euiButton--primary euiButton--iconRight"
+  class="euiButton euiButton--primary"
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButtonContent--iconRight euiButton__content"
   >
     <div
-      aria-hidden="true"
-      class="euiButton__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
@@ -206,11 +223,10 @@ exports[`EuiButton props iconType is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <div
-      aria-hidden="true"
-      class="euiButton__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
@@ -222,12 +238,12 @@ exports[`EuiButton props iconType is rendered 1`] = `
 
 exports[`EuiButton props isDisabled is rendered 1`] = `
 <button
-  class="euiButton euiButton--primary"
+  class="euiButton euiButton--primary euiButton-isDisabled"
   disabled=""
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -238,12 +254,28 @@ exports[`EuiButton props isDisabled is rendered 1`] = `
 
 exports[`EuiButton props isDisabled renders a button even when href is defined 1`] = `
 <button
-  class="euiButton euiButton--primary"
+  class="euiButton euiButton--primary euiButton-isDisabled"
+  disabled=""
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButton__content"
+  >
+    <span
+      class="euiButton__text"
+    />
+  </span>
+</button>
+`;
+
+exports[`EuiButton props isDisabled renders if passed as disabled 1`] = `
+<button
+  class="euiButton euiButton--primary euiButton-isDisabled"
   disabled=""
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -254,15 +286,15 @@ exports[`EuiButton props isDisabled renders a button even when href is defined 1
 
 exports[`EuiButton props isLoading is rendered 1`] = `
 <button
-  class="euiButton euiButton--primary"
+  class="euiButton euiButton--primary euiButton-isDisabled"
   disabled=""
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
-      class="euiLoadingSpinner euiLoadingSpinner--medium euiButton__spinner"
+      class="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
     />
     <span
       class="euiButton__text"
@@ -277,7 +309,7 @@ exports[`EuiButton props size m is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -292,7 +324,7 @@ exports[`EuiButton props size s is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -300,3 +332,22 @@ exports[`EuiButton props size s is rendered 1`] = `
   </span>
 </button>
 `;
+
+exports[`EuiButton props textProps is rendered 1`] = `
+<button
+  class="euiButton euiButton--primary"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButton__content"
+  >
+    <span
+      aria-label="aria-label"
+      class="euiButton__text testClass1 testClass2"
+      data-test-subj="test subject string"
+    >
+      Content
+    </span>
+  </span>
+</button>
+`;
diff --git a/src/components/button/__snapshots__/button_content.test.tsx.snap b/src/components/button/__snapshots__/button_content.test.tsx.snap
new file mode 100644
index 00000000000..0625a6a37f6
--- /dev/null
+++ b/src/components/button/__snapshots__/button_content.test.tsx.snap
@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiButtonContent is rendered 1`] = `
+<span
+  aria-label="aria-label"
+  class="euiButtonContent testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <span />
+</span>
+`;
+
+exports[`EuiButtonContent props children is rendered 1`] = `
+<span
+  class="euiButtonContent"
+>
+  <span>
+    Content
+  </span>
+</span>
+`;
+
+exports[`EuiButtonContent props iconSide is rendered 1`] = `
+<span
+  class="euiButtonContent euiButtonContent--iconRight"
+>
+  <div
+    class="euiButtonContent__icon"
+    data-euiicon-type="bolt"
+  />
+  <span />
+</span>
+`;
+
+exports[`EuiButtonContent props iconType is rendered 1`] = `
+<span
+  class="euiButtonContent"
+>
+  <div
+    class="euiButtonContent__icon"
+    data-euiicon-type="bolt"
+  />
+  <span />
+</span>
+`;
+
+exports[`EuiButtonContent props isLoading is rendered 1`] = `
+<span
+  class="euiButtonContent"
+>
+  <span
+    class="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
+  />
+  <span />
+</span>
+`;
+
+exports[`EuiButtonContent props isLoading replaces iconType with spinner 1`] = `
+<span
+  class="euiButtonContent"
+>
+  <span
+    class="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
+  />
+  <span />
+</span>
+`;
+
+exports[`EuiButtonContent props textProps is rendered 1`] = `
+<span
+  class="euiButtonContent"
+>
+  <span
+    aria-label="aria-label"
+    class="testClass1 testClass2"
+    data-test-subj="test subject string"
+  />
+</span>
+`;
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 2551d35f3f5..d77c41f9db6 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -10,8 +10,6 @@
   min-width: $euiButtonMinWidth;
 
   .euiButton__content {
-    @include euiButtonContent;
-
     padding: 0 ($euiSize - $euiSizeXS);
   }
 
@@ -25,12 +23,6 @@
     line-height: $euiButtonHeightSmall; // prevents descenders from getting cut off
   }
 
-  &.euiButton--iconRight {
-    .euiButton__content {
-      @include euiButtonContent($isReverse: true);
-    }
-  }
-
   &:hover,
   &:active {
     @include euiSlightShadowHover;
@@ -44,19 +36,12 @@
   }
 
   &:disabled {
+    @include euiButtonContentDisabled;
+
     color: $euiButtonColorDisabledText;
     border-color: $euiButtonColorDisabled;
     pointer-events: none;
 
-    .euiButton__content {
-      pointer-events: auto;
-      cursor: not-allowed;
-    }
-
-    .euiButton__spinner {
-      border-color: euiLoadingSpinnerBorderColors(currentColor);
-    }
-
     &.euiButton--fill {
       // Only increase the contrast of background color to text to 2.0 for disabled
       color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2);
diff --git a/src/components/button/_button_content.scss b/src/components/button/_button_content.scss
new file mode 100644
index 00000000000..e1933a0cbf7
--- /dev/null
+++ b/src/components/button/_button_content.scss
@@ -0,0 +1,7 @@
+.euiButtonContent {
+  @include euiButtonContent;
+}
+
+.euiButtonContent--iconRight {
+  @include euiButtonContent($isReverse: true);
+}
diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss
index 2815f912feb..61a1784e7f4 100644
--- a/src/components/button/_index.scss
+++ b/src/components/button/_index.scss
@@ -1,4 +1,5 @@
 @import 'button';
+@import 'button_content';
 @import 'button_empty/index';
 @import 'button_icon/index';
 @import 'button_toggle/index';
diff --git a/src/components/button/button.test.tsx b/src/components/button/button.test.tsx
index 69f0ba0af97..bcc7c3cd655 100644
--- a/src/components/button/button.test.tsx
+++ b/src/components/button/button.test.tsx
@@ -21,7 +21,8 @@ import React from 'react';
 import { render, mount } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
-import { EuiButton, COLORS, SIZES, ICON_SIDES } from './button';
+import { EuiButton, COLORS, SIZES } from './button';
+import { ICON_SIDES } from './button_content';
 
 describe('EuiButton', () => {
   test('is rendered', () => {
@@ -51,6 +52,12 @@ describe('EuiButton', () => {
 
         expect(component).toMatchSnapshot();
       });
+
+      it('renders if passed as disabled', () => {
+        const component = render(<EuiButton disabled />);
+
+        expect(component).toMatchSnapshot();
+      });
     });
 
     describe('isLoading', () => {
@@ -134,5 +141,21 @@ describe('EuiButton', () => {
         expect(handler.mock.calls.length).toEqual(1);
       });
     });
+
+    test('contentProps is rendered', () => {
+      const component = render(
+        <EuiButton contentProps={requiredProps}>Content</EuiButton>
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('textProps is rendered', () => {
+      const component = render(
+        <EuiButton textProps={requiredProps}>Content</EuiButton>
+      );
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 7d01b5f9e44..c230b0d2214 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -17,12 +17,7 @@
  * under the License.
  */
 
-import React, {
-  FunctionComponent,
-  HTMLAttributes,
-  Ref,
-  ButtonHTMLAttributes,
-} from 'react';
+import React, { FunctionComponent, Ref, ButtonHTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 import {
@@ -32,13 +27,14 @@ import {
   PropsForButton,
   keysOf,
 } from '../common';
-import { EuiLoadingSpinner } from '../loading';
 
 import { getSecureRelForTarget } from '../../services';
 
-import { IconType, EuiIcon } from '../icon';
-
-export type ButtonIconSide = 'left' | 'right';
+import {
+  EuiButtonContentProps,
+  EuiButtonContentType,
+  EuiButtonContent,
+} from './button_content';
 
 export type ButtonColor =
   | 'primary'
@@ -72,35 +68,121 @@ const sizeToClassNameMap: { [size in ButtonSize]: string | null } = {
 
 export const SIZES = keysOf(sizeToClassNameMap);
 
-const iconSideToClassNameMap: { [side in ButtonIconSide]: string | null } = {
-  left: null,
-  right: 'euiButton--iconRight',
-};
-
-export const ICON_SIDES = keysOf(iconSideToClassNameMap);
-
-export interface EuiButtonProps extends CommonProps {
-  iconType?: IconType;
-  iconSide?: ButtonIconSide;
+/**
+ * Extends EuiButtonContentProps which provides
+ * `iconType`, `iconSide`, and `textProps`
+ */
+export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
+  /**
+   * Make button a solid color for prominence
+   */
   fill?: boolean;
   /**
-   * `text` color is set for deprecation
+   * Any of our named colors. `text` color is set for deprecation
    */
   color?: ButtonColor;
+  /**
+   * Use size `s` in confined spaces
+   */
   size?: ButtonSize;
-  isLoading?: boolean;
+  /**
+   * `disabled` is also allowed
+   */
   isDisabled?: boolean;
+  /**
+   * Extends the button to 100% width
+   */
   fullWidth?: boolean;
   /**
-   * Object of props passed to the <span/> wrapping the button's content
+   * Force disables the button and changes the icon to a loading spinner
    */
-  contentProps?: HTMLAttributes<HTMLSpanElement>;
+  isLoading?: boolean;
   /**
-   * Object of props passed to the <span/> wrapping the component's {children}
+   * Object of props passed to the <span/> wrapping the button's content
    */
-  textProps?: HTMLAttributes<HTMLSpanElement>;
+  contentProps?: EuiButtonContentType;
 }
 
+export interface EuiButtonDisplayProps extends EuiButtonProps {
+  element: 'a' | 'button' | 'span' | 'label';
+}
+
+/**
+ * *INTERNAL ONLY*
+ * Component for displaying any element as a button
+ * EuiButton is largely responsible for providing relevant props
+ * and the logic for element-specific attributes
+ */
+const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
+  (
+    {
+      children,
+      className,
+      iconType,
+      iconSide = 'left',
+      color = 'primary',
+      size = 'm',
+      fill = false,
+      isDisabled,
+      isLoading,
+      contentProps,
+      textProps,
+      fullWidth,
+      element = 'button',
+      ...rest
+    },
+    ref
+  ) => {
+    const classes = classNames(
+      'euiButton',
+      color ? colorToClassNameMap[color] : null,
+      size ? sizeToClassNameMap[size] : null,
+      className,
+      {
+        'euiButton--fill': fill,
+        'euiButton--fullWidth': fullWidth,
+        'euiButton-isDisabled': isDisabled,
+      }
+    );
+
+    const contentClassNames = classNames(
+      'euiButton__content',
+      contentProps && contentProps.className
+    );
+
+    const textClassNames = classNames(
+      'euiButton__text',
+      textProps && textProps.className
+    );
+
+    const innerNode = (
+      <EuiButtonContent
+        isLoading={isLoading}
+        iconType={iconType}
+        iconSide={iconSide}
+        textProps={{ ...textProps, className: textClassNames }}
+        {...contentProps}
+        // className has to come last to override contentProps.className
+        className={contentClassNames}>
+        {children}
+      </EuiButtonContent>
+    );
+
+    return React.createElement(
+      element,
+      {
+        className: classes,
+        ref,
+        ...rest,
+      },
+      innerNode
+    );
+  }
+);
+
+EuiButtonDisplay.displayName = 'EuiButtonDisplay';
+export { EuiButtonDisplay };
+
 type EuiButtonPropsForAnchor = PropsForAnchor<
   EuiButtonProps,
   {
@@ -121,79 +203,26 @@ export type Props = ExclusiveUnion<
 >;
 
 export const EuiButton: FunctionComponent<Props> = ({
-  children,
-  className,
-  iconType,
-  iconSide = 'left',
-  color = 'primary',
-  size = 'm',
-  fill = false,
   isDisabled,
-  isLoading,
+  disabled,
   href,
   target,
   rel,
   type = 'button',
   buttonRef,
-  contentProps,
-  textProps,
-  fullWidth,
   ...rest
 }) => {
-  // If in the loading state, force disabled to true
-  isDisabled = isLoading ? true : isDisabled;
-
-  const classes = classNames(
-    'euiButton',
-    color ? colorToClassNameMap[color] : null,
-    size ? sizeToClassNameMap[size] : null,
-    iconSide ? iconSideToClassNameMap[iconSide] : null,
-    className,
-    {
-      'euiButton--fill': fill,
-      'euiButton--fullWidth': fullWidth,
-    }
-  );
-
-  const contentClassNames = classNames(
-    'euiButton__content',
-    contentProps && contentProps.className
-  );
-
-  const textClassNames = classNames(
-    'euiButton__text',
-    textProps && textProps.className
-  );
-
-  // Add an icon to the button if one exists.
-  let buttonIcon;
-
-  if (isLoading) {
-    buttonIcon = <EuiLoadingSpinner className="euiButton__spinner" size="m" />;
-  } else if (iconType) {
-    buttonIcon = (
-      <EuiIcon
-        className="euiButton__icon"
-        type={iconType}
-        size="m"
-        aria-hidden="true"
-      />
-    );
+  const buttonIsDisabled = rest.isLoading || isDisabled || disabled;
+  const element = href && !isDisabled ? 'a' : 'button';
+
+  let elementProps = {};
+  // Props for all elements
+  elementProps = { ...elementProps, isDisabled: buttonIsDisabled };
+  // Element-specific attributes
+  if (element === 'button') {
+    elementProps = { ...elementProps, disabled: buttonIsDisabled };
   }
 
-  const innerNode = (
-    <span {...contentProps} className={contentClassNames}>
-      {buttonIcon}
-      <span {...textProps} className={textClassNames}>
-        {children}
-      </span>
-    </span>
-  );
-
-  // <Element> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
-  // this is a button and piggyback off its disabled styles.
-  const Element = href && !isDisabled ? 'a' : 'button';
-
   const relObj: {
     rel?: string;
     href?: string;
@@ -201,7 +230,7 @@ export const EuiButton: FunctionComponent<Props> = ({
     target?: string;
   } = {};
 
-  if (href && !isDisabled) {
+  if (href && !buttonIsDisabled) {
     relObj.href = href;
     relObj.rel = getSecureRelForTarget({ href, target, rel });
     relObj.target = target;
@@ -210,13 +239,12 @@ export const EuiButton: FunctionComponent<Props> = ({
   }
 
   return (
-    <Element
-      className={classes}
-      disabled={isDisabled}
+    <EuiButtonDisplay
+      element={element}
+      ref={buttonRef}
+      {...elementProps}
       {...relObj}
-      ref={buttonRef as Ref<HTMLButtonElement & HTMLAnchorElement>}
-      {...rest as HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>}>
-      {innerNode}
-    </Element>
+      {...rest}
+    />
   );
 };
diff --git a/src/components/button/button_content.test.tsx b/src/components/button/button_content.test.tsx
new file mode 100644
index 00000000000..296c6960db1
--- /dev/null
+++ b/src/components/button/button_content.test.tsx
@@ -0,0 +1,72 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiButtonContent } from './button_content';
+
+describe('EuiButtonContent', () => {
+  test('is rendered', () => {
+    const component = render(<EuiButtonContent {...requiredProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    test('children is rendered', () => {
+      const component = render(<EuiButtonContent>Content</EuiButtonContent>);
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('iconType is rendered', () => {
+      const component = render(<EuiButtonContent iconType="bolt" />);
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('iconSide is rendered', () => {
+      const component = render(
+        <EuiButtonContent iconSide="right" iconType="bolt" />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('isLoading is rendered', () => {
+      const component = render(<EuiButtonContent isLoading />);
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('isLoading replaces iconType with spinner', () => {
+      const component = render(<EuiButtonContent isLoading iconType="bolt" />);
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('textProps is rendered', () => {
+      const component = render(<EuiButtonContent textProps={requiredProps} />);
+
+      expect(component).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/components/button/button_content.tsx b/src/components/button/button_content.tsx
new file mode 100644
index 00000000000..4f210b7fd48
--- /dev/null
+++ b/src/components/button/button_content.tsx
@@ -0,0 +1,88 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { HTMLAttributes, FunctionComponent } from 'react';
+import classNames from 'classnames';
+import { CommonProps, keysOf } from '../common';
+import { EuiLoadingSpinner } from '../loading';
+import { EuiIcon, IconType } from '../icon';
+
+export type ButtonContentIconSide = 'left' | 'right';
+
+const iconSideToClassNameMap: {
+  [side in ButtonContentIconSide]: string | null
+} = {
+  left: null,
+  right: 'euiButtonContent--iconRight',
+};
+
+export const ICON_SIDES = keysOf(iconSideToClassNameMap);
+
+export type EuiButtonContentType = HTMLAttributes<HTMLSpanElement>;
+
+/**
+ * *INTERNAL ONLY*
+ * This component is simply a helper component for reuse within other button components
+ */
+export interface EuiButtonContentProps extends CommonProps {
+  iconType?: IconType;
+  iconSide?: ButtonContentIconSide;
+  isLoading?: boolean;
+  /**
+   * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+   */
+  textProps?: HTMLAttributes<HTMLSpanElement> & CommonProps;
+}
+
+export const EuiButtonContent: FunctionComponent<
+  EuiButtonContentType & EuiButtonContentProps
+> = ({
+  children,
+  textProps,
+  isLoading = false,
+  iconType,
+  iconSide = 'left',
+  ...contentProps
+}) => {
+  // Add an icon to the button if one exists.
+  let buttonIcon;
+
+  if (isLoading) {
+    buttonIcon = (
+      <EuiLoadingSpinner className="euiButtonContent__spinner" size="m" />
+    );
+  } else if (iconType) {
+    buttonIcon = (
+      <EuiIcon className="euiButtonContent__icon" type={iconType} size="m" />
+    );
+  }
+
+  const contentClassNames = classNames(
+    'euiButtonContent',
+    iconSide ? iconSideToClassNameMap[iconSide] : null,
+    contentProps && contentProps.className
+  );
+
+  return (
+    <span {...contentProps} className={contentClassNames}>
+      {buttonIcon}
+      <span {...textProps}>{children}</span>
+    </span>
+  );
+};
diff --git a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
index eec78f908f1..d96ca7811cb 100644
--- a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
+++ b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`EuiButtonEmpty is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -25,7 +25,7 @@ exports[`EuiButtonEmpty props color danger is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -40,7 +40,7 @@ exports[`EuiButtonEmpty props color disabled is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -55,7 +55,7 @@ exports[`EuiButtonEmpty props color ghost is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -70,7 +70,7 @@ exports[`EuiButtonEmpty props color primary is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -85,7 +85,7 @@ exports[`EuiButtonEmpty props color text is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -94,13 +94,32 @@ exports[`EuiButtonEmpty props color text is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiButtonEmpty props contentProps is rendered 1`] = `
+<button
+  class="euiButtonEmpty euiButtonEmpty--primary"
+  type="button"
+>
+  <span
+    aria-label="aria-label"
+    class="euiButtonContent euiButtonEmpty__content testClass1 testClass2"
+    data-test-subj="test subject string"
+  >
+    <span
+      class="euiButtonEmpty__text"
+    >
+      Content
+    </span>
+  </span>
+</button>
+`;
+
 exports[`EuiButtonEmpty props flush left is rendered 1`] = `
 <button
   class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -115,7 +134,7 @@ exports[`EuiButtonEmpty props flush right is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -132,7 +151,7 @@ exports[`EuiButtonEmpty props href secures the rel attribute when the target is
   target="_blank"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -147,11 +166,10 @@ exports[`EuiButtonEmpty props iconSide left is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <div
-      aria-hidden="true"
-      class="euiButtonEmpty__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
@@ -165,15 +183,14 @@ exports[`EuiButtonEmpty props iconSide left is rendered 1`] = `
 
 exports[`EuiButtonEmpty props iconSide right is rendered 1`] = `
 <button
-  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--iconRight"
+  class="euiButtonEmpty euiButtonEmpty--primary"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
     <div
-      aria-hidden="true"
-      class="euiButtonEmpty__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
@@ -191,11 +208,10 @@ exports[`EuiButtonEmpty props iconType is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <div
-      aria-hidden="true"
-      class="euiButtonEmpty__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
@@ -207,12 +223,12 @@ exports[`EuiButtonEmpty props iconType is rendered 1`] = `
 
 exports[`EuiButtonEmpty props isDisabled is rendered 1`] = `
 <button
-  class="euiButtonEmpty euiButtonEmpty--primary"
+  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty-isDisabled"
   disabled=""
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -223,12 +239,28 @@ exports[`EuiButtonEmpty props isDisabled is rendered 1`] = `
 
 exports[`EuiButtonEmpty props isDisabled renders a button even when href is defined 1`] = `
 <button
-  class="euiButtonEmpty euiButtonEmpty--primary"
+  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty-isDisabled"
+  disabled=""
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButtonEmpty__content"
+  >
+    <span
+      class="euiButtonEmpty__text"
+    />
+  </span>
+</button>
+`;
+
+exports[`EuiButtonEmpty props isDisabled renders if passed simply as disabled 1`] = `
+<button
+  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty-isDisabled"
   disabled=""
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -237,13 +269,32 @@ exports[`EuiButtonEmpty props isDisabled renders a button even when href is defi
 </button>
 `;
 
+exports[`EuiButtonEmpty props isLoading is rendered 1`] = `
+<button
+  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty-isDisabled"
+  disabled=""
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButtonEmpty__content"
+  >
+    <span
+      class="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
+    />
+    <span
+      class="euiButtonEmpty__text"
+    />
+  </span>
+</button>
+`;
+
 exports[`EuiButtonEmpty props size l is rendered 1`] = `
 <button
   class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--large"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -258,7 +309,7 @@ exports[`EuiButtonEmpty props size s is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -273,7 +324,7 @@ exports[`EuiButtonEmpty props size xs is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -281,3 +332,22 @@ exports[`EuiButtonEmpty props size xs is rendered 1`] = `
   </span>
 </button>
 `;
+
+exports[`EuiButtonEmpty props textProps is rendered 1`] = `
+<button
+  class="euiButtonEmpty euiButtonEmpty--primary"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButtonEmpty__content"
+  >
+    <span
+      aria-label="aria-label"
+      class="euiButtonEmpty__text testClass1 testClass2"
+      data-test-subj="test subject string"
+    >
+      Content
+    </span>
+  </span>
+</button>
+`;
diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss
index 60097e1e2e3..79d9b9d8f9c 100644
--- a/src/components/button/button_empty/_button_empty.scss
+++ b/src/components/button/button_empty/_button_empty.scss
@@ -16,7 +16,6 @@
   transition-duration: $euiAnimSpeedFast; /* 2 */
 
   .euiButtonEmpty__content {
-    @include euiButtonContent;
     padding: 0 $euiSizeS;
   }
 
@@ -34,25 +33,12 @@
     font-size: $euiFontSizeS;
   }
 
-  &.euiButtonEmpty--iconRight {
-    .euiButtonEmpty__content {
-      @include euiButtonContent($isReverse: true);
-    }
-  }
-
   &:disabled {
+    @include euiButtonContentDisabled;
+
     color: $euiButtonColorDisabledText;
     pointer-events: none;
 
-    .euiButtonEmpty__content {
-      pointer-events: auto;
-      cursor: not-allowed;
-    }
-
-    .euiButtonEmpty__icon {
-      fill: currentColor;
-    }
-
     &:focus {
       background-color: transparent;
     }
diff --git a/src/components/button/button_empty/button_empty.test.tsx b/src/components/button/button_empty/button_empty.test.tsx
index 00306c5d0b2..b885fadc683 100644
--- a/src/components/button/button_empty/button_empty.test.tsx
+++ b/src/components/button/button_empty/button_empty.test.tsx
@@ -21,13 +21,8 @@ import React from 'react';
 import { render, mount } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
 
-import {
-  EuiButtonEmpty,
-  COLORS,
-  SIZES,
-  ICON_SIDES,
-  FLUSH_TYPES,
-} from './button_empty';
+import { EuiButtonEmpty, COLORS, SIZES, FLUSH_TYPES } from './button_empty';
+import { ICON_SIDES } from '../button_content';
 
 describe('EuiButtonEmpty', () => {
   test('is rendered', () => {
@@ -51,6 +46,20 @@ describe('EuiButtonEmpty', () => {
 
         expect(component).toMatchSnapshot();
       });
+
+      it('renders if passed simply as disabled', () => {
+        const component = render(<EuiButtonEmpty disabled />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
+    describe('isLoading', () => {
+      it('is rendered', () => {
+        const component = render(<EuiButtonEmpty isLoading />);
+
+        expect(component).toMatchSnapshot();
+      });
     });
 
     describe('iconType', () => {
@@ -128,5 +137,21 @@ describe('EuiButtonEmpty', () => {
         expect(handler.mock.calls.length).toEqual(1);
       });
     });
+
+    test('contentProps is rendered', () => {
+      const component = render(
+        <EuiButtonEmpty contentProps={requiredProps}>Content</EuiButtonEmpty>
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('textProps is rendered', () => {
+      const component = render(
+        <EuiButtonEmpty textProps={requiredProps}>Content</EuiButtonEmpty>
+      );
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx
index 88c7b2f616e..cc72e2caa59 100644
--- a/src/components/button/button_empty/button_empty.tsx
+++ b/src/components/button/button_empty/button_empty.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 
 import {
@@ -27,10 +27,12 @@ import {
   PropsForButton,
   keysOf,
 } from '../../common';
-import { EuiLoadingSpinner } from '../../loading';
 import { getSecureRelForTarget } from '../../../services';
-import { IconType, EuiIcon } from '../../icon';
-import { ButtonIconSide } from '../button';
+import {
+  EuiButtonContent,
+  EuiButtonContentProps,
+  EuiButtonContentType,
+} from '../button_content';
 
 export type EuiButtonEmptyColor =
   | 'primary'
@@ -59,13 +61,6 @@ export const SIZES = keysOf(sizeToClassNameMap);
 
 export type EuiButtonEmptySizes = keyof typeof sizeToClassNameMap;
 
-const iconSideToClassNameMap: { [side in ButtonIconSide]: string } = {
-  left: '',
-  right: 'euiButtonEmpty--iconRight',
-};
-
-export const ICON_SIDES = keysOf(iconSideToClassNameMap);
-
 const flushTypeToClassNameMap = {
   left: 'euiButtonEmpty--flushLeft',
   right: 'euiButtonEmpty--flushRight',
@@ -73,33 +68,37 @@ const flushTypeToClassNameMap = {
 
 export const FLUSH_TYPES = keysOf(flushTypeToClassNameMap);
 
-interface CommonEuiButtonEmptyProps extends CommonProps {
-  iconType?: IconType;
-  iconSide?: ButtonIconSide;
+/**
+ * Extends EuiButtonContentProps which provides
+ * `iconType`, `iconSide`, and `textProps`
+ */
+interface CommonEuiButtonEmptyProps extends EuiButtonContentProps, CommonProps {
+  /**
+   * Any of our named colors
+   */
   color?: EuiButtonEmptyColor;
   size?: EuiButtonEmptySizes;
+  /**
+   * Ensure the text of the button sits flush to the left or right side of its container
+   */
   flush?: keyof typeof flushTypeToClassNameMap;
+  /**
+   * `disabled` is also allowed
+   */
   isDisabled?: boolean;
-  href?: string;
-  target?: string;
-  rel?: string;
-
   /**
-   * Adds/swaps for loading spinner & disables
+   * Force disables the button and changes the icon to a loading spinner
    */
   isLoading?: boolean;
-
+  href?: string;
+  target?: string;
+  rel?: string;
   type?: 'button' | 'submit';
   buttonRef?: (ref: HTMLButtonElement | HTMLAnchorElement | null) => void;
   /**
-   * Passes props to `euiButtonEmpty__content` span
+   * Object of props passed to the <span/> wrapping the button's content
    */
-  contentProps?: Partial<HTMLAttributes<HTMLSpanElement>>;
-
-  /**
-   * Passes props to `euiButtonEmpty__text` span
-   */
-  textProps?: Partial<HTMLAttributes<HTMLSpanElement>>;
+  contentProps?: EuiButtonContentType;
 }
 
 type EuiButtonEmptyPropsForAnchor = PropsForAnchor<CommonEuiButtonEmptyProps>;
@@ -120,6 +119,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
   size,
   flush,
   isDisabled,
+  disabled,
   isLoading,
   href,
   target,
@@ -131,14 +131,16 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
   ...rest
 }) => {
   // If in the loading state, force disabled to true
-  isDisabled = isLoading ? true : isDisabled;
+  const buttonIsDisabled = isLoading || isDisabled || disabled;
 
   const classes = classNames(
     'euiButtonEmpty',
     colorToClassNameMap[color],
     size ? sizeToClassNameMap[size] : null,
-    iconSideToClassNameMap[iconSide],
     flush ? flushTypeToClassNameMap[flush] : null,
+    {
+      'euiButtonEmpty-isDisabled': buttonIsDisabled,
+    },
     className
   );
 
@@ -152,34 +154,22 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
     textProps && textProps.className
   );
 
-  // Add an icon to the button if one exists.
-  let buttonIcon;
-
-  if (isLoading) {
-    buttonIcon = <EuiLoadingSpinner className="euiButton__spinner" size="m" />;
-  } else if (iconType) {
-    buttonIcon = (
-      <EuiIcon
-        className="euiButtonEmpty__icon"
-        type={iconType}
-        size="m"
-        aria-hidden="true"
-      />
-    );
-  }
-
   const innerNode = (
-    <span {...contentProps} className={contentClassNames}>
-      {buttonIcon}
-      <span {...textProps} className={textClassNames}>
-        {children}
-      </span>
-    </span>
+    <EuiButtonContent
+      isLoading={isLoading}
+      iconType={iconType}
+      iconSide={iconSide}
+      textProps={{ ...textProps, className: textClassNames }}
+      {...contentProps}
+      // className has to come last to override contentProps.className
+      className={contentClassNames}>
+      {children}
+    </EuiButtonContent>
   );
 
   // <a> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
   // this is a button and piggyback off its disabled styles.
-  if (href && !isDisabled) {
+  if (href && !buttonIsDisabled) {
     const secureRel = getSecureRelForTarget({ href, target, rel });
 
     return (
@@ -197,7 +187,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
 
   return (
     <button
-      disabled={isDisabled}
+      disabled={buttonIsDisabled}
       className={classes}
       type={type}
       ref={buttonRef}
diff --git a/src/components/button/button_empty/index.ts b/src/components/button/button_empty/index.ts
index e45c2267911..5b206fc639d 100644
--- a/src/components/button/button_empty/index.ts
+++ b/src/components/button/button_empty/index.ts
@@ -19,7 +19,6 @@
 
 export {
   COLORS,
-  ICON_SIDES,
   EuiButtonEmpty,
   EuiButtonEmptyColor,
   EuiButtonEmptyProps,
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 50babe49c2d..c895ae057d4 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
@@ -34,7 +34,7 @@ exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -60,7 +60,7 @@ exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -86,7 +86,7 @@ exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -123,7 +123,7 @@ exports[`EuiButtonGroup props buttonSize m is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -149,7 +149,7 @@ exports[`EuiButtonGroup props buttonSize m is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -175,7 +175,7 @@ exports[`EuiButtonGroup props buttonSize m is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -212,7 +212,7 @@ exports[`EuiButtonGroup props buttonSize s is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -238,7 +238,7 @@ exports[`EuiButtonGroup props buttonSize s is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -264,7 +264,7 @@ exports[`EuiButtonGroup props buttonSize s is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -301,7 +301,7 @@ exports[`EuiButtonGroup props color danger is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -327,7 +327,7 @@ exports[`EuiButtonGroup props color danger is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -353,7 +353,7 @@ exports[`EuiButtonGroup props color danger is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -390,7 +390,7 @@ exports[`EuiButtonGroup props color ghost is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -416,7 +416,7 @@ exports[`EuiButtonGroup props color ghost is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -442,7 +442,7 @@ exports[`EuiButtonGroup props color ghost is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -479,7 +479,7 @@ exports[`EuiButtonGroup props color primary is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -505,7 +505,7 @@ exports[`EuiButtonGroup props color primary is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -531,7 +531,7 @@ exports[`EuiButtonGroup props color primary is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -568,7 +568,7 @@ exports[`EuiButtonGroup props color secondary is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -594,7 +594,7 @@ exports[`EuiButtonGroup props color secondary is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -620,7 +620,7 @@ exports[`EuiButtonGroup props color secondary is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -657,7 +657,7 @@ exports[`EuiButtonGroup props color text is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -683,7 +683,7 @@ exports[`EuiButtonGroup props color text is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -709,7 +709,7 @@ exports[`EuiButtonGroup props color text is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -746,7 +746,7 @@ exports[`EuiButtonGroup props color warning is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -772,7 +772,7 @@ exports[`EuiButtonGroup props color warning is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -798,7 +798,7 @@ exports[`EuiButtonGroup props color warning is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -836,7 +836,7 @@ exports[`EuiButtonGroup props idSelected is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -862,7 +862,7 @@ exports[`EuiButtonGroup props idSelected is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -888,7 +888,7 @@ exports[`EuiButtonGroup props idSelected is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -920,14 +920,14 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = `
         type="radio"
       />
       <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
+        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button euiButton-isDisabled"
         disabled=""
         id="button00"
         tabindex="-1"
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -948,14 +948,14 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = `
         type="radio"
       />
       <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
+        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button euiButton-isDisabled"
         disabled=""
         id="button01"
         tabindex="-1"
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -976,14 +976,14 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = `
         type="radio"
       />
       <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
+        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button euiButton-isDisabled"
         disabled=""
         id="button02"
         tabindex="-1"
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1020,7 +1020,7 @@ exports[`EuiButtonGroup props isFullWidth is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1046,7 +1046,7 @@ exports[`EuiButtonGroup props isFullWidth is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1072,7 +1072,7 @@ exports[`EuiButtonGroup props isFullWidth is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1109,7 +1109,7 @@ exports[`EuiButtonGroup props isIconOnly is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1133,7 +1133,7 @@ exports[`EuiButtonGroup props isIconOnly is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1157,7 +1157,7 @@ exports[`EuiButtonGroup props isIconOnly is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1197,7 +1197,7 @@ exports[`EuiButtonGroup props legend is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1223,7 +1223,7 @@ exports[`EuiButtonGroup props legend is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1249,7 +1249,7 @@ exports[`EuiButtonGroup props legend is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1287,7 +1287,7 @@ exports[`EuiButtonGroup props name is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1314,7 +1314,7 @@ exports[`EuiButtonGroup props name is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1341,7 +1341,7 @@ exports[`EuiButtonGroup props name is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1378,7 +1378,7 @@ exports[`EuiButtonGroup props options are rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1404,7 +1404,7 @@ exports[`EuiButtonGroup props options are rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1430,7 +1430,7 @@ exports[`EuiButtonGroup props options are rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1468,7 +1468,7 @@ exports[`EuiButtonGroup props options can pass down data-test-subj 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1506,7 +1506,7 @@ exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1533,7 +1533,7 @@ exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1559,7 +1559,7 @@ exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1596,7 +1596,7 @@ exports[`EuiButtonGroup props type of multi is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1622,7 +1622,7 @@ exports[`EuiButtonGroup props type of multi is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -1648,7 +1648,7 @@ exports[`EuiButtonGroup props type of multi is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index 80a6914cc78..63750ccf3ce 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -26,7 +26,8 @@ import { ToggleType } from '../../toggle';
 import { EuiButtonToggle } from '../button_toggle';
 import { CommonProps } from '../../common';
 
-import { ButtonColor, ButtonIconSide } from '../button';
+import { ButtonColor } from '../button';
+import { ButtonContentIconSide } from '../button_content';
 import { IconType } from '../../icon';
 
 export interface EuiButtonGroupIdToSelectedMap {
@@ -41,7 +42,7 @@ export interface EuiButtonGroupOption extends CommonProps {
   name?: string;
   isDisabled?: boolean;
   value?: any;
-  iconSide?: ButtonIconSide;
+  iconSide?: ButtonContentIconSide;
   iconType?: IconType;
 }
 
diff --git a/src/components/button/button_toggle/__snapshots__/button_toggle.test.tsx.snap b/src/components/button/button_toggle/__snapshots__/button_toggle.test.tsx.snap
index fa9fb03a9da..5293306c543 100644
--- a/src/components/button/button_toggle/__snapshots__/button_toggle.test.tsx.snap
+++ b/src/components/button/button_toggle/__snapshots__/button_toggle.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`EuiButtonToggle is rendered 1`] = `
     type="button"
   >
     <span
-      class="euiButton__content"
+      class="euiButtonContent euiButton__content"
     >
       <span
         class="euiButton__text"
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
index 5d6297feee7..68189c28425 100644
--- a/src/components/button/index.ts
+++ b/src/components/button/index.ts
@@ -21,7 +21,6 @@ export {
   COLORS,
   ButtonColor,
   ButtonSize,
-  ButtonIconSide,
   EuiButton,
   EuiButtonProps,
 } from './button';
diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index e08ad399874..60cb0c1fe33 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -374,7 +374,7 @@ exports[`EuiCard props selectable 1`] = `
     type="button"
   >
     <span
-      class="euiButtonEmpty__content"
+      class="euiButtonContent euiButtonEmpty__content"
     >
       <span
         class="euiButtonEmpty__text"
diff --git a/src/components/card/__snapshots__/card_select.test.tsx.snap b/src/components/card/__snapshots__/card_select.test.tsx.snap
index 2cc5d5c655c..68e7b3ff67a 100644
--- a/src/components/card/__snapshots__/card_select.test.tsx.snap
+++ b/src/components/card/__snapshots__/card_select.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`EuiCardSelect is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -29,7 +29,7 @@ exports[`EuiCardSelect props can override color 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -48,7 +48,7 @@ exports[`EuiCardSelect props can override text 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -62,13 +62,13 @@ exports[`EuiCardSelect props can override text 1`] = `
 exports[`EuiCardSelect props isDisabled 1`] = `
 <button
   aria-checked="false"
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiCardSelect euiCardSelect--text"
+  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiCardSelect euiCardSelect--text"
   disabled=""
   role="switch"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -87,11 +87,10 @@ exports[`EuiCardSelect props isSelected 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <div
-      aria-hidden="true"
-      class="euiButtonEmpty__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="check"
     />
     <span
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index 43fabc7dfea..84072d95094 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -58,11 +58,10 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
@@ -113,11 +112,10 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
@@ -170,11 +168,10 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
@@ -221,11 +218,10 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
@@ -272,11 +268,10 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
@@ -321,11 +316,10 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonEmpty__content"
         >
           <div
-            aria-hidden="true"
-            class="euiButtonEmpty__icon"
+            class="euiButtonContent__icon"
             data-euiicon-type="cross"
           />
           <span
@@ -371,11 +365,10 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
@@ -427,11 +420,10 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
index f5507939664..aae4df037aa 100644
--- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
+++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`EuiControlBar is rendered 1`] = `
       type="button"
     >
       <span
-        class="euiButton__content"
+        class="euiButtonContent euiButton__content"
       >
         <span
           class="euiButton__text"
@@ -180,7 +180,7 @@ exports[`EuiControlBar props leftOffset is rendered 1`] = `
                 type="button"
               >
                 <span
-                  class="euiButton__content"
+                  class="euiButtonContent euiButton__content"
                 >
                   <span
                     class="euiButton__text"
@@ -299,22 +299,42 @@ exports[`EuiControlBar props leftOffset is rendered 1`] = `
               onClick={[Function]}
               size="s"
             >
-              <button
-                className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+              <EuiButtonDisplay
+                className="euiControlBar__button"
+                color="ghost"
                 data-test-subj="dts"
+                element="button"
                 onClick={[Function]}
+                size="s"
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <button
+                  className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+                  data-test-subj="dts"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <span
-                    className="euiButton__text"
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
-                    Sound the Alarm
-                  </span>
-                </span>
-              </button>
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Sound the Alarm
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
             </EuiButton>
             <div
               className="euiControlBar__text"
@@ -475,7 +495,7 @@ exports[`EuiControlBar props maxHeight is rendered 1`] = `
                 type="button"
               >
                 <span
-                  class="euiButton__content"
+                  class="euiButtonContent euiButton__content"
                 >
                   <span
                     class="euiButton__text"
@@ -594,22 +614,42 @@ exports[`EuiControlBar props maxHeight is rendered 1`] = `
               onClick={[Function]}
               size="s"
             >
-              <button
-                className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+              <EuiButtonDisplay
+                className="euiControlBar__button"
+                color="ghost"
                 data-test-subj="dts"
+                element="button"
                 onClick={[Function]}
+                size="s"
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <button
+                  className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+                  data-test-subj="dts"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <span
-                    className="euiButton__text"
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
-                    Sound the Alarm
-                  </span>
-                </span>
-              </button>
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Sound the Alarm
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
             </EuiButton>
             <div
               className="euiControlBar__text"
@@ -769,7 +809,7 @@ exports[`EuiControlBar props mobile is rendered 1`] = `
                 type="button"
               >
                 <span
-                  class="euiButton__content"
+                  class="euiButtonContent euiButton__content"
                 >
                   <span
                     class="euiButton__text"
@@ -888,22 +928,42 @@ exports[`EuiControlBar props mobile is rendered 1`] = `
               onClick={[Function]}
               size="s"
             >
-              <button
-                className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+              <EuiButtonDisplay
+                className="euiControlBar__button"
+                color="ghost"
                 data-test-subj="dts"
+                element="button"
                 onClick={[Function]}
+                size="s"
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <button
+                  className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+                  data-test-subj="dts"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <span
-                    className="euiButton__text"
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
-                    Sound the Alarm
-                  </span>
-                </span>
-              </button>
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Sound the Alarm
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
             </EuiButton>
             <div
               className="euiControlBar__text"
@@ -1095,22 +1155,42 @@ exports[`EuiControlBar props position is rendered 1`] = `
           onClick={[Function]}
           size="s"
         >
-          <button
-            className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+          <EuiButtonDisplay
+            className="euiControlBar__button"
+            color="ghost"
             data-test-subj="dts"
+            element="button"
             onClick={[Function]}
+            size="s"
             type="button"
           >
-            <span
-              className="euiButton__content"
+            <button
+              className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+              data-test-subj="dts"
+              onClick={[Function]}
+              type="button"
             >
-              <span
-                className="euiButton__text"
+              <EuiButtonContent
+                className="euiButton__content"
+                iconSide="left"
+                textProps={
+                  Object {
+                    "className": "euiButton__text",
+                  }
+                }
               >
-                Sound the Alarm
-              </span>
-            </span>
-          </button>
+                <span
+                  className="euiButtonContent euiButton__content"
+                >
+                  <span
+                    className="euiButton__text"
+                  >
+                    Sound the Alarm
+                  </span>
+                </span>
+              </EuiButtonContent>
+            </button>
+          </EuiButtonDisplay>
         </EuiButton>
         <div
           className="euiControlBar__text"
@@ -1255,7 +1335,7 @@ exports[`EuiControlBar props rightOffset is rendered 1`] = `
                 type="button"
               >
                 <span
-                  class="euiButton__content"
+                  class="euiButtonContent euiButton__content"
                 >
                   <span
                     class="euiButton__text"
@@ -1374,22 +1454,42 @@ exports[`EuiControlBar props rightOffset is rendered 1`] = `
               onClick={[Function]}
               size="s"
             >
-              <button
-                className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+              <EuiButtonDisplay
+                className="euiControlBar__button"
+                color="ghost"
                 data-test-subj="dts"
+                element="button"
                 onClick={[Function]}
+                size="s"
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <button
+                  className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+                  data-test-subj="dts"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <span
-                    className="euiButton__text"
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
-                    Sound the Alarm
-                  </span>
-                </span>
-              </button>
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Sound the Alarm
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
             </EuiButton>
             <div
               className="euiControlBar__text"
@@ -1549,7 +1649,7 @@ exports[`EuiControlBar props showContent is rendered 1`] = `
                 type="button"
               >
                 <span
-                  class="euiButton__content"
+                  class="euiButtonContent euiButton__content"
                 >
                   <span
                     class="euiButton__text"
@@ -1673,22 +1773,42 @@ exports[`EuiControlBar props showContent is rendered 1`] = `
               onClick={[Function]}
               size="s"
             >
-              <button
-                className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+              <EuiButtonDisplay
+                className="euiControlBar__button"
+                color="ghost"
                 data-test-subj="dts"
+                element="button"
                 onClick={[Function]}
+                size="s"
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <button
+                  className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+                  data-test-subj="dts"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <span
-                    className="euiButton__text"
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
-                    Sound the Alarm
-                  </span>
-                </span>
-              </button>
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Sound the Alarm
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
             </EuiButton>
             <div
               className="euiControlBar__text"
@@ -1853,7 +1973,7 @@ exports[`EuiControlBar props size is rendered 1`] = `
                 type="button"
               >
                 <span
-                  class="euiButton__content"
+                  class="euiButtonContent euiButton__content"
                 >
                   <span
                     class="euiButton__text"
@@ -1972,22 +2092,42 @@ exports[`EuiControlBar props size is rendered 1`] = `
               onClick={[Function]}
               size="s"
             >
-              <button
-                className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+              <EuiButtonDisplay
+                className="euiControlBar__button"
+                color="ghost"
                 data-test-subj="dts"
+                element="button"
                 onClick={[Function]}
+                size="s"
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <button
+                  className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+                  data-test-subj="dts"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <span
-                    className="euiButton__text"
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
-                    Sound the Alarm
-                  </span>
-                </span>
-              </button>
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Sound the Alarm
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
             </EuiButton>
             <div
               className="euiControlBar__text"
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 2e43c1c11e9..d6ce0c353e1 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -54,16 +54,15 @@ exports[`EuiDataGrid pagination renders 1`] = `
         class="euiPopover__anchor"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--iconRight"
+          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
           data-test-subj="tablePaginationPopoverButton"
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="arrowDown"
             />
             <span
@@ -113,7 +112,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
             rel="noreferrer"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -130,13 +129,13 @@ exports[`EuiDataGrid pagination renders 1`] = `
             aria-controls="htmlId"
             aria-current="true"
             aria-label="Page 2 of 2"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-1"
             disabled=""
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -204,11 +203,10 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -233,11 +231,10 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -255,11 +252,10 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -745,11 +741,10 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -774,11 +769,10 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -796,11 +790,10 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -1607,11 +1600,10 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -1636,11 +1628,10 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -1658,11 +1649,10 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -2147,11 +2137,10 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -2176,11 +2165,10 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -2198,11 +2186,10 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
             <span
diff --git a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
index f8f8197e0ed..407cccfed90 100644
--- a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
+++ b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
@@ -3,12 +3,12 @@
 exports[`EuiFilterButton is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton testClass1 testClass2"
+  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton testClass1 testClass2"
   data-test-subj="test subject string"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -23,11 +23,11 @@ exports[`EuiFilterButton is rendered 1`] = `
 
 exports[`EuiFilterButton props grow can be turned off 1`] = `
 <button
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton--noGrow"
+  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--noGrow"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -42,15 +42,14 @@ exports[`EuiFilterButton props grow can be turned off 1`] = `
 
 exports[`EuiFilterButton props iconType and iconSide is rendered 1`] = `
 <button
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton--hasIcon"
+  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
     <div
-      aria-hidden="true"
-      class="euiButtonEmpty__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
@@ -66,12 +65,12 @@ exports[`EuiFilterButton props iconType and iconSide is rendered 1`] = `
 
 exports[`EuiFilterButton props isDisabled is rendered 1`] = `
 <button
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton"
+  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty-isDisabled euiFilterButton"
   disabled=""
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -86,11 +85,11 @@ exports[`EuiFilterButton props isDisabled is rendered 1`] = `
 
 exports[`EuiFilterButton props isSelected is rendered 1`] = `
 <button
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton-isSelected"
+  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-isSelected"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -105,11 +104,11 @@ exports[`EuiFilterButton props isSelected is rendered 1`] = `
 
 exports[`EuiFilterButton props numActiveFilters and hasActiveFilters is rendered 1`] = `
 <button
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton-hasActiveFilters"
+  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasActiveFilters"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -124,11 +123,11 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters is rendered
 
 exports[`EuiFilterButton props numFilters is rendered 1`] = `
 <button
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton-hasNotification"
+  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasNotification"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text euiFilterButton__text-hasNotification"
@@ -149,11 +148,11 @@ exports[`EuiFilterButton props numFilters is rendered 1`] = `
 
 exports[`EuiFilterButton props type is rendered 1`] = `
 <button
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton"
+  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -168,11 +167,11 @@ exports[`EuiFilterButton props type is rendered 1`] = `
 
 exports[`EuiFilterButton props withNext is rendered 1`] = `
 <button
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton--withNext"
+  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--withNext"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -188,12 +187,12 @@ exports[`EuiFilterButton props withNext is rendered 1`] = `
 exports[`EuiFilterButton renders zero properly 1`] = `
 <button
   aria-label="aria-label"
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton-hasNotification testClass1 testClass2"
+  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasNotification testClass1 testClass2"
   data-test-subj="test subject string"
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text euiFilterButton__text-hasNotification"
diff --git a/src/components/header/header_links/__snapshots__/header_link.test.tsx.snap b/src/components/header/header_links/__snapshots__/header_link.test.tsx.snap
index eb44f88f7f2..1e94057b76f 100644
--- a/src/components/header/header_links/__snapshots__/header_link.test.tsx.snap
+++ b/src/components/header/header_links/__snapshots__/header_link.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`EuiHeaderLink is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
@@ -23,7 +23,7 @@ exports[`EuiHeaderLink is rendered as active 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index 1f40a73883a..e2a2116bf26 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -70,7 +70,7 @@ Array [
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -85,7 +85,7 @@ Array [
             type="button"
           >
             <span
-              class="euiButton__content"
+              class="euiButtonContent euiButton__content"
             >
               <span
                 class="euiButton__text"
@@ -160,7 +160,7 @@ Array [
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -175,7 +175,7 @@ Array [
             type="button"
           >
             <span
-              class="euiButton__content"
+              class="euiButtonContent euiButton__content"
             >
               <span
                 class="euiButton__text"
diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
index 30e9aa17295..f89a978ebe5 100644
--- a/src/components/pagination/__snapshots__/pagination.test.tsx.snap
+++ b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`EuiPagination is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonEmpty__content"
         >
           <span
             class="euiButtonEmpty__text"
diff --git a/src/components/pagination/__snapshots__/pagination_button.test.tsx.snap b/src/components/pagination/__snapshots__/pagination_button.test.tsx.snap
index a10e6ca49f8..63148239f19 100644
--- a/src/components/pagination/__snapshots__/pagination_button.test.tsx.snap
+++ b/src/components/pagination/__snapshots__/pagination_button.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`EuiPaginationButton is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <span
       class="euiButtonEmpty__text"
diff --git a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap
index 7797052cbea..88f3bc4bfb8 100644
--- a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap
+++ b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap
@@ -13,15 +13,14 @@ exports[`EuiTableSortMobile is rendered 1`] = `
       class="euiPopover__anchor"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiButtonEmpty--flushRight"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
         >
           <div
-            aria-hidden="true"
-            class="euiButtonEmpty__icon"
+            class="euiButtonContent__icon"
             data-euiicon-type="arrowDown"
           />
           <span
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
index 8cdddf8fc75..be2a5cbd66e 100644
--- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
+++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
@@ -14,16 +14,15 @@ exports[`EuiTablePagination is rendered 1`] = `
         class="euiPopover__anchor"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--iconRight"
+          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
           data-test-subj="tablePaginationPopoverButton"
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="arrowDown"
             />
             <span
@@ -70,7 +69,7 @@ exports[`EuiTablePagination is rendered 1`] = `
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -86,13 +85,13 @@ exports[`EuiTablePagination is rendered 1`] = `
           <button
             aria-current="true"
             aria-label="Page 2 of 5"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-1"
             disabled=""
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -112,7 +111,7 @@ exports[`EuiTablePagination is rendered 1`] = `
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -132,7 +131,7 @@ exports[`EuiTablePagination is rendered 1`] = `
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -152,7 +151,7 @@ exports[`EuiTablePagination is rendered 1`] = `
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -221,7 +220,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -237,13 +236,13 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
           <button
             aria-current="true"
             aria-label="Page 2 of 5"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-1"
             disabled=""
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -263,7 +262,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -283,7 +282,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -303,7 +302,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss
index 1ed23faebc2..673b6347c17 100644
--- a/src/global_styling/mixins/_button.scss
+++ b/src/global_styling/mixins/_button.scss
@@ -63,8 +63,8 @@
   width: 100%;
   vertical-align: middle;
 
-  .euiButton__icon,
-  .euiButton__spinner {
+  .euiButtonContent__icon,
+  .euiButtonContent__spinner {
     flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size
   }
 
@@ -86,5 +86,18 @@
   }
 }
 
+@mixin euiButtonContentDisabled {
+  pointer-events: auto;
+  cursor: not-allowed;
+
+  .euiButtonContent__icon {
+    fill: currentColor;
+  }
+
+  .euiButtonContent__spinner {
+    border-color: euiLoadingSpinnerBorderColors(currentColor);
+  }
+}
+
 // Keyframe animation declarations can be found in
 // utility/animations.scss