From be07c13b7d23685df1adcbfa6c3dc15e27ff123b Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 8 Jul 2020 11:46:20 -0400
Subject: [PATCH 01/13] [New] EuiButtonContent

For rendering the contents of buttons, icon (loading spinner) and text wrapper for children
---
 .../button/__snapshots__/button.test.tsx.snap |  2 +-
 .../button_content.test.tsx.snap              | 13 +++
 src/components/button/_button_content.scss    |  3 +
 src/components/button/button.tsx              | 46 +++------
 src/components/button/button_content.test.tsx | 32 ++++++
 src/components/button/button_content.tsx      | 94 ++++++++++++++++++
 .../__snapshots__/control_bar.test.tsx.snap   | 98 ++++++++++++-------
 7 files changed, 217 insertions(+), 71 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/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index 4df2e87c8ca..a8750a15784 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -184,7 +184,7 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButton__content euiButton--iconRight"
   >
     <div
       aria-hidden="true"
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..13e964efb1c
--- /dev/null
+++ b/src/components/button/__snapshots__/button_content.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiButtonContent is rendered 1`] = `
+<span
+  aria-label="aria-label"
+  class="euiButton__content testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <span
+    class="euiButton__text"
+  />
+</span>
+`;
diff --git a/src/components/button/_button_content.scss b/src/components/button/_button_content.scss
new file mode 100644
index 00000000000..52b4111fbbd
--- /dev/null
+++ b/src/components/button/_button_content.scss
@@ -0,0 +1,3 @@
+// .euiButtonContent {
+
+// }
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 7d01b5f9e44..542b10a0e72 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -32,11 +32,11 @@ import {
   PropsForButton,
   keysOf,
 } from '../common';
-import { EuiLoadingSpinner } from '../loading';
 
 import { getSecureRelForTarget } from '../../services';
 
-import { IconType, EuiIcon } from '../icon';
+import { IconType } from '../icon';
+import { EuiButtonContentProps, EuiButtonContent } from './button_content';
 
 export type ButtonIconSide = 'left' | 'right';
 
@@ -94,7 +94,7 @@ export interface EuiButtonProps extends CommonProps {
   /**
    * Object of props passed to the <span/> wrapping the button's content
    */
-  contentProps?: HTMLAttributes<HTMLSpanElement>;
+  contentProps?: EuiButtonContentProps;
   /**
    * Object of props passed to the <span/> wrapping the component's {children}
    */
@@ -155,39 +155,15 @@ export const EuiButton: FunctionComponent<Props> = ({
     }
   );
 
-  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 innerNode = (
-    <span {...contentProps} className={contentClassNames}>
-      {buttonIcon}
-      <span {...textProps} className={textClassNames}>
-        {children}
-      </span>
-    </span>
+    <EuiButtonContent
+      isLoading={isLoading}
+      iconType={iconType}
+      iconSide={iconSide}
+      textProps={textProps}
+      {...contentProps}>
+      {children}
+    </EuiButtonContent>
   );
 
   // <Element> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
diff --git a/src/components/button/button_content.test.tsx b/src/components/button/button_content.test.tsx
new file mode 100644
index 00000000000..07a8b446710
--- /dev/null
+++ b/src/components/button/button_content.test.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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();
+  });
+});
diff --git a/src/components/button/button_content.tsx b/src/components/button/button_content.tsx
new file mode 100644
index 00000000000..a159002a44d
--- /dev/null
+++ b/src/components/button/button_content.tsx
@@ -0,0 +1,94 @@
+/*
+ * 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.
+ */
+
+/**
+ * This component is simply a helper component for reuse within other button components
+ */
+
+import React, { HTMLAttributes, FunctionComponent } from 'react';
+import { CommonProps, keysOf } from '../common';
+import classNames from 'classnames';
+import { EuiLoadingSpinner } from '../loading';
+import { EuiIcon, IconType } from '../icon';
+
+export type ButtonIconSide = 'left' | 'right';
+
+const iconSideToClassNameMap: { [side in ButtonIconSide]: string | null } = {
+  left: null,
+  right: 'euiButton--iconRight',
+};
+
+export const ICON_SIDES = keysOf(iconSideToClassNameMap);
+
+export type EuiButtonContentProps = HTMLAttributes<HTMLSpanElement> &
+  CommonProps & {
+    iconType?: IconType;
+    iconSide?: ButtonIconSide;
+    isLoading?: boolean;
+    /**
+     * Object of props passed to the <span/> wrapping the component's {children}
+     */
+    textProps?: HTMLAttributes<HTMLSpanElement> & CommonProps;
+  };
+
+export const EuiButtonContent: FunctionComponent<EuiButtonContentProps> = ({
+  children,
+  className,
+  textProps,
+  isLoading,
+  iconType,
+  iconSide,
+  ...rest
+}) => {
+  const contentClassNames = classNames(
+    'euiButton__content',
+    iconSide ? iconSideToClassNameMap[iconSide] : null,
+    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"
+      />
+    );
+  }
+
+  return (
+    <span {...rest} className={contentClassNames}>
+      {buttonIcon}
+      <span {...textProps} className={textClassNames}>
+        {children}
+      </span>
+    </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..3609a3ae6dd 100644
--- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
+++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
@@ -305,15 +305,19 @@ exports[`EuiControlBar props leftOffset is rendered 1`] = `
                 onClick={[Function]}
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <EuiButtonContent
+                  iconSide="left"
                 >
                   <span
-                    className="euiButton__text"
+                    className="euiButton__content"
                   >
-                    Sound the Alarm
+                    <span
+                      className="euiButton__text"
+                    >
+                      Sound the Alarm
+                    </span>
                   </span>
-                </span>
+                </EuiButtonContent>
               </button>
             </EuiButton>
             <div
@@ -600,15 +604,19 @@ exports[`EuiControlBar props maxHeight is rendered 1`] = `
                 onClick={[Function]}
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <EuiButtonContent
+                  iconSide="left"
                 >
                   <span
-                    className="euiButton__text"
+                    className="euiButton__content"
                   >
-                    Sound the Alarm
+                    <span
+                      className="euiButton__text"
+                    >
+                      Sound the Alarm
+                    </span>
                   </span>
-                </span>
+                </EuiButtonContent>
               </button>
             </EuiButton>
             <div
@@ -894,15 +902,19 @@ exports[`EuiControlBar props mobile is rendered 1`] = `
                 onClick={[Function]}
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <EuiButtonContent
+                  iconSide="left"
                 >
                   <span
-                    className="euiButton__text"
+                    className="euiButton__content"
                   >
-                    Sound the Alarm
+                    <span
+                      className="euiButton__text"
+                    >
+                      Sound the Alarm
+                    </span>
                   </span>
-                </span>
+                </EuiButtonContent>
               </button>
             </EuiButton>
             <div
@@ -1101,15 +1113,19 @@ exports[`EuiControlBar props position is rendered 1`] = `
             onClick={[Function]}
             type="button"
           >
-            <span
-              className="euiButton__content"
+            <EuiButtonContent
+              iconSide="left"
             >
               <span
-                className="euiButton__text"
+                className="euiButton__content"
               >
-                Sound the Alarm
+                <span
+                  className="euiButton__text"
+                >
+                  Sound the Alarm
+                </span>
               </span>
-            </span>
+            </EuiButtonContent>
           </button>
         </EuiButton>
         <div
@@ -1380,15 +1396,19 @@ exports[`EuiControlBar props rightOffset is rendered 1`] = `
                 onClick={[Function]}
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <EuiButtonContent
+                  iconSide="left"
                 >
                   <span
-                    className="euiButton__text"
+                    className="euiButton__content"
                   >
-                    Sound the Alarm
+                    <span
+                      className="euiButton__text"
+                    >
+                      Sound the Alarm
+                    </span>
                   </span>
-                </span>
+                </EuiButtonContent>
               </button>
             </EuiButton>
             <div
@@ -1679,15 +1699,19 @@ exports[`EuiControlBar props showContent is rendered 1`] = `
                 onClick={[Function]}
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <EuiButtonContent
+                  iconSide="left"
                 >
                   <span
-                    className="euiButton__text"
+                    className="euiButton__content"
                   >
-                    Sound the Alarm
+                    <span
+                      className="euiButton__text"
+                    >
+                      Sound the Alarm
+                    </span>
                   </span>
-                </span>
+                </EuiButtonContent>
               </button>
             </EuiButton>
             <div
@@ -1978,15 +2002,19 @@ exports[`EuiControlBar props size is rendered 1`] = `
                 onClick={[Function]}
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <EuiButtonContent
+                  iconSide="left"
                 >
                   <span
-                    className="euiButton__text"
+                    className="euiButton__content"
                   >
-                    Sound the Alarm
+                    <span
+                      className="euiButton__text"
+                    >
+                      Sound the Alarm
+                    </span>
                   </span>
-                </span>
+                </EuiButtonContent>
               </button>
             </EuiButton>
             <div

From b8ff8d7821f72100e84bccb1d670d048cddf0604 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 8 Jul 2020 12:16:30 -0400
Subject: [PATCH 02/13] Use EuiButtonContent in EuiButtonEmpty

---
 .../in_memory_table.test.tsx.snap             | 88 ++++++++++++-------
 .../button/__snapshots__/button.test.tsx.snap |  2 +-
 .../button_content.test.tsx.snap              |  6 +-
 src/components/button/button.tsx              | 17 +++-
 src/components/button/button_content.tsx      | 34 +------
 .../__snapshots__/button_empty.test.tsx.snap  |  6 +-
 .../button/button_empty/_button_empty.scss    |  6 +-
 .../button/button_empty/button_empty.tsx      | 37 +++-----
 .../__snapshots__/card_select.test.tsx.snap   |  2 +-
 .../collapsible_nav.test.tsx.snap             | 32 +++----
 .../__snapshots__/control_bar.test.tsx.snap   | 49 +++++++++--
 .../__snapshots__/data_grid.test.tsx.snap     | 26 +++---
 .../__snapshots__/filter_button.test.tsx.snap | 22 ++---
 .../table_sort_mobile.test.tsx.snap           |  2 +-
 .../table_pagination.test.tsx.snap            |  2 +-
 15 files changed, 184 insertions(+), 147 deletions(-)

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..933dc496210 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
@@ -388,35 +388,45 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                 onClick={[Function]}
                                 type="button"
                               >
-                                <span
+                                <EuiButtonContent
                                   className="euiButtonEmpty__content"
+                                  iconType="arrowDown"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButtonEmpty__text",
+                                    }
+                                  }
                                 >
-                                  <EuiIcon
-                                    aria-hidden="true"
-                                    className="euiButtonEmpty__icon"
-                                    size="m"
-                                    type="arrowDown"
+                                  <span
+                                    className="euiButtonEmpty__content"
                                   >
-                                    <div
+                                    <EuiIcon
                                       aria-hidden="true"
-                                      className="euiButtonEmpty__icon"
-                                      data-euiicon-type="arrowDown"
+                                      className="euiButton__icon"
                                       size="m"
-                                    />
-                                  </EuiIcon>
-                                  <span
-                                    className="euiButtonEmpty__text"
-                                  >
-                                    <EuiI18n
-                                      default="Rows per page"
-                                      token="euiTablePagination.rowsPerPage"
+                                      type="arrowDown"
                                     >
-                                      Rows per page
-                                    </EuiI18n>
-                                    : 
-                                    2
+                                      <div
+                                        aria-hidden="true"
+                                        className="euiButton__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 +555,24 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                         onClick={[Function]}
                                         rel="noreferrer"
                                       >
-                                        <span
+                                        <EuiButtonContent
                                           className="euiButtonEmpty__content"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text",
+                                            }
+                                          }
                                         >
                                           <span
-                                            className="euiButtonEmpty__text"
+                                            className="euiButtonEmpty__content"
                                           >
-                                            1
+                                            <span
+                                              className="euiButtonEmpty__text"
+                                            >
+                                              1
+                                            </span>
                                           </span>
-                                        </span>
+                                        </EuiButtonContent>
                                       </a>
                                     </EuiButtonEmpty>
                                   </EuiI18n>
@@ -617,15 +636,24 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                         onClick={[Function]}
                                         type="button"
                                       >
-                                        <span
+                                        <EuiButtonContent
                                           className="euiButtonEmpty__content"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text",
+                                            }
+                                          }
                                         >
                                           <span
-                                            className="euiButtonEmpty__text"
+                                            className="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 a8750a15784..4df2e87c8ca 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -184,7 +184,7 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content euiButton--iconRight"
+    class="euiButton__content"
   >
     <div
       aria-hidden="true"
diff --git a/src/components/button/__snapshots__/button_content.test.tsx.snap b/src/components/button/__snapshots__/button_content.test.tsx.snap
index 13e964efb1c..ea381903066 100644
--- a/src/components/button/__snapshots__/button_content.test.tsx.snap
+++ b/src/components/button/__snapshots__/button_content.test.tsx.snap
@@ -3,11 +3,9 @@
 exports[`EuiButtonContent is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiButton__content testClass1 testClass2"
+  class="testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <span
-    class="euiButton__text"
-  />
+  <span />
 </span>
 `;
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 542b10a0e72..1144ddfb79f 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -155,13 +155,24 @@ export const EuiButton: FunctionComponent<Props> = ({
     }
   );
 
+  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}
-      {...contentProps}>
+      textProps={{ className: textClassNames, ...textProps }}
+      {...contentProps}
+      // className has to come last to override contentProps.className
+      className={contentClassNames}>
       {children}
     </EuiButtonContent>
   );
diff --git a/src/components/button/button_content.tsx b/src/components/button/button_content.tsx
index a159002a44d..442fe84e643 100644
--- a/src/components/button/button_content.tsx
+++ b/src/components/button/button_content.tsx
@@ -22,24 +22,13 @@
  */
 
 import React, { HTMLAttributes, FunctionComponent } from 'react';
-import { CommonProps, keysOf } from '../common';
-import classNames from 'classnames';
+import { CommonProps } from '../common';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiIcon, IconType } from '../icon';
 
-export type ButtonIconSide = 'left' | 'right';
-
-const iconSideToClassNameMap: { [side in ButtonIconSide]: string | null } = {
-  left: null,
-  right: 'euiButton--iconRight',
-};
-
-export const ICON_SIDES = keysOf(iconSideToClassNameMap);
-
 export type EuiButtonContentProps = HTMLAttributes<HTMLSpanElement> &
   CommonProps & {
     iconType?: IconType;
-    iconSide?: ButtonIconSide;
     isLoading?: boolean;
     /**
      * Object of props passed to the <span/> wrapping the component's {children}
@@ -49,24 +38,11 @@ export type EuiButtonContentProps = HTMLAttributes<HTMLSpanElement> &
 
 export const EuiButtonContent: FunctionComponent<EuiButtonContentProps> = ({
   children,
-  className,
   textProps,
   isLoading,
   iconType,
-  iconSide,
-  ...rest
+  ...contentProps
 }) => {
-  const contentClassNames = classNames(
-    'euiButton__content',
-    iconSide ? iconSideToClassNameMap[iconSide] : null,
-    className
-  );
-
-  const textClassNames = classNames(
-    'euiButton__text',
-    textProps && textProps.className
-  );
-
   // Add an icon to the button if one exists.
   let buttonIcon;
 
@@ -84,11 +60,9 @@ export const EuiButtonContent: FunctionComponent<EuiButtonContentProps> = ({
   }
 
   return (
-    <span {...rest} className={contentClassNames}>
+    <span {...contentProps}>
       {buttonIcon}
-      <span {...textProps} className={textClassNames}>
-        {children}
-      </span>
+      <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..200cb661e04 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
@@ -151,7 +151,7 @@ exports[`EuiButtonEmpty props iconSide left is rendered 1`] = `
   >
     <div
       aria-hidden="true"
-      class="euiButtonEmpty__icon"
+      class="euiButton__icon"
       data-euiicon-type="user"
     />
     <span
@@ -173,7 +173,7 @@ exports[`EuiButtonEmpty props iconSide right is rendered 1`] = `
   >
     <div
       aria-hidden="true"
-      class="euiButtonEmpty__icon"
+      class="euiButton__icon"
       data-euiicon-type="user"
     />
     <span
@@ -195,7 +195,7 @@ exports[`EuiButtonEmpty props iconType is rendered 1`] = `
   >
     <div
       aria-hidden="true"
-      class="euiButtonEmpty__icon"
+      class="euiButton__icon"
       data-euiicon-type="user"
     />
     <span
diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss
index 60097e1e2e3..e827dbb1a2d 100644
--- a/src/components/button/button_empty/_button_empty.scss
+++ b/src/components/button/button_empty/_button_empty.scss
@@ -49,10 +49,14 @@
       cursor: not-allowed;
     }
 
-    .euiButtonEmpty__icon {
+    .euiButton__icon {
       fill: currentColor;
     }
 
+    .euiButton__spinner {
+      border-color: euiLoadingSpinnerBorderColors(currentColor);
+    }
+
     &:focus {
       background-color: transparent;
     }
diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx
index 88c7b2f616e..b520377e461 100644
--- a/src/components/button/button_empty/button_empty.tsx
+++ b/src/components/button/button_empty/button_empty.tsx
@@ -27,10 +27,10 @@ import {
   PropsForButton,
   keysOf,
 } from '../../common';
-import { EuiLoadingSpinner } from '../../loading';
 import { getSecureRelForTarget } from '../../../services';
-import { IconType, EuiIcon } from '../../icon';
+import { IconType } from '../../icon';
 import { ButtonIconSide } from '../button';
+import { EuiButtonContent, EuiButtonContentProps } from '../button_content';
 
 export type EuiButtonEmptyColor =
   | 'primary'
@@ -94,7 +94,7 @@ interface CommonEuiButtonEmptyProps extends CommonProps {
   /**
    * Passes props to `euiButtonEmpty__content` span
    */
-  contentProps?: Partial<HTMLAttributes<HTMLSpanElement>>;
+  contentProps?: EuiButtonContentProps;
 
   /**
    * Passes props to `euiButtonEmpty__text` span
@@ -152,29 +152,16 @@ 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}
+      textProps={{ className: textClassNames, ...textProps }}
+      {...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
diff --git a/src/components/card/__snapshots__/card_select.test.tsx.snap b/src/components/card/__snapshots__/card_select.test.tsx.snap
index 2cc5d5c655c..8b7e595109f 100644
--- a/src/components/card/__snapshots__/card_select.test.tsx.snap
+++ b/src/components/card/__snapshots__/card_select.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`EuiCardSelect props isSelected 1`] = `
   >
     <div
       aria-hidden="true"
-      class="euiButtonEmpty__icon"
+      class="euiButton__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..411a6c86c82 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -62,11 +62,11 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButton__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+              class="euiCollapsibleNav__closeButtonText"
             >
               close
             </span>
@@ -117,11 +117,11 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButton__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+              class="euiCollapsibleNav__closeButtonText"
             >
               close
             </span>
@@ -174,11 +174,11 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButton__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+              class="euiCollapsibleNav__closeButtonText"
             >
               close
             </span>
@@ -225,11 +225,11 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButton__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+              class="euiCollapsibleNav__closeButtonText"
             >
               close
             </span>
@@ -276,11 +276,11 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButton__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+              class="euiCollapsibleNav__closeButtonText"
             >
               close
             </span>
@@ -325,11 +325,11 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
         >
           <div
             aria-hidden="true"
-            class="euiButtonEmpty__icon"
+            class="euiButton__icon"
             data-euiicon-type="cross"
           />
           <span
-            class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+            class="euiCollapsibleNav__closeButtonText"
           >
             close
           </span>
@@ -375,11 +375,11 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButton__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+              class="euiCollapsibleNav__closeButtonText"
             >
               close
             </span>
@@ -431,11 +431,11 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButton__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+              class="euiCollapsibleNav__closeButtonText"
             >
               close
             </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 3609a3ae6dd..7e9bb551ace 100644
--- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
+++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
@@ -306,7 +306,12 @@ exports[`EuiControlBar props leftOffset is rendered 1`] = `
                 type="button"
               >
                 <EuiButtonContent
-                  iconSide="left"
+                  className="euiButton__content"
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
                 >
                   <span
                     className="euiButton__content"
@@ -605,7 +610,12 @@ exports[`EuiControlBar props maxHeight is rendered 1`] = `
                 type="button"
               >
                 <EuiButtonContent
-                  iconSide="left"
+                  className="euiButton__content"
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
                 >
                   <span
                     className="euiButton__content"
@@ -903,7 +913,12 @@ exports[`EuiControlBar props mobile is rendered 1`] = `
                 type="button"
               >
                 <EuiButtonContent
-                  iconSide="left"
+                  className="euiButton__content"
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
                 >
                   <span
                     className="euiButton__content"
@@ -1114,7 +1129,12 @@ exports[`EuiControlBar props position is rendered 1`] = `
             type="button"
           >
             <EuiButtonContent
-              iconSide="left"
+              className="euiButton__content"
+              textProps={
+                Object {
+                  "className": "euiButton__text",
+                }
+              }
             >
               <span
                 className="euiButton__content"
@@ -1397,7 +1417,12 @@ exports[`EuiControlBar props rightOffset is rendered 1`] = `
                 type="button"
               >
                 <EuiButtonContent
-                  iconSide="left"
+                  className="euiButton__content"
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
                 >
                   <span
                     className="euiButton__content"
@@ -1700,7 +1725,12 @@ exports[`EuiControlBar props showContent is rendered 1`] = `
                 type="button"
               >
                 <EuiButtonContent
-                  iconSide="left"
+                  className="euiButton__content"
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
                 >
                   <span
                     className="euiButton__content"
@@ -2003,7 +2033,12 @@ exports[`EuiControlBar props size is rendered 1`] = `
                 type="button"
               >
                 <EuiButtonContent
-                  iconSide="left"
+                  className="euiButton__content"
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
                 >
                   <span
                     className="euiButton__content"
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 2e43c1c11e9..48dcc0f4cbc 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
           >
             <div
               aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButton__icon"
               data-euiicon-type="arrowDown"
             />
             <span
@@ -208,7 +208,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButton__icon"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -237,7 +237,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButton__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -259,7 +259,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButton__icon"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -749,7 +749,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButton__icon"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -778,7 +778,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButton__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -800,7 +800,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButton__icon"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -1611,7 +1611,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButton__icon"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -1640,7 +1640,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButton__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -1662,7 +1662,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButton__icon"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -2151,7 +2151,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButton__icon"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -2180,7 +2180,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButtonEmpty__icon"
+                  class="euiButton__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -2202,7 +2202,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButton__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..7eae037926a 100644
--- a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
+++ b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`EuiFilterButton is rendered 1`] = `
     class="euiButtonEmpty__content"
   >
     <span
-      class="euiButtonEmpty__text"
+      class=""
     >
       <span
         class="euiFilterButton__textShift"
@@ -30,7 +30,7 @@ exports[`EuiFilterButton props grow can be turned off 1`] = `
     class="euiButtonEmpty__content"
   >
     <span
-      class="euiButtonEmpty__text"
+      class=""
     >
       <span
         class="euiFilterButton__textShift"
@@ -50,11 +50,11 @@ exports[`EuiFilterButton props iconType and iconSide is rendered 1`] = `
   >
     <div
       aria-hidden="true"
-      class="euiButtonEmpty__icon"
+      class="euiButton__icon"
       data-euiicon-type="user"
     />
     <span
-      class="euiButtonEmpty__text"
+      class=""
     >
       <span
         class="euiFilterButton__textShift"
@@ -74,7 +74,7 @@ exports[`EuiFilterButton props isDisabled is rendered 1`] = `
     class="euiButtonEmpty__content"
   >
     <span
-      class="euiButtonEmpty__text"
+      class=""
     >
       <span
         class="euiFilterButton__textShift"
@@ -93,7 +93,7 @@ exports[`EuiFilterButton props isSelected is rendered 1`] = `
     class="euiButtonEmpty__content"
   >
     <span
-      class="euiButtonEmpty__text"
+      class=""
     >
       <span
         class="euiFilterButton__textShift"
@@ -112,7 +112,7 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters is rendered
     class="euiButtonEmpty__content"
   >
     <span
-      class="euiButtonEmpty__text"
+      class=""
     >
       <span
         class="euiFilterButton__textShift"
@@ -131,7 +131,7 @@ exports[`EuiFilterButton props numFilters is rendered 1`] = `
     class="euiButtonEmpty__content"
   >
     <span
-      class="euiButtonEmpty__text euiFilterButton__text-hasNotification"
+      class="euiFilterButton__text-hasNotification"
     >
       <span
         class="euiFilterButton__textShift"
@@ -156,7 +156,7 @@ exports[`EuiFilterButton props type is rendered 1`] = `
     class="euiButtonEmpty__content"
   >
     <span
-      class="euiButtonEmpty__text"
+      class=""
     >
       <span
         class="euiFilterButton__textShift"
@@ -175,7 +175,7 @@ exports[`EuiFilterButton props withNext is rendered 1`] = `
     class="euiButtonEmpty__content"
   >
     <span
-      class="euiButtonEmpty__text"
+      class=""
     >
       <span
         class="euiFilterButton__textShift"
@@ -196,7 +196,7 @@ exports[`EuiFilterButton renders zero properly 1`] = `
     class="euiButtonEmpty__content"
   >
     <span
-      class="euiButtonEmpty__text euiFilterButton__text-hasNotification"
+      class="euiFilterButton__text-hasNotification"
     >
       <span
         class="euiFilterButton__textShift"
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..a43917db6aa 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
@@ -21,7 +21,7 @@ exports[`EuiTableSortMobile is rendered 1`] = `
         >
           <div
             aria-hidden="true"
-            class="euiButtonEmpty__icon"
+            class="euiButton__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..a2d4b6d02ed 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
@@ -23,7 +23,7 @@ exports[`EuiTablePagination is rendered 1`] = `
           >
             <div
               aria-hidden="true"
-              class="euiButtonEmpty__icon"
+              class="euiButton__icon"
               data-euiicon-type="arrowDown"
             />
             <span

From 84585b934281fe56c7ac129ca6a2bec08181a0fe Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 8 Jul 2020 12:26:43 -0400
Subject: [PATCH 03/13] Fixing classNames and disabled states

---
 .../in_memory_table.test.tsx.snap             |  4 +--
 .../button/__snapshots__/button.test.tsx.snap |  8 +++---
 src/components/button/_button.scss            | 11 ++------
 src/components/button/button_content.tsx      |  6 +++--
 .../__snapshots__/button_empty.test.tsx.snap  |  6 ++---
 .../button/button_empty/_button_empty.scss    | 15 ++---------
 .../__snapshots__/card_select.test.tsx.snap   |  2 +-
 .../collapsible_nav.test.tsx.snap             | 16 ++++++------
 .../__snapshots__/data_grid.test.tsx.snap     | 26 +++++++++----------
 .../__snapshots__/filter_button.test.tsx.snap |  2 +-
 .../table_sort_mobile.test.tsx.snap           |  2 +-
 .../table_pagination.test.tsx.snap            |  2 +-
 src/global_styling/mixins/_button.scss        | 17 ++++++++++--
 13 files changed, 57 insertions(+), 60 deletions(-)

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 933dc496210..7dd79719728 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
@@ -402,13 +402,13 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                   >
                                     <EuiIcon
                                       aria-hidden="true"
-                                      className="euiButton__icon"
+                                      className="euiButtonContent__icon"
                                       size="m"
                                       type="arrowDown"
                                     >
                                       <div
                                         aria-hidden="true"
-                                        className="euiButton__icon"
+                                        className="euiButtonContent__icon"
                                         data-euiicon-type="arrowDown"
                                         size="m"
                                       />
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index 4df2e87c8ca..906aa8e83b7 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -166,7 +166,7 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
   >
     <div
       aria-hidden="true"
-      class="euiButton__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
@@ -188,7 +188,7 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
   >
     <div
       aria-hidden="true"
-      class="euiButton__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
@@ -210,7 +210,7 @@ exports[`EuiButton props iconType is rendered 1`] = `
   >
     <div
       aria-hidden="true"
-      class="euiButton__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
@@ -262,7 +262,7 @@ exports[`EuiButton props isLoading is rendered 1`] = `
     class="euiButton__content"
   >
     <span
-      class="euiLoadingSpinner euiLoadingSpinner--medium euiButton__spinner"
+      class="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
     />
     <span
       class="euiButton__text"
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 2551d35f3f5..8775997220c 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -44,19 +44,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.tsx b/src/components/button/button_content.tsx
index 442fe84e643..59f3f0937c0 100644
--- a/src/components/button/button_content.tsx
+++ b/src/components/button/button_content.tsx
@@ -47,11 +47,13 @@ export const EuiButtonContent: FunctionComponent<EuiButtonContentProps> = ({
   let buttonIcon;
 
   if (isLoading) {
-    buttonIcon = <EuiLoadingSpinner className="euiButton__spinner" size="m" />;
+    buttonIcon = (
+      <EuiLoadingSpinner className="euiButtonContent__spinner" size="m" />
+    );
   } else if (iconType) {
     buttonIcon = (
       <EuiIcon
-        className="euiButton__icon"
+        className="euiButtonContent__icon"
         type={iconType}
         size="m"
         aria-hidden="true"
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 200cb661e04..fa6316b4150 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
@@ -151,7 +151,7 @@ exports[`EuiButtonEmpty props iconSide left is rendered 1`] = `
   >
     <div
       aria-hidden="true"
-      class="euiButton__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
@@ -173,7 +173,7 @@ exports[`EuiButtonEmpty props iconSide right is rendered 1`] = `
   >
     <div
       aria-hidden="true"
-      class="euiButton__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
@@ -195,7 +195,7 @@ exports[`EuiButtonEmpty props iconType is rendered 1`] = `
   >
     <div
       aria-hidden="true"
-      class="euiButton__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss
index e827dbb1a2d..9622749e383 100644
--- a/src/components/button/button_empty/_button_empty.scss
+++ b/src/components/button/button_empty/_button_empty.scss
@@ -41,22 +41,11 @@
   }
 
   &:disabled {
+    @include euiButtonContentDisabled;
+
     color: $euiButtonColorDisabledText;
     pointer-events: none;
 
-    .euiButtonEmpty__content {
-      pointer-events: auto;
-      cursor: not-allowed;
-    }
-
-    .euiButton__icon {
-      fill: currentColor;
-    }
-
-    .euiButton__spinner {
-      border-color: euiLoadingSpinnerBorderColors(currentColor);
-    }
-
     &:focus {
       background-color: transparent;
     }
diff --git a/src/components/card/__snapshots__/card_select.test.tsx.snap b/src/components/card/__snapshots__/card_select.test.tsx.snap
index 8b7e595109f..6188d390bbe 100644
--- a/src/components/card/__snapshots__/card_select.test.tsx.snap
+++ b/src/components/card/__snapshots__/card_select.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`EuiCardSelect props isSelected 1`] = `
   >
     <div
       aria-hidden="true"
-      class="euiButton__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 411a6c86c82..0ce5ea93a5a 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -62,7 +62,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
@@ -117,7 +117,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
@@ -174,7 +174,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
@@ -225,7 +225,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
@@ -276,7 +276,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
@@ -325,7 +325,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
         >
           <div
             aria-hidden="true"
-            class="euiButton__icon"
+            class="euiButtonContent__icon"
             data-euiicon-type="cross"
           />
           <span
@@ -375,7 +375,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
@@ -431,7 +431,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 48dcc0f4cbc..d641d696ac3 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
           >
             <div
               aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="arrowDown"
             />
             <span
@@ -208,7 +208,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButton__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -237,7 +237,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButton__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -259,7 +259,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -749,7 +749,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButton__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -778,7 +778,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButton__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -800,7 +800,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -1611,7 +1611,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButton__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -1640,7 +1640,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButton__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -1662,7 +1662,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -2151,7 +2151,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButton__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -2180,7 +2180,7 @@ Array [
               >
                 <div
                   aria-hidden="true"
-                  class="euiButton__icon"
+                  class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -2202,7 +2202,7 @@ Array [
           >
             <div
               aria-hidden="true"
-              class="euiButton__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 7eae037926a..1939f6b8f3c 100644
--- a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
+++ b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`EuiFilterButton props iconType and iconSide is rendered 1`] = `
   >
     <div
       aria-hidden="true"
-      class="euiButton__icon"
+      class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
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 a43917db6aa..05ca64b7f69 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
@@ -21,7 +21,7 @@ exports[`EuiTableSortMobile is rendered 1`] = `
         >
           <div
             aria-hidden="true"
-            class="euiButton__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 a2d4b6d02ed..802f7b4a44c 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
@@ -23,7 +23,7 @@ exports[`EuiTablePagination is rendered 1`] = `
           >
             <div
               aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="arrowDown"
             />
             <span
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

From 2a45dca593591d63b601ddc08f1fa1e087319d13 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 8 Jul 2020 15:03:10 -0400
Subject: [PATCH 04/13] Create EuiButtonDisplay for internal usage

---
 .../__snapshots__/skip_link.test.tsx.snap     |  24 +-
 .../in_memory_table.test.tsx.snap             |   2 -
 .../button/__snapshots__/button.test.tsx.snap |   9 +-
 src/components/button/_button_content.scss    |   6 +-
 src/components/button/button.tsx              | 145 +++++----
 src/components/button/button_content.tsx      |  28 +-
 .../__snapshots__/button_empty.test.tsx.snap  |   3 -
 .../__snapshots__/button_group.test.tsx.snap  |   6 +-
 .../__snapshots__/card_select.test.tsx.snap   |   1 -
 .../collapsible_nav.test.tsx.snap             |   8 -
 .../__snapshots__/control_bar.test.tsx.snap   | 280 +++++++++++-------
 .../__snapshots__/data_grid.test.tsx.snap     |  13 -
 .../__snapshots__/filter_button.test.tsx.snap |   1 -
 .../table_sort_mobile.test.tsx.snap           |   1 -
 .../table_pagination.test.tsx.snap            |   1 -
 15 files changed, 305 insertions(+), 223 deletions(-)

diff --git a/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap b/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap
index 8d73fa7dd02..6ffb3121b91 100644
--- a/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap
+++ b/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiSkipLink is rendered 1`] = `
-<a
+<label
   aria-label="aria-label"
   class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static testClass1 testClass2 euiButton--fill"
   data-test-subj="test subject string"
@@ -17,11 +17,11 @@ exports[`EuiSkipLink is rendered 1`] = `
       Skip
     </span>
   </span>
-</a>
+</label>
 `;
 
 exports[`EuiSkipLink props onClick is rendered 1`] = `
-<a
+<label
   class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static euiButton--fill"
   href="#somewhere"
   rel="noreferrer"
@@ -33,11 +33,11 @@ exports[`EuiSkipLink props onClick is rendered 1`] = `
       class="euiButton__text"
     />
   </span>
-</a>
+</label>
 `;
 
 exports[`EuiSkipLink props position absolute is rendered 1`] = `
-<a
+<label
   class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--absolute euiButton--fill"
   href="#somewhere"
   rel="noreferrer"
@@ -49,11 +49,11 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = `
       class="euiButton__text"
     />
   </span>
-</a>
+</label>
 `;
 
 exports[`EuiSkipLink props position fixed is rendered 1`] = `
-<a
+<label
   class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--fixed euiButton--fill"
   href="#somewhere"
   rel="noreferrer"
@@ -66,11 +66,11 @@ exports[`EuiSkipLink props position fixed is rendered 1`] = `
       class="euiButton__text"
     />
   </span>
-</a>
+</label>
 `;
 
 exports[`EuiSkipLink props position static is rendered 1`] = `
-<a
+<label
   class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static euiButton--fill"
   href="#somewhere"
   rel="noreferrer"
@@ -82,11 +82,11 @@ exports[`EuiSkipLink props position static is rendered 1`] = `
       class="euiButton__text"
     />
   </span>
-</a>
+</label>
 `;
 
 exports[`EuiSkipLink props tabIndex is rendered 1`] = `
-<a
+<label
   class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static euiButton--fill"
   href="#somewhere"
   rel="noreferrer"
@@ -99,5 +99,5 @@ exports[`EuiSkipLink props tabIndex is rendered 1`] = `
       class="euiButton__text"
     />
   </span>
-</a>
+</label>
 `;
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 7dd79719728..4da5297c85d 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
@@ -401,13 +401,11 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                     className="euiButtonEmpty__content"
                                   >
                                     <EuiIcon
-                                      aria-hidden="true"
                                       className="euiButtonContent__icon"
                                       size="m"
                                       type="arrowDown"
                                     >
                                       <div
-                                        aria-hidden="true"
                                         className="euiButtonContent__icon"
                                         data-euiicon-type="arrowDown"
                                         size="m"
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index 906aa8e83b7..a7a1b00a36f 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -165,7 +165,6 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
     class="euiButton__content"
   >
     <div
-      aria-hidden="true"
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
@@ -187,7 +186,6 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
     class="euiButton__content"
   >
     <div
-      aria-hidden="true"
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
@@ -209,7 +207,6 @@ exports[`EuiButton props iconType is rendered 1`] = `
     class="euiButton__content"
   >
     <div
-      aria-hidden="true"
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
@@ -222,7 +219,7 @@ 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"
 >
@@ -238,7 +235,7 @@ 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"
 >
@@ -254,7 +251,7 @@ 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"
 >
diff --git a/src/components/button/_button_content.scss b/src/components/button/_button_content.scss
index 52b4111fbbd..35e845f755d 100644
--- a/src/components/button/_button_content.scss
+++ b/src/components/button/_button_content.scss
@@ -1,3 +1,3 @@
-// .euiButtonContent {
-
-// }
+.euiButtonContent--iconRight {
+  @include euiButtonContent($isReverse: true);
+}
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 1144ddfb79f..3f744ff4787 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -101,6 +101,86 @@ export interface EuiButtonProps extends CommonProps {
   textProps?: HTMLAttributes<HTMLSpanElement>;
 }
 
+export interface EuiButtonDisplayProps extends EuiButtonProps {
+  element: 'a' | 'button' | 'label';
+}
+
+/**
+ *
+ * *INTERNAL ONLY* Component for displaying any element as a button
+ */
+const EuiButtonDisplay = React.forwardRef<
+  HTMLAnchorElement | HTMLButtonElement | HTMLLabelElement,
+  EuiButtonDisplayProps
+>(
+  (
+    {
+      children,
+      className,
+      iconType,
+      iconSide = 'left',
+      color = 'primary',
+      size = 'm',
+      fill = false,
+      isDisabled,
+      isLoading,
+      contentProps,
+      textProps,
+      fullWidth,
+      element: Element = 'button',
+      ...rest
+    },
+    ref
+  ) => {
+    // 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,
+        '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}
+        textProps={{ className: textClassNames, ...textProps }}
+        {...contentProps}
+        // className has to come last to override contentProps.className
+        className={contentClassNames}>
+        {children}
+      </EuiButtonContent>
+    );
+
+    return (
+      <Element className={classes} disabled={isDisabled} ref={ref} {...rest}>
+        {innerNode}
+      </Element>
+    );
+  }
+);
+
+EuiButtonDisplay.displayName = 'EuiButtonDisplay';
+export { EuiButtonDisplay };
+
 type EuiButtonPropsForAnchor = PropsForAnchor<
   EuiButtonProps,
   {
@@ -121,65 +201,19 @@ 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
-  );
-
-  const innerNode = (
-    <EuiButtonContent
-      isLoading={isLoading}
-      iconType={iconType}
-      textProps={{ className: textClassNames, ...textProps }}
-      {...contentProps}
-      // className has to come last to override contentProps.className
-      className={contentClassNames}>
-      {children}
-    </EuiButtonContent>
-  );
-
+  const buttonIsDisabled = isDisabled || disabled;
   // <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 element = href && !isDisabled ? 'a' : 'button';
 
   const relObj: {
     rel?: string;
@@ -188,7 +222,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;
@@ -197,13 +231,12 @@ export const EuiButton: FunctionComponent<Props> = ({
   }
 
   return (
-    <Element
-      className={classes}
-      disabled={isDisabled}
+    <EuiButtonDisplay
+      element={element}
+      isDisabled={buttonIsDisabled}
       {...relObj}
       ref={buttonRef as Ref<HTMLButtonElement & HTMLAnchorElement>}
-      {...rest as HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>}>
-      {innerNode}
-    </Element>
+      {...rest as HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>}
+    />
   );
 };
diff --git a/src/components/button/button_content.tsx b/src/components/button/button_content.tsx
index 59f3f0937c0..8897d6e8672 100644
--- a/src/components/button/button_content.tsx
+++ b/src/components/button/button_content.tsx
@@ -22,13 +22,24 @@
  */
 
 import React, { HTMLAttributes, FunctionComponent } from 'react';
-import { CommonProps } from '../common';
+import classNames from 'classnames';
+import { CommonProps, keysOf } from '../common';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiIcon, IconType } from '../icon';
 
+export type ButtonIconSide = 'left' | 'right';
+
+const iconSideToClassNameMap: { [side in ButtonIconSide]: string | null } = {
+  left: null,
+  right: 'euiButtonContent--iconRight',
+};
+
+export const ICON_SIDES = keysOf(iconSideToClassNameMap);
+
 export type EuiButtonContentProps = HTMLAttributes<HTMLSpanElement> &
   CommonProps & {
     iconType?: IconType;
+    iconSide?: ButtonIconSide;
     isLoading?: boolean;
     /**
      * Object of props passed to the <span/> wrapping the component's {children}
@@ -41,6 +52,7 @@ export const EuiButtonContent: FunctionComponent<EuiButtonContentProps> = ({
   textProps,
   isLoading,
   iconType,
+  iconSide,
   ...contentProps
 }) => {
   // Add an icon to the button if one exists.
@@ -52,17 +64,17 @@ export const EuiButtonContent: FunctionComponent<EuiButtonContentProps> = ({
     );
   } else if (iconType) {
     buttonIcon = (
-      <EuiIcon
-        className="euiButtonContent__icon"
-        type={iconType}
-        size="m"
-        aria-hidden="true"
-      />
+      <EuiIcon className="euiButtonContent__icon" type={iconType} size="m" />
     );
   }
 
+  const contentClassNames = classNames(
+    iconSide ? iconSideToClassNameMap[iconSide] : null,
+    contentProps && contentProps.className
+  );
+
   return (
-    <span {...contentProps}>
+    <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 fa6316b4150..1243612b2a7 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
@@ -150,7 +150,6 @@ exports[`EuiButtonEmpty props iconSide left is rendered 1`] = `
     class="euiButtonEmpty__content"
   >
     <div
-      aria-hidden="true"
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
@@ -172,7 +171,6 @@ exports[`EuiButtonEmpty props iconSide right is rendered 1`] = `
     class="euiButtonEmpty__content"
   >
     <div
-      aria-hidden="true"
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
@@ -194,7 +192,6 @@ exports[`EuiButtonEmpty props iconType is rendered 1`] = `
     class="euiButtonEmpty__content"
   >
     <div
-      aria-hidden="true"
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
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..84035fa60a2 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
@@ -920,7 +920,7 @@ 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"
@@ -948,7 +948,7 @@ 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"
@@ -976,7 +976,7 @@ 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"
diff --git a/src/components/card/__snapshots__/card_select.test.tsx.snap b/src/components/card/__snapshots__/card_select.test.tsx.snap
index 6188d390bbe..39be643ac00 100644
--- a/src/components/card/__snapshots__/card_select.test.tsx.snap
+++ b/src/components/card/__snapshots__/card_select.test.tsx.snap
@@ -90,7 +90,6 @@ exports[`EuiCardSelect props isSelected 1`] = `
     class="euiButtonEmpty__content"
   >
     <div
-      aria-hidden="true"
       class="euiButtonContent__icon"
       data-euiicon-type="check"
     />
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 0ce5ea93a5a..da1e5146a69 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -61,7 +61,6 @@ Array [
             class="euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
@@ -116,7 +115,6 @@ Array [
             class="euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
@@ -173,7 +171,6 @@ Array [
             class="euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
@@ -224,7 +221,6 @@ Array [
             class="euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
@@ -275,7 +271,6 @@ Array [
             class="euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
@@ -324,7 +319,6 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
           class="euiButtonEmpty__content"
         >
           <div
-            aria-hidden="true"
             class="euiButtonContent__icon"
             data-euiicon-type="cross"
           />
@@ -374,7 +368,6 @@ Array [
             class="euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
@@ -430,7 +423,6 @@ Array [
             class="euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
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 7e9bb551ace..e5ec8d271cd 100644
--- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
+++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
@@ -299,31 +299,41 @@ 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"
               >
-                <EuiButtonContent
-                  className="euiButton__content"
-                  textProps={
-                    Object {
-                      "className": "euiButton__text",
-                    }
-                  }
+                <button
+                  className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+                  data-test-subj="dts"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <span
+                  <EuiButtonContent
                     className="euiButton__content"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
                     <span
-                      className="euiButton__text"
+                      className="euiButton__content"
                     >
-                      Sound the Alarm
+                      <span
+                        className="euiButton__text"
+                      >
+                        Sound the Alarm
+                      </span>
                     </span>
-                  </span>
-                </EuiButtonContent>
-              </button>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
             </EuiButton>
             <div
               className="euiControlBar__text"
@@ -603,31 +613,41 @@ 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"
               >
-                <EuiButtonContent
-                  className="euiButton__content"
-                  textProps={
-                    Object {
-                      "className": "euiButton__text",
-                    }
-                  }
+                <button
+                  className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+                  data-test-subj="dts"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <span
+                  <EuiButtonContent
                     className="euiButton__content"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
                     <span
-                      className="euiButton__text"
+                      className="euiButton__content"
                     >
-                      Sound the Alarm
+                      <span
+                        className="euiButton__text"
+                      >
+                        Sound the Alarm
+                      </span>
                     </span>
-                  </span>
-                </EuiButtonContent>
-              </button>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
             </EuiButton>
             <div
               className="euiControlBar__text"
@@ -906,31 +926,41 @@ 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"
               >
-                <EuiButtonContent
-                  className="euiButton__content"
-                  textProps={
-                    Object {
-                      "className": "euiButton__text",
-                    }
-                  }
+                <button
+                  className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+                  data-test-subj="dts"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <span
+                  <EuiButtonContent
                     className="euiButton__content"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
                     <span
-                      className="euiButton__text"
+                      className="euiButton__content"
                     >
-                      Sound the Alarm
+                      <span
+                        className="euiButton__text"
+                      >
+                        Sound the Alarm
+                      </span>
                     </span>
-                  </span>
-                </EuiButtonContent>
-              </button>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
             </EuiButton>
             <div
               className="euiControlBar__text"
@@ -1122,31 +1152,41 @@ 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"
           >
-            <EuiButtonContent
-              className="euiButton__content"
-              textProps={
-                Object {
-                  "className": "euiButton__text",
-                }
-              }
+            <button
+              className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+              data-test-subj="dts"
+              onClick={[Function]}
+              type="button"
             >
-              <span
+              <EuiButtonContent
                 className="euiButton__content"
+                textProps={
+                  Object {
+                    "className": "euiButton__text",
+                  }
+                }
               >
                 <span
-                  className="euiButton__text"
+                  className="euiButton__content"
                 >
-                  Sound the Alarm
+                  <span
+                    className="euiButton__text"
+                  >
+                    Sound the Alarm
+                  </span>
                 </span>
-              </span>
-            </EuiButtonContent>
-          </button>
+              </EuiButtonContent>
+            </button>
+          </EuiButtonDisplay>
         </EuiButton>
         <div
           className="euiControlBar__text"
@@ -1410,31 +1450,41 @@ 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"
               >
-                <EuiButtonContent
-                  className="euiButton__content"
-                  textProps={
-                    Object {
-                      "className": "euiButton__text",
-                    }
-                  }
+                <button
+                  className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+                  data-test-subj="dts"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <span
+                  <EuiButtonContent
                     className="euiButton__content"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
                     <span
-                      className="euiButton__text"
+                      className="euiButton__content"
                     >
-                      Sound the Alarm
+                      <span
+                        className="euiButton__text"
+                      >
+                        Sound the Alarm
+                      </span>
                     </span>
-                  </span>
-                </EuiButtonContent>
-              </button>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
             </EuiButton>
             <div
               className="euiControlBar__text"
@@ -1718,31 +1768,41 @@ 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"
               >
-                <EuiButtonContent
-                  className="euiButton__content"
-                  textProps={
-                    Object {
-                      "className": "euiButton__text",
-                    }
-                  }
+                <button
+                  className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+                  data-test-subj="dts"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <span
+                  <EuiButtonContent
                     className="euiButton__content"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
                     <span
-                      className="euiButton__text"
+                      className="euiButton__content"
                     >
-                      Sound the Alarm
+                      <span
+                        className="euiButton__text"
+                      >
+                        Sound the Alarm
+                      </span>
                     </span>
-                  </span>
-                </EuiButtonContent>
-              </button>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
             </EuiButton>
             <div
               className="euiControlBar__text"
@@ -2026,31 +2086,41 @@ 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"
               >
-                <EuiButtonContent
-                  className="euiButton__content"
-                  textProps={
-                    Object {
-                      "className": "euiButton__text",
-                    }
-                  }
+                <button
+                  className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
+                  data-test-subj="dts"
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <span
+                  <EuiButtonContent
                     className="euiButton__content"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
                     <span
-                      className="euiButton__text"
+                      className="euiButton__content"
                     >
-                      Sound the Alarm
+                      <span
+                        className="euiButton__text"
+                      >
+                        Sound the Alarm
+                      </span>
                     </span>
-                  </span>
-                </EuiButtonContent>
-              </button>
+                  </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 d641d696ac3..9059df63730 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -62,7 +62,6 @@ exports[`EuiDataGrid pagination renders 1`] = `
             class="euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
               class="euiButtonContent__icon"
               data-euiicon-type="arrowDown"
             />
@@ -207,7 +206,6 @@ Array [
                 class="euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
                   class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
@@ -236,7 +234,6 @@ Array [
                 class="euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
                   class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
@@ -258,7 +255,6 @@ Array [
             class="euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
               class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
@@ -748,7 +744,6 @@ Array [
                 class="euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
                   class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
@@ -777,7 +772,6 @@ Array [
                 class="euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
                   class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
@@ -799,7 +793,6 @@ Array [
             class="euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
               class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
@@ -1610,7 +1603,6 @@ Array [
                 class="euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
                   class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
@@ -1639,7 +1631,6 @@ Array [
                 class="euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
                   class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
@@ -1661,7 +1652,6 @@ Array [
             class="euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
               class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
@@ -2150,7 +2140,6 @@ Array [
                 class="euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
                   class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
@@ -2179,7 +2168,6 @@ Array [
                 class="euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
                   class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
@@ -2201,7 +2189,6 @@ Array [
             class="euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
               class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
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 1939f6b8f3c..1317dc07240 100644
--- a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
+++ b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
@@ -49,7 +49,6 @@ exports[`EuiFilterButton props iconType and iconSide is rendered 1`] = `
     class="euiButtonEmpty__content"
   >
     <div
-      aria-hidden="true"
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
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 05ca64b7f69..1360ce7cf62 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
@@ -20,7 +20,6 @@ exports[`EuiTableSortMobile is rendered 1`] = `
           class="euiButtonEmpty__content"
         >
           <div
-            aria-hidden="true"
             class="euiButtonContent__icon"
             data-euiicon-type="arrowDown"
           />
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 802f7b4a44c..09c1618ca91 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
@@ -22,7 +22,6 @@ exports[`EuiTablePagination is rendered 1`] = `
             class="euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
               class="euiButtonContent__icon"
               data-euiicon-type="arrowDown"
             />

From cf41154314044c162c82a62d95a6745e1af0e87e Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 8 Jul 2020 15:05:46 -0400
Subject: [PATCH 05/13] Fix snaps

---
 .../__snapshots__/skip_link.test.tsx.snap     | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap b/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap
index 6ffb3121b91..8d73fa7dd02 100644
--- a/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap
+++ b/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiSkipLink is rendered 1`] = `
-<label
+<a
   aria-label="aria-label"
   class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static testClass1 testClass2 euiButton--fill"
   data-test-subj="test subject string"
@@ -17,11 +17,11 @@ exports[`EuiSkipLink is rendered 1`] = `
       Skip
     </span>
   </span>
-</label>
+</a>
 `;
 
 exports[`EuiSkipLink props onClick is rendered 1`] = `
-<label
+<a
   class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static euiButton--fill"
   href="#somewhere"
   rel="noreferrer"
@@ -33,11 +33,11 @@ exports[`EuiSkipLink props onClick is rendered 1`] = `
       class="euiButton__text"
     />
   </span>
-</label>
+</a>
 `;
 
 exports[`EuiSkipLink props position absolute is rendered 1`] = `
-<label
+<a
   class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--absolute euiButton--fill"
   href="#somewhere"
   rel="noreferrer"
@@ -49,11 +49,11 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = `
       class="euiButton__text"
     />
   </span>
-</label>
+</a>
 `;
 
 exports[`EuiSkipLink props position fixed is rendered 1`] = `
-<label
+<a
   class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--fixed euiButton--fill"
   href="#somewhere"
   rel="noreferrer"
@@ -66,11 +66,11 @@ exports[`EuiSkipLink props position fixed is rendered 1`] = `
       class="euiButton__text"
     />
   </span>
-</label>
+</a>
 `;
 
 exports[`EuiSkipLink props position static is rendered 1`] = `
-<label
+<a
   class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static euiButton--fill"
   href="#somewhere"
   rel="noreferrer"
@@ -82,11 +82,11 @@ exports[`EuiSkipLink props position static is rendered 1`] = `
       class="euiButton__text"
     />
   </span>
-</label>
+</a>
 `;
 
 exports[`EuiSkipLink props tabIndex is rendered 1`] = `
-<label
+<a
   class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static euiButton--fill"
   href="#somewhere"
   rel="noreferrer"
@@ -99,5 +99,5 @@ exports[`EuiSkipLink props tabIndex is rendered 1`] = `
       class="euiButton__text"
     />
   </span>
-</label>
+</a>
 `;

From ef8b023229639b8467833e9d563ece002cb99342 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 13 Jul 2020 13:22:04 -0700
Subject: [PATCH 06/13] ts gymnastics

---
 src/components/button/button.tsx | 38 ++++++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 3f744ff4787..e4150e8d4f7 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -170,11 +170,35 @@ const EuiButtonDisplay = React.forwardRef<
       </EuiButtonContent>
     );
 
-    return (
-      <Element className={classes} disabled={isDisabled} ref={ref} {...rest}>
-        {innerNode}
-      </Element>
-    );
+    if (Element === 'label') {
+      return (
+        <Element
+          className={classes}
+          ref={ref as Ref<HTMLLabelElement>}
+          {...rest as HTMLAttributes<HTMLLabelElement>}>
+          {innerNode}
+        </Element>
+      );
+    } else if (Element === 'a') {
+      return (
+        <Element
+          className={classes}
+          ref={ref as Ref<HTMLAnchorElement>}
+          {...rest as HTMLAttributes<HTMLAnchorElement>}>
+          {innerNode}
+        </Element>
+      );
+    } else {
+      return (
+        <Element
+          className={classes}
+          disabled={isDisabled}
+          ref={ref as Ref<HTMLButtonElement>}
+          {...rest as HTMLAttributes<HTMLButtonElement>}>
+          {innerNode}
+        </Element>
+      );
+    }
   }
 );
 
@@ -235,8 +259,8 @@ export const EuiButton: FunctionComponent<Props> = ({
       element={element}
       isDisabled={buttonIsDisabled}
       {...relObj}
-      ref={buttonRef as Ref<HTMLButtonElement & HTMLAnchorElement>}
-      {...rest as HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>}
+      ref={buttonRef}
+      {...rest}
     />
   );
 };

From 9ffe4305a29232dd8b2907a8fe52bcbf2c20ba95 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 13 Jul 2020 13:29:12 -0700
Subject: [PATCH 07/13] clean up

---
 src/components/button/button.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index e4150e8d4f7..3e5b156cd25 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -175,7 +175,7 @@ const EuiButtonDisplay = React.forwardRef<
         <Element
           className={classes}
           ref={ref as Ref<HTMLLabelElement>}
-          {...rest as HTMLAttributes<HTMLLabelElement>}>
+          {...rest}>
           {innerNode}
         </Element>
       );
@@ -184,7 +184,7 @@ const EuiButtonDisplay = React.forwardRef<
         <Element
           className={classes}
           ref={ref as Ref<HTMLAnchorElement>}
-          {...rest as HTMLAttributes<HTMLAnchorElement>}>
+          {...rest}>
           {innerNode}
         </Element>
       );
@@ -194,7 +194,7 @@ const EuiButtonDisplay = React.forwardRef<
           className={classes}
           disabled={isDisabled}
           ref={ref as Ref<HTMLButtonElement>}
-          {...rest as HTMLAttributes<HTMLButtonElement>}>
+          {...rest}>
           {innerNode}
         </Element>
       );

From 3a718ea9f2390fb9e098c9b9a18e3985b849f540 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 13 Jul 2020 15:33:59 -0700
Subject: [PATCH 08/13] generic display comopnent

---
 src/components/button/button.tsx | 50 ++++++++++----------------------
 1 file changed, 15 insertions(+), 35 deletions(-)

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 3e5b156cd25..dd265f5fe86 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -102,7 +102,7 @@ export interface EuiButtonProps extends CommonProps {
 }
 
 export interface EuiButtonDisplayProps extends EuiButtonProps {
-  element: 'a' | 'button' | 'label';
+  element: keyof JSX.IntrinsicElements;
 }
 
 /**
@@ -132,9 +132,6 @@ const EuiButtonDisplay = React.forwardRef<
     },
     ref
   ) => {
-    // If in the loading state, force disabled to true
-    isDisabled = isLoading ? true : isDisabled;
-
     const classes = classNames(
       'euiButton',
       color ? colorToClassNameMap[color] : null,
@@ -170,35 +167,12 @@ const EuiButtonDisplay = React.forwardRef<
       </EuiButtonContent>
     );
 
-    if (Element === 'label') {
-      return (
-        <Element
-          className={classes}
-          ref={ref as Ref<HTMLLabelElement>}
-          {...rest}>
-          {innerNode}
-        </Element>
-      );
-    } else if (Element === 'a') {
-      return (
-        <Element
-          className={classes}
-          ref={ref as Ref<HTMLAnchorElement>}
-          {...rest}>
-          {innerNode}
-        </Element>
-      );
-    } else {
-      return (
-        <Element
-          className={classes}
-          disabled={isDisabled}
-          ref={ref as Ref<HTMLButtonElement>}
-          {...rest}>
-          {innerNode}
-        </Element>
-      );
-    }
+    return (
+      // @ts-ignore difficult to verify `rest` applied to `Element`
+      <Element className={classes} ref={ref} {...rest}>
+        {innerNode}
+      </Element>
+    );
   }
 );
 
@@ -234,11 +208,17 @@ export const EuiButton: FunctionComponent<Props> = ({
   buttonRef,
   ...rest
 }) => {
-  const buttonIsDisabled = isDisabled || disabled;
+  const buttonIsDisabled = rest.isLoading || isDisabled || disabled;
   // <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';
 
+  let elementProps = {};
+  elementProps = { ...elementProps, isDisabled: buttonIsDisabled };
+  if (element === 'button') {
+    elementProps = { ...elementProps, disabled: buttonIsDisabled };
+  }
+
   const relObj: {
     rel?: string;
     href?: string;
@@ -257,7 +237,7 @@ export const EuiButton: FunctionComponent<Props> = ({
   return (
     <EuiButtonDisplay
       element={element}
-      isDisabled={buttonIsDisabled}
+      {...elementProps}
       {...relObj}
       ref={buttonRef}
       {...rest}

From d109ab1b2503d258b48c78528f59c38e3f801acb Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 14 Jul 2020 08:49:19 -0700
Subject: [PATCH 09/13] createElement; comments

---
 src/components/button/button.tsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index dd265f5fe86..0652e58da6a 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -108,11 +108,10 @@ export interface EuiButtonDisplayProps extends EuiButtonProps {
 /**
  *
  * *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<
-  HTMLAnchorElement | HTMLButtonElement | HTMLLabelElement,
-  EuiButtonDisplayProps
->(
+const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
   (
     {
       children,
@@ -127,7 +126,7 @@ const EuiButtonDisplay = React.forwardRef<
       contentProps,
       textProps,
       fullWidth,
-      element: Element = 'button',
+      element = 'button',
       ...rest
     },
     ref
@@ -167,11 +166,14 @@ const EuiButtonDisplay = React.forwardRef<
       </EuiButtonContent>
     );
 
-    return (
-      // @ts-ignore difficult to verify `rest` applied to `Element`
-      <Element className={classes} ref={ref} {...rest}>
-        {innerNode}
-      </Element>
+    return React.createElement(
+      element,
+      {
+        className: classes,
+        ref,
+        ...rest,
+      },
+      innerNode
     );
   }
 );
@@ -209,12 +211,12 @@ export const EuiButton: FunctionComponent<Props> = ({
   ...rest
 }) => {
   const buttonIsDisabled = rest.isLoading || isDisabled || disabled;
-  // <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';
 
   let elementProps = {};
+  // Props for all elements
   elementProps = { ...elementProps, isDisabled: buttonIsDisabled };
+  // Element-specific attributes
   if (element === 'button') {
     elementProps = { ...elementProps, disabled: buttonIsDisabled };
   }

From 1f2357be62445d8e2a60c113363755e6d11e90cc Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 14 Jul 2020 13:28:41 -0400
Subject: [PATCH 10/13] Added tests for EuiButtonContent

---
 .../button_content.test.tsx.snap              | 68 +++++++++++++++++++
 src/components/button/button.tsx              |  4 +-
 src/components/button/button_content.test.tsx | 40 +++++++++++
 src/components/button/button_content.tsx      |  8 +--
 4 files changed, 114 insertions(+), 6 deletions(-)

diff --git a/src/components/button/__snapshots__/button_content.test.tsx.snap b/src/components/button/__snapshots__/button_content.test.tsx.snap
index ea381903066..ec8bfbbac59 100644
--- a/src/components/button/__snapshots__/button_content.test.tsx.snap
+++ b/src/components/button/__snapshots__/button_content.test.tsx.snap
@@ -9,3 +9,71 @@ exports[`EuiButtonContent is rendered 1`] = `
   <span />
 </span>
 `;
+
+exports[`EuiButtonContent props children is rendered 1`] = `
+<span
+  class=""
+>
+  <span>
+    Content
+  </span>
+</span>
+`;
+
+exports[`EuiButtonContent props iconSide is rendered 1`] = `
+<span
+  class="euiButtonContent--iconRight"
+>
+  <div
+    class="euiButtonContent__icon"
+    data-euiicon-type="bolt"
+  />
+  <span />
+</span>
+`;
+
+exports[`EuiButtonContent props iconType is rendered 1`] = `
+<span
+  class=""
+>
+  <div
+    class="euiButtonContent__icon"
+    data-euiicon-type="bolt"
+  />
+  <span />
+</span>
+`;
+
+exports[`EuiButtonContent props isLoading is rendered 1`] = `
+<span
+  class=""
+>
+  <span
+    class="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
+  />
+  <span />
+</span>
+`;
+
+exports[`EuiButtonContent props isLoading replaces iconType with spinner 1`] = `
+<span
+  class=""
+>
+  <span
+    class="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
+  />
+  <span />
+</span>
+`;
+
+exports[`EuiButtonContent props textProps is rendered 1`] = `
+<span
+  class=""
+>
+  <span
+    aria-label="aria-label"
+    class="testClass1 testClass2"
+    data-test-subj="test subject string"
+  />
+</span>
+`;
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 0652e58da6a..3ad6f9ded41 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -106,8 +106,8 @@ export interface EuiButtonDisplayProps extends EuiButtonProps {
 }
 
 /**
- *
- * *INTERNAL ONLY* Component for displaying any element as a button
+ * *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
  */
diff --git a/src/components/button/button_content.test.tsx b/src/components/button/button_content.test.tsx
index 07a8b446710..296c6960db1 100644
--- a/src/components/button/button_content.test.tsx
+++ b/src/components/button/button_content.test.tsx
@@ -29,4 +29,44 @@ describe('EuiButtonContent', () => {
 
     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
index 8897d6e8672..8e54e2d1f85 100644
--- a/src/components/button/button_content.tsx
+++ b/src/components/button/button_content.tsx
@@ -17,10 +17,6 @@
  * under the License.
  */
 
-/**
- * This component is simply a helper component for reuse within other button components
- */
-
 import React, { HTMLAttributes, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { CommonProps, keysOf } from '../common';
@@ -36,6 +32,10 @@ const iconSideToClassNameMap: { [side in ButtonIconSide]: string | null } = {
 
 export const ICON_SIDES = keysOf(iconSideToClassNameMap);
 
+/**
+ * *INTERNAL ONLY*
+ * This component is simply a helper component for reuse within other button components
+ */
 export type EuiButtonContentProps = HTMLAttributes<HTMLSpanElement> &
   CommonProps & {
     iconType?: IconType;

From a922012d3c8a9efd4bca4aacb2eed427cefa48e9 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 14 Jul 2020 13:32:33 -0400
Subject: [PATCH 11/13] cl

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4af6dd7741b..2db524489ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Removed `src/test` and `@types/enzyme` references from `eui.d.ts` ([#3715](https://github.com/elastic/eui/pull/3715))
 - 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))
+- 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))

From 84b61d2d3c97e432146992522c8f00c4f6a338c3 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 14 Jul 2020 16:37:39 -0400
Subject: [PATCH 12/13] More optimization

- Extend EuiButtonContentProps
- Content styles are in button_content.scss
---
 .../__snapshots__/skip_link.test.tsx.snap     |  12 +-
 .../in_memory_table.test.tsx.snap             |  13 +-
 .../button/__snapshots__/button.test.tsx.snap |  92 +++++++++++---
 .../button_content.test.tsx.snap              |  14 +--
 src/components/button/_button.scss            |   8 --
 src/components/button/_button_content.scss    |   4 +
 src/components/button/_index.scss             |   1 +
 src/components/button/button.test.tsx         |  25 +++-
 src/components/button/button.tsx              |  60 +++++-----
 src/components/button/button_content.tsx      |  36 +++---
 .../__snapshots__/button_empty.test.tsx.snap  | 113 ++++++++++++++----
 .../button/button_empty/_button_empty.scss    |   7 --
 .../button/button_empty/button_empty.test.tsx |  39 ++++--
 .../button/button_empty/button_empty.tsx      |  67 ++++++-----
 src/components/button/button_empty/index.ts   |   1 -
 .../__snapshots__/button_group.test.tsx.snap  | 110 ++++++++---------
 .../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   |  12 +-
 .../collapsible_nav.test.tsx.snap             |  32 ++---
 .../__snapshots__/control_bar.test.tsx.snap   |  35 +++---
 .../__snapshots__/data_grid.test.tsx.snap     |  34 +++---
 .../__snapshots__/filter_button.test.tsx.snap |  60 +++++-----
 .../__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           |   4 +-
 .../table_pagination.test.tsx.snap            |  28 ++---
 31 files changed, 509 insertions(+), 324 deletions(-)

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 4da5297c85d..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,13 +383,14 @@ 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"
                               >
                                 <EuiButtonContent
                                   className="euiButtonEmpty__content"
+                                  iconSide="right"
                                   iconType="arrowDown"
                                   textProps={
                                     Object {
@@ -398,7 +399,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                   }
                                 >
                                   <span
-                                    className="euiButtonEmpty__content"
+                                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                   >
                                     <EuiIcon
                                       className="euiButtonContent__icon"
@@ -555,6 +556,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                       >
                                         <EuiButtonContent
                                           className="euiButtonEmpty__content"
+                                          iconSide="left"
                                           textProps={
                                             Object {
                                               "className": "euiButtonEmpty__text",
@@ -562,7 +564,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                           }
                                         >
                                           <span
-                                            className="euiButtonEmpty__content"
+                                            className="euiButtonContent euiButtonEmpty__content"
                                           >
                                             <span
                                               className="euiButtonEmpty__text"
@@ -628,7 +630,7 @@ 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]}
@@ -636,6 +638,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                       >
                                         <EuiButtonContent
                                           className="euiButtonEmpty__content"
+                                          iconSide="left"
                                           textProps={
                                             Object {
                                               "className": "euiButtonEmpty__text",
@@ -643,7 +646,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                           }
                                         >
                                           <span
-                                            className="euiButtonEmpty__content"
+                                            className="euiButtonContent euiButtonEmpty__content"
                                           >
                                             <span
                                               className="euiButtonEmpty__text"
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index a7a1b00a36f..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,7 +181,7 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <div
       class="euiButtonContent__icon"
@@ -179,11 +198,11 @@ 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
       class="euiButtonContent__icon"
@@ -204,7 +223,7 @@ exports[`EuiButton props iconType is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <div
       class="euiButtonContent__icon"
@@ -224,7 +243,7 @@ exports[`EuiButton props isDisabled is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -240,7 +259,23 @@ exports[`EuiButton props isDisabled renders a button even when href is defined 1
   type="button"
 >
   <span
-    class="euiButton__content"
+    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="euiButtonContent euiButton__content"
   >
     <span
       class="euiButton__text"
@@ -256,7 +291,7 @@ exports[`EuiButton props isLoading is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButton__content"
+    class="euiButtonContent euiButton__content"
   >
     <span
       class="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
@@ -274,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"
@@ -289,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"
@@ -297,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
index ec8bfbbac59..0625a6a37f6 100644
--- a/src/components/button/__snapshots__/button_content.test.tsx.snap
+++ b/src/components/button/__snapshots__/button_content.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiButtonContent is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="testClass1 testClass2"
+  class="euiButtonContent testClass1 testClass2"
   data-test-subj="test subject string"
 >
   <span />
@@ -12,7 +12,7 @@ exports[`EuiButtonContent is rendered 1`] = `
 
 exports[`EuiButtonContent props children is rendered 1`] = `
 <span
-  class=""
+  class="euiButtonContent"
 >
   <span>
     Content
@@ -22,7 +22,7 @@ exports[`EuiButtonContent props children is rendered 1`] = `
 
 exports[`EuiButtonContent props iconSide is rendered 1`] = `
 <span
-  class="euiButtonContent--iconRight"
+  class="euiButtonContent euiButtonContent--iconRight"
 >
   <div
     class="euiButtonContent__icon"
@@ -34,7 +34,7 @@ exports[`EuiButtonContent props iconSide is rendered 1`] = `
 
 exports[`EuiButtonContent props iconType is rendered 1`] = `
 <span
-  class=""
+  class="euiButtonContent"
 >
   <div
     class="euiButtonContent__icon"
@@ -46,7 +46,7 @@ exports[`EuiButtonContent props iconType is rendered 1`] = `
 
 exports[`EuiButtonContent props isLoading is rendered 1`] = `
 <span
-  class=""
+  class="euiButtonContent"
 >
   <span
     class="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
@@ -57,7 +57,7 @@ exports[`EuiButtonContent props isLoading is rendered 1`] = `
 
 exports[`EuiButtonContent props isLoading replaces iconType with spinner 1`] = `
 <span
-  class=""
+  class="euiButtonContent"
 >
   <span
     class="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
@@ -68,7 +68,7 @@ exports[`EuiButtonContent props isLoading replaces iconType with spinner 1`] = `
 
 exports[`EuiButtonContent props textProps is rendered 1`] = `
 <span
-  class=""
+  class="euiButtonContent"
 >
   <span
     aria-label="aria-label"
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 8775997220c..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;
diff --git a/src/components/button/_button_content.scss b/src/components/button/_button_content.scss
index 35e845f755d..e1933a0cbf7 100644
--- a/src/components/button/_button_content.scss
+++ b/src/components/button/_button_content.scss
@@ -1,3 +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 3ad6f9ded41..c98e1f264c6 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 {
@@ -35,10 +30,11 @@ import {
 
 import { getSecureRelForTarget } from '../../services';
 
-import { IconType } from '../icon';
-import { EuiButtonContentProps, EuiButtonContent } from './button_content';
-
-export type ButtonIconSide = 'left' | 'right';
+import {
+  EuiButtonContentProps,
+  EuiButtonContentType,
+  EuiButtonContent,
+} from './button_content';
 
 export type ButtonColor =
   | 'primary'
@@ -72,33 +68,39 @@ 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?: EuiButtonContentProps;
+  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 {
@@ -135,7 +137,6 @@ const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
       'euiButton',
       color ? colorToClassNameMap[color] : null,
       size ? sizeToClassNameMap[size] : null,
-      iconSide ? iconSideToClassNameMap[iconSide] : null,
       className,
       {
         'euiButton--fill': fill,
@@ -158,7 +159,8 @@ const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
       <EuiButtonContent
         isLoading={isLoading}
         iconType={iconType}
-        textProps={{ className: textClassNames, ...textProps }}
+        iconSide={iconSide}
+        textProps={{ ...textProps, className: textClassNames }}
         {...contentProps}
         // className has to come last to override contentProps.className
         className={contentClassNames}>
@@ -239,9 +241,9 @@ export const EuiButton: FunctionComponent<Props> = ({
   return (
     <EuiButtonDisplay
       element={element}
+      ref={buttonRef}
       {...elementProps}
       {...relObj}
-      ref={buttonRef}
       {...rest}
     />
   );
diff --git a/src/components/button/button_content.tsx b/src/components/button/button_content.tsx
index 8e54e2d1f85..4f210b7fd48 100644
--- a/src/components/button/button_content.tsx
+++ b/src/components/button/button_content.tsx
@@ -23,36 +23,41 @@ import { CommonProps, keysOf } from '../common';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiIcon, IconType } from '../icon';
 
-export type ButtonIconSide = 'left' | 'right';
+export type ButtonContentIconSide = 'left' | 'right';
 
-const iconSideToClassNameMap: { [side in ButtonIconSide]: string | null } = {
+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 type EuiButtonContentProps = HTMLAttributes<HTMLSpanElement> &
-  CommonProps & {
-    iconType?: IconType;
-    iconSide?: ButtonIconSide;
-    isLoading?: boolean;
-    /**
-     * Object of props passed to the <span/> wrapping the component's {children}
-     */
-    textProps?: HTMLAttributes<HTMLSpanElement> & CommonProps;
-  };
+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<EuiButtonContentProps> = ({
+export const EuiButtonContent: FunctionComponent<
+  EuiButtonContentType & EuiButtonContentProps
+> = ({
   children,
   textProps,
-  isLoading,
+  isLoading = false,
   iconType,
-  iconSide,
+  iconSide = 'left',
   ...contentProps
 }) => {
   // Add an icon to the button if one exists.
@@ -69,6 +74,7 @@ export const EuiButtonContent: FunctionComponent<EuiButtonContentProps> = ({
   }
 
   const contentClassNames = classNames(
+    'euiButtonContent',
     iconSide ? iconSideToClassNameMap[iconSide] : null,
     contentProps && contentProps.className
   );
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 1243612b2a7..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,7 +166,7 @@ exports[`EuiButtonEmpty props iconSide left is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <div
       class="euiButtonContent__icon"
@@ -164,11 +183,11 @@ 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
       class="euiButtonContent__icon"
@@ -189,7 +208,7 @@ exports[`EuiButtonEmpty props iconType is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <div
       class="euiButtonContent__icon"
@@ -204,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"
@@ -220,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"
@@ -234,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"
@@ -255,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"
@@ -270,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"
@@ -278,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 9622749e383..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,12 +33,6 @@
     font-size: $euiFontSizeS;
   }
 
-  &.euiButtonEmpty--iconRight {
-    .euiButtonEmpty__content {
-      @include euiButtonContent($isReverse: true);
-    }
-  }
-
   &:disabled {
     @include euiButtonContentDisabled;
 
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 b520377e461..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 {
@@ -28,9 +28,11 @@ import {
   keysOf,
 } from '../../common';
 import { getSecureRelForTarget } from '../../../services';
-import { IconType } from '../../icon';
-import { ButtonIconSide } from '../button';
-import { EuiButtonContent, EuiButtonContentProps } from '../button_content';
+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
-   */
-  contentProps?: EuiButtonContentProps;
-
-  /**
-   * Passes props to `euiButtonEmpty__text` span
+   * Object of props passed to the <span/> wrapping the button's content
    */
-  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
   );
 
@@ -156,7 +158,8 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
     <EuiButtonContent
       isLoading={isLoading}
       iconType={iconType}
-      textProps={{ className: textClassNames, ...textProps }}
+      iconSide={iconSide}
+      textProps={{ ...textProps, className: textClassNames }}
       {...contentProps}
       // className has to come last to override contentProps.className
       className={contentClassNames}>
@@ -166,7 +169,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
 
   // <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 (
@@ -184,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 84035fa60a2..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"
@@ -927,7 +927,7 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -955,7 +955,7 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = `
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"
@@ -983,7 +983,7 @@ exports[`EuiButtonGroup props isDisabled is rendered 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 39be643ac00..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,7 +87,7 @@ exports[`EuiCardSelect props isSelected 1`] = `
   type="button"
 >
   <span
-    class="euiButtonEmpty__content"
+    class="euiButtonContent euiButtonEmpty__content"
   >
     <div
       class="euiButtonContent__icon"
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 da1e5146a69..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,14 +58,14 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiCollapsibleNav__closeButtonText"
+              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               close
             </span>
@@ -112,14 +112,14 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiCollapsibleNav__closeButtonText"
+              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               close
             </span>
@@ -168,14 +168,14 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiCollapsibleNav__closeButtonText"
+              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               close
             </span>
@@ -218,14 +218,14 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiCollapsibleNav__closeButtonText"
+              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               close
             </span>
@@ -268,14 +268,14 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiCollapsibleNav__closeButtonText"
+              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               close
             </span>
@@ -316,14 +316,14 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonEmpty__content"
         >
           <div
             class="euiButtonContent__icon"
             data-euiicon-type="cross"
           />
           <span
-            class="euiCollapsibleNav__closeButtonText"
+            class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
           >
             close
           </span>
@@ -365,14 +365,14 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiCollapsibleNav__closeButtonText"
+              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               close
             </span>
@@ -420,14 +420,14 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
             <span
-              class="euiCollapsibleNav__closeButtonText"
+              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
             >
               close
             </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 e5ec8d271cd..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"
@@ -316,6 +316,7 @@ exports[`EuiControlBar props leftOffset is rendered 1`] = `
                 >
                   <EuiButtonContent
                     className="euiButton__content"
+                    iconSide="left"
                     textProps={
                       Object {
                         "className": "euiButton__text",
@@ -323,7 +324,7 @@ exports[`EuiControlBar props leftOffset is rendered 1`] = `
                     }
                   >
                     <span
-                      className="euiButton__content"
+                      className="euiButtonContent euiButton__content"
                     >
                       <span
                         className="euiButton__text"
@@ -494,7 +495,7 @@ exports[`EuiControlBar props maxHeight is rendered 1`] = `
                 type="button"
               >
                 <span
-                  class="euiButton__content"
+                  class="euiButtonContent euiButton__content"
                 >
                   <span
                     class="euiButton__text"
@@ -630,6 +631,7 @@ exports[`EuiControlBar props maxHeight is rendered 1`] = `
                 >
                   <EuiButtonContent
                     className="euiButton__content"
+                    iconSide="left"
                     textProps={
                       Object {
                         "className": "euiButton__text",
@@ -637,7 +639,7 @@ exports[`EuiControlBar props maxHeight is rendered 1`] = `
                     }
                   >
                     <span
-                      className="euiButton__content"
+                      className="euiButtonContent euiButton__content"
                     >
                       <span
                         className="euiButton__text"
@@ -807,7 +809,7 @@ exports[`EuiControlBar props mobile is rendered 1`] = `
                 type="button"
               >
                 <span
-                  class="euiButton__content"
+                  class="euiButtonContent euiButton__content"
                 >
                   <span
                     class="euiButton__text"
@@ -943,6 +945,7 @@ exports[`EuiControlBar props mobile is rendered 1`] = `
                 >
                   <EuiButtonContent
                     className="euiButton__content"
+                    iconSide="left"
                     textProps={
                       Object {
                         "className": "euiButton__text",
@@ -950,7 +953,7 @@ exports[`EuiControlBar props mobile is rendered 1`] = `
                     }
                   >
                     <span
-                      className="euiButton__content"
+                      className="euiButtonContent euiButton__content"
                     >
                       <span
                         className="euiButton__text"
@@ -1169,6 +1172,7 @@ exports[`EuiControlBar props position is rendered 1`] = `
             >
               <EuiButtonContent
                 className="euiButton__content"
+                iconSide="left"
                 textProps={
                   Object {
                     "className": "euiButton__text",
@@ -1176,7 +1180,7 @@ exports[`EuiControlBar props position is rendered 1`] = `
                 }
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"
@@ -1331,7 +1335,7 @@ exports[`EuiControlBar props rightOffset is rendered 1`] = `
                 type="button"
               >
                 <span
-                  class="euiButton__content"
+                  class="euiButtonContent euiButton__content"
                 >
                   <span
                     class="euiButton__text"
@@ -1467,6 +1471,7 @@ exports[`EuiControlBar props rightOffset is rendered 1`] = `
                 >
                   <EuiButtonContent
                     className="euiButton__content"
+                    iconSide="left"
                     textProps={
                       Object {
                         "className": "euiButton__text",
@@ -1474,7 +1479,7 @@ exports[`EuiControlBar props rightOffset is rendered 1`] = `
                     }
                   >
                     <span
-                      className="euiButton__content"
+                      className="euiButtonContent euiButton__content"
                     >
                       <span
                         className="euiButton__text"
@@ -1644,7 +1649,7 @@ exports[`EuiControlBar props showContent is rendered 1`] = `
                 type="button"
               >
                 <span
-                  class="euiButton__content"
+                  class="euiButtonContent euiButton__content"
                 >
                   <span
                     class="euiButton__text"
@@ -1785,6 +1790,7 @@ exports[`EuiControlBar props showContent is rendered 1`] = `
                 >
                   <EuiButtonContent
                     className="euiButton__content"
+                    iconSide="left"
                     textProps={
                       Object {
                         "className": "euiButton__text",
@@ -1792,7 +1798,7 @@ exports[`EuiControlBar props showContent is rendered 1`] = `
                     }
                   >
                     <span
-                      className="euiButton__content"
+                      className="euiButtonContent euiButton__content"
                     >
                       <span
                         className="euiButton__text"
@@ -1967,7 +1973,7 @@ exports[`EuiControlBar props size is rendered 1`] = `
                 type="button"
               >
                 <span
-                  class="euiButton__content"
+                  class="euiButtonContent euiButton__content"
                 >
                   <span
                     class="euiButton__text"
@@ -2103,6 +2109,7 @@ exports[`EuiControlBar props size is rendered 1`] = `
                 >
                   <EuiButtonContent
                     className="euiButton__content"
+                    iconSide="left"
                     textProps={
                       Object {
                         "className": "euiButton__text",
@@ -2110,7 +2117,7 @@ exports[`EuiControlBar props size is rendered 1`] = `
                     }
                   >
                     <span
-                      className="euiButton__content"
+                      className="euiButtonContent euiButton__content"
                     >
                       <span
                         className="euiButton__text"
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 9059df63730..d6ce0c353e1 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -54,12 +54,12 @@ 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
               class="euiButtonContent__icon"
@@ -112,7 +112,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
             rel="noreferrer"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -129,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"
@@ -203,7 +203,7 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
                   class="euiButtonContent__icon"
@@ -231,7 +231,7 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
                   class="euiButtonContent__icon"
@@ -252,7 +252,7 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
               class="euiButtonContent__icon"
@@ -741,7 +741,7 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
                   class="euiButtonContent__icon"
@@ -769,7 +769,7 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
                   class="euiButtonContent__icon"
@@ -790,7 +790,7 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
               class="euiButtonContent__icon"
@@ -1600,7 +1600,7 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
                   class="euiButtonContent__icon"
@@ -1628,7 +1628,7 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
                   class="euiButtonContent__icon"
@@ -1649,7 +1649,7 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
               class="euiButtonContent__icon"
@@ -2137,7 +2137,7 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
                   class="euiButtonContent__icon"
@@ -2165,7 +2165,7 @@ Array [
               type="button"
             >
               <span
-                class="euiButtonEmpty__content"
+                class="euiButtonContent euiButtonEmpty__content"
               >
                 <div
                   class="euiButtonContent__icon"
@@ -2186,7 +2186,7 @@ Array [
           type="button"
         >
           <span
-            class="euiButtonEmpty__content"
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <div
               class="euiButtonContent__icon"
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 1317dc07240..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,15 +3,15 @@
 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=""
+      class="euiButtonEmpty__text"
     >
       <span
         class="euiFilterButton__textShift"
@@ -23,14 +23,14 @@ 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=""
+      class="euiButtonEmpty__text"
     >
       <span
         class="euiFilterButton__textShift"
@@ -42,18 +42,18 @@ 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
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
     <span
-      class=""
+      class="euiButtonEmpty__text"
     >
       <span
         class="euiFilterButton__textShift"
@@ -65,15 +65,15 @@ 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=""
+      class="euiButtonEmpty__text"
     >
       <span
         class="euiFilterButton__textShift"
@@ -85,14 +85,14 @@ 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=""
+      class="euiButtonEmpty__text"
     >
       <span
         class="euiFilterButton__textShift"
@@ -104,14 +104,14 @@ 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=""
+      class="euiButtonEmpty__text"
     >
       <span
         class="euiFilterButton__textShift"
@@ -123,14 +123,14 @@ 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="euiFilterButton__text-hasNotification"
+      class="euiButtonEmpty__text euiFilterButton__text-hasNotification"
     >
       <span
         class="euiFilterButton__textShift"
@@ -148,14 +148,14 @@ 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=""
+      class="euiButtonEmpty__text"
     >
       <span
         class="euiFilterButton__textShift"
@@ -167,14 +167,14 @@ 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=""
+      class="euiButtonEmpty__text"
     >
       <span
         class="euiFilterButton__textShift"
@@ -187,15 +187,15 @@ 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="euiFilterButton__text-hasNotification"
+      class="euiButtonEmpty__text euiFilterButton__text-hasNotification"
     >
       <span
         class="euiFilterButton__textShift"
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 1360ce7cf62..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,11 +13,11 @@ 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
             class="euiButtonContent__icon"
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 09c1618ca91..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,12 +14,12 @@ 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
               class="euiButtonContent__icon"
@@ -69,7 +69,7 @@ exports[`EuiTablePagination is rendered 1`] = `
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -85,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"
@@ -111,7 +111,7 @@ exports[`EuiTablePagination is rendered 1`] = `
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -131,7 +131,7 @@ exports[`EuiTablePagination is rendered 1`] = `
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -151,7 +151,7 @@ exports[`EuiTablePagination is rendered 1`] = `
             type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 class="euiButtonEmpty__text"
@@ -220,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"
@@ -236,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"
@@ -262,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"
@@ -282,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"
@@ -302,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"

From 2b6da391e262457dec0b9e24c9d01f6a1a1bc3bb Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 15 Jul 2020 11:44:28 -0400
Subject: [PATCH 13/13] Restricted list of `element`s

---
 src/components/button/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index c98e1f264c6..c230b0d2214 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -104,7 +104,7 @@ export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
 }
 
 export interface EuiButtonDisplayProps extends EuiButtonProps {
-  element: keyof JSX.IntrinsicElements;
+  element: 'a' | 'button' | 'span' | 'label';
 }
 
 /**