From f3b678d8ccda8c3cf180c890e8191ed7d8b64de3 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Mon, 19 Aug 2024 09:31:09 -0700
Subject: [PATCH] Use smaller and compressed varients of buttons and form
 components (#370)

* Use EuiSmallButton

Signed-off-by: Miki <miki@amazon.com>

* Use EuiSmallButtonIcon

Signed-off-by: Miki <miki@amazon.com>

* Use EuiSmallButtonEmpty

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedFormRow

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedField*

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedSelect and EuiCompressedSuperSelect

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedRadio and EuiCompressedRadioGroup

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedComboBox

Signed-off-by: Miki <miki@amazon.com>

* Undo unnecessary EuiSmallButton* uses

Signed-off-by: Miki <miki@amazon.com>

* Update snapshots and tests

Signed-off-by: Miki <miki@amazon.com>

* Fix pre-existing linting errors

Signed-off-by: Miki <miki@amazon.com>

---------

Signed-off-by: Miki <miki@amazon.com>
---
 common/utils/toast_helper.tsx                 |   3 +-
 .../Main/__snapshots__/main.test.tsx.snap     |  72 ++++----
 public/components/Main/main.tsx               |   6 +-
 public/components/PPLPage/PPLPage.tsx         |  31 ++--
 .../__snapshots__/PPLPage.test.tsx.snap       |  30 ++--
 .../components/QueryResults/QueryResults.tsx  |   4 +-
 .../QueryResults/QueryResultsBody.tsx         |  11 +-
 .../__snapshots__/QueryResults.test.tsx.snap  |  64 +++----
 .../QueryResultsBody.test.tsx.snap            |  76 ++++-----
 .../QueryResults/async_query_body.tsx         |  10 +-
 public/components/SQLPage/CreateButton.tsx    |   6 +-
 public/components/SQLPage/DataSelect.tsx      |   6 +-
 public/components/SQLPage/SQLPage.tsx         |  26 +--
 .../__snapshots__/SQLPage.test.tsx.snap       |  12 +-
 .../__snapshots__/CreateButton.test.tsx.snap  |   4 +-
 .../acceleration_index_flyout.test.tsx.snap   |  12 +-
 .../SQLPage/acceleration_index_flyout.tsx     |   6 +-
 .../create_acceleration.test.tsx.snap         | 160 +++++++++---------
 .../create/create_acceleration.tsx            |  12 +-
 .../define_index_options.test.tsx.snap        |  18 +-
 .../index_setting_options.test.tsx.snap       | 108 ++++++------
 .../index_type_selector.test.tsx.snap         |  20 +--
 .../source_selector.test.tsx.snap             |  60 +++----
 .../selectors/define_index_options.tsx        |  16 +-
 .../selectors/index_setting_options.tsx       |  50 +++---
 .../selectors/index_type_selector.tsx         |  10 +-
 .../selectors/source_selector.tsx             |  20 +--
 .../query_visual_editor.test.tsx.snap         |  24 +--
 .../covering_index/covering_index_builder.tsx |   4 +-
 .../column_expression.test.tsx.snap           |   4 +-
 .../materialized_view/add_column_popover.tsx  |  24 +--
 .../materialized_view/column_expression.tsx   |  28 +--
 .../group_by_tumble_expression.tsx            |  26 +--
 .../add_fields_modal.test.tsx.snap            |  16 +-
 .../delete_fields_modal.test.tsx.snap         |  16 +-
 .../skipping_index_builder.test.tsx.snap      |  24 +--
 .../skipping_index/add_fields_modal.tsx       |   8 +-
 .../skipping_index/delete_fields_modal.tsx    |   8 +-
 .../skipping_index/skipping_index_builder.tsx |  18 +-
 39 files changed, 528 insertions(+), 525 deletions(-)

diff --git a/common/utils/toast_helper.tsx b/common/utils/toast_helper.tsx
index d1209a92..4499bbc5 100644
--- a/common/utils/toast_helper.tsx
+++ b/common/utils/toast_helper.tsx
@@ -4,6 +4,7 @@
  */
 
 import {
+  EuiSmallButton,
   EuiButton,
   EuiCodeBlock,
   EuiModal,
@@ -61,7 +62,7 @@ const loadErrorModal = (errorDetailsMessage: string) => {
           </EuiCodeBlock>
         </EuiModalBody>
         <EuiModalFooter>
-          <EuiButton onClick={() => modal.close()}>Close</EuiButton>
+          <EuiSmallButton onClick={() => modal.close()}>Close</EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     )
diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
index a0635e7c..6217ec1d 100644
--- a/public/components/Main/__snapshots__/main.test.tsx.snap
+++ b/public/components/Main/__snapshots__/main.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`<Main /> spec click clear button 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <a
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             href="https://opensearch.org/docs/latest/search-plugins/sql/sql/index/"
             rel="noopener noreferrer"
             target="_blank"
@@ -314,7 +314,7 @@ exports[`<Main /> spec click clear button 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
                       data-test-subj="sqlRunButton"
                       type="button"
                     >
@@ -333,7 +333,7 @@ exports[`<Main /> spec click clear button 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       data-test-subj="sqlClearButton"
                       type="button"
                     >
@@ -352,7 +352,7 @@ exports[`<Main /> spec click clear button 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       type="button"
                     >
                       <span
@@ -582,7 +582,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <a
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             href="https://opensearch.org/docs/latest/search-plugins/sql/sql/index/"
             rel="noopener noreferrer"
             target="_blank"
@@ -754,7 +754,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
                       data-test-subj="sqlRunButton"
                       type="button"
                     >
@@ -773,7 +773,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       data-test-subj="sqlClearButton"
                       type="button"
                     >
@@ -792,7 +792,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       type="button"
                     >
                       <span
@@ -1022,7 +1022,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <a
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             href="https://opensearch.org/docs/latest/search-plugins/sql/sql/index/"
             rel="noopener noreferrer"
             target="_blank"
@@ -1194,7 +1194,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
                       data-test-subj="sqlRunButton"
                       type="button"
                     >
@@ -1213,7 +1213,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       data-test-subj="sqlClearButton"
                       type="button"
                     >
@@ -1232,7 +1232,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       type="button"
                     >
                       <span
@@ -1462,7 +1462,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <a
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             href="https://opensearch.org/docs/latest/search-plugins/sql/sql/index/"
             rel="noopener noreferrer"
             target="_blank"
@@ -1634,7 +1634,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
                       data-test-subj="sqlRunButton"
                       type="button"
                     >
@@ -1653,7 +1653,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       data-test-subj="sqlClearButton"
                       type="button"
                     >
@@ -1672,7 +1672,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       type="button"
                     >
                       <span
@@ -1902,7 +1902,7 @@ exports[`<Main /> spec click run button, response fills null and missing values
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <a
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             href="https://opensearch.org/docs/latest/search-plugins/sql/sql/index/"
             rel="noopener noreferrer"
             target="_blank"
@@ -2074,7 +2074,7 @@ exports[`<Main /> spec click run button, response fills null and missing values
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
                       data-test-subj="sqlRunButton"
                       type="button"
                     >
@@ -2093,7 +2093,7 @@ exports[`<Main /> spec click run button, response fills null and missing values
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       data-test-subj="sqlClearButton"
                       type="button"
                     >
@@ -2112,7 +2112,7 @@ exports[`<Main /> spec click run button, response fills null and missing values
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       type="button"
                     >
                       <span
@@ -2342,7 +2342,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <a
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             href="https://opensearch.org/docs/latest/search-plugins/sql/sql/index/"
             rel="noopener noreferrer"
             target="_blank"
@@ -2514,7 +2514,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
                       data-test-subj="sqlRunButton"
                       type="button"
                     >
@@ -2533,7 +2533,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       data-test-subj="sqlClearButton"
                       type="button"
                     >
@@ -2552,7 +2552,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       type="button"
                     >
                       <span
@@ -2782,7 +2782,7 @@ exports[`<Main /> spec renders the component 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <a
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             href="https://opensearch.org/docs/latest/search-plugins/sql/sql/index/"
             rel="noopener noreferrer"
             target="_blank"
@@ -2954,7 +2954,7 @@ exports[`<Main /> spec renders the component 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
                       data-test-subj="sqlRunButton"
                       type="button"
                     >
@@ -2973,7 +2973,7 @@ exports[`<Main /> spec renders the component 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       data-test-subj="sqlClearButton"
                       type="button"
                     >
@@ -2992,7 +2992,7 @@ exports[`<Main /> spec renders the component 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       type="button"
                     >
                       <span
@@ -4250,7 +4250,7 @@ exports[`<Main /> spec renders the component and checks if side tree is loaded 1
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <a
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             href="https://opensearch.org/docs/latest/search-plugins/sql/sql/index/"
             rel="noopener noreferrer"
             target="_blank"
@@ -4422,7 +4422,7 @@ exports[`<Main /> spec renders the component and checks if side tree is loaded 1
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
                       data-test-subj="sqlRunButton"
                       type="button"
                     >
@@ -4441,7 +4441,7 @@ exports[`<Main /> spec renders the component and checks if side tree is loaded 1
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       data-test-subj="sqlClearButton"
                       type="button"
                     >
@@ -4460,7 +4460,7 @@ exports[`<Main /> spec renders the component and checks if side tree is loaded 1
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       type="button"
                     >
                       <span
@@ -4690,7 +4690,7 @@ exports[`<Main /> spec renders the component and toggles ppl 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <a
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             href="https://opensearch.org/docs/latest/search-plugins/sql/sql/index/"
             rel="noopener noreferrer"
             target="_blank"
@@ -4862,7 +4862,7 @@ exports[`<Main /> spec renders the component and toggles ppl 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
                       data-test-subj="sqlRunButton"
                       type="button"
                     >
@@ -4881,7 +4881,7 @@ exports[`<Main /> spec renders the component and toggles ppl 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       data-test-subj="sqlClearButton"
                       type="button"
                     >
@@ -4900,7 +4900,7 @@ exports[`<Main /> spec renders the component and toggles ppl 1`] = `
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <button
-                      class="euiButton euiButton--primary sql-editor-button"
+                      class="euiButton euiButton--primary euiButton--small sql-editor-button"
                       type="button"
                     >
                       <span
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
index d64bcbcd..6f7f2edd 100644
--- a/public/components/Main/main.tsx
+++ b/public/components/Main/main.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiButtonIcon,
   EuiCallOut,
   EuiComboBoxOptionOption,
@@ -1132,9 +1132,9 @@ export class Main extends React.Component<MainProps, MainState> {
                 <EuiSpacer />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton href={link} target="_blank" iconType="popout" iconSide="right">
+                <EuiSmallButton href={link} target="_blank" iconType="popout" iconSide="right">
                   {linkTitle}
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
             </EuiFlexGroup>
             <EuiPageContentBody>
diff --git a/public/components/PPLPage/PPLPage.tsx b/public/components/PPLPage/PPLPage.tsx
index 1915e6c4..4b9d066a 100644
--- a/public/components/PPLPage/PPLPage.tsx
+++ b/public/components/PPLPage/PPLPage.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiCodeBlock,
   EuiCodeEditor,
   EuiComboBoxOptionOption,
@@ -91,9 +91,9 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
             </EuiModalBody>
 
             <EuiModalFooter>
-              <EuiButton onClick={closeModal} fill>
+              <EuiSmallButton onClick={closeModal} fill>
                 Close
-              </EuiButton>
+              </EuiSmallButton>
             </EuiModalFooter>
           </EuiModal>
         </EuiOverlayMask>
@@ -125,11 +125,8 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
         />
         <EuiSpacer />
         <EuiFlexGroup className="action-container" gutterSize="m">
-          <EuiFlexItem
-            className="sql-editor-buttons"
-            grow={false}
-          >
-            <EuiButton
+          <EuiFlexItem className="sql-editor-buttons" grow={false}>
+            <EuiSmallButton
               fill={true}
               data-test-subj="pplRunButton"
               className="sql-editor-button"
@@ -137,7 +134,7 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
               onClick={() => this.props.onRun(this.props.pplQuery)}
             >
               {this.props.asyncLoading ? 'Running' : 'Run'}
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem
             grow={false}
@@ -146,26 +143,30 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
               this.props.onClear();
             }}
           >
-            <EuiButton className="sql-editor-button"  data-test-subj="pplClearButton" isDisabled={this.props.asyncLoading}>
+            <EuiSmallButton
+              className="sql-editor-button"
+              data-test-subj="pplClearButton"
+              isDisabled={this.props.asyncLoading}
+            >
               Clear
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           {this.props.selectedDatasource &&
           this.props.selectedDatasource[0].label === 'OpenSearch' ? (
             <EuiFlexItem grow={false} onClick={() => this.props.onTranslate(this.props.pplQuery)}>
-              <EuiButton
+              <EuiSmallButton
                 className="sql-editor-button"
                 onClick={showModal}
                 isDisabled={this.props.asyncLoading}
               >
                 Explain
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           ) : (
             <EuiFlexItem grow={false} onClick={() => this.props.updatePPLQueries(SAMPLE_PPL_QUERY)}>
-              <EuiButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
+              <EuiSmallButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
                 Sample Query
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           )}
         </EuiFlexGroup>
diff --git a/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap b/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap
index 4e863c46..fd842883 100644
--- a/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap
+++ b/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap
@@ -138,7 +138,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
           data-test-subj="pplRunButton"
           type="button"
         >
@@ -157,7 +157,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           data-test-subj="pplClearButton"
           type="button"
         >
@@ -176,7 +176,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           type="button"
         >
           <span
@@ -333,7 +333,7 @@ exports[`<PPLPage /> spec tests the Sample query button 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
           data-test-subj="pplRunButton"
           type="button"
         >
@@ -352,7 +352,7 @@ exports[`<PPLPage /> spec tests the Sample query button 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           data-test-subj="pplClearButton"
           type="button"
         >
@@ -371,7 +371,7 @@ exports[`<PPLPage /> spec tests the Sample query button 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           type="button"
         >
           <span
@@ -528,7 +528,7 @@ exports[`<PPLPage /> spec tests the Sample query button 2`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
           data-test-subj="pplRunButton"
           type="button"
         >
@@ -547,7 +547,7 @@ exports[`<PPLPage /> spec tests the Sample query button 2`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           data-test-subj="pplClearButton"
           type="button"
         >
@@ -566,7 +566,7 @@ exports[`<PPLPage /> spec tests the Sample query button 2`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           type="button"
         >
           <span
@@ -723,7 +723,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
           data-test-subj="pplRunButton"
           type="button"
         >
@@ -742,7 +742,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           data-test-subj="pplClearButton"
           type="button"
         >
@@ -761,7 +761,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           type="button"
         >
           <span
@@ -921,7 +921,7 @@ exports[`<PPLPage /> spec tests the action buttons 2`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
           data-test-subj="pplRunButton"
           type="button"
         >
@@ -940,7 +940,7 @@ exports[`<PPLPage /> spec tests the action buttons 2`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           data-test-subj="pplClearButton"
           type="button"
         >
@@ -959,7 +959,7 @@ exports[`<PPLPage /> spec tests the action buttons 2`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           type="button"
         >
           <span
diff --git a/public/components/QueryResults/QueryResults.tsx b/public/components/QueryResults/QueryResults.tsx
index e0daa960..6897d288 100644
--- a/public/components/QueryResults/QueryResults.tsx
+++ b/public/components/QueryResults/QueryResults.tsx
@@ -10,7 +10,7 @@ import { SortableProperties, SortableProperty } from '@elastic/eui/lib/services'
 import {
   Comparators,
   EuiButton,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiComboBoxOptionOption,
   EuiContextMenuItem,
   EuiContextMenuPanel,
@@ -317,7 +317,7 @@ export class QueryResults extends React.Component<QueryResultsProps, QueryResult
             <EuiFlexItem grow={false}>
               {this.props.queryResults.length > 0 &&
                 (this.props.isResultFullScreen ? (
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     iconType="cross"
                     color="text"
                     id="exit-fullscreen-button"
diff --git a/public/components/QueryResults/QueryResultsBody.tsx b/public/components/QueryResults/QueryResultsBody.tsx
index b2ac3e48..3439be16 100644
--- a/public/components/QueryResults/QueryResultsBody.tsx
+++ b/public/components/QueryResults/QueryResultsBody.tsx
@@ -9,8 +9,9 @@ import { SortableProperties } from '@elastic/eui/lib/services';
 // @ts-ignore
 import {
   Comparators,
+  EuiSmallButton,
   EuiButton,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiCodeEditor,
   EuiComboBoxOptionOption,
   EuiContextMenu,
@@ -190,9 +191,9 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
           </EuiModalBody>
 
           <EuiModalFooter>
-            <EuiButton onClick={closeModal} fill>
+            <EuiSmallButton onClick={closeModal} fill>
               Close
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </EuiModal>
       </EuiOverlayMask>
@@ -404,7 +405,7 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
 
   addExpandingNodeIcon(node: Node, expandedRowMap: ItemIdToExpandedRowMap) {
     return (
-      <EuiButtonIcon
+      <EuiSmallButtonIcon
         style={{ marginLeft: -4 }}
         onClick={() => this.toggleNodeData(node, expandedRowMap)}
         aria-label={
@@ -426,7 +427,7 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
       return;
     }
     return (
-      <EuiButtonIcon
+      <EuiSmallButtonIcon
         onClick={() => this.updateExpandedRowMap(node, expandedRowMap)}
         aria-label={
           expandedRowMap[node.parent!.nodeId] &&
diff --git a/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap b/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
index f484174e..04116e3f 100644
--- a/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
+++ b/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
@@ -97,7 +97,7 @@ exports[`<AsyncQueryResults /> spec renders async query failure component 1`] =
           The query failed to execute and the operation could not be complete.
         </div>
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -209,7 +209,7 @@ exports[`<AsyncQueryResults /> spec renders async query loading component 1`] =
           running
         </div>
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -949,7 +949,7 @@ exports[`<QueryResults with PPL data/> spec renders the component with mock quer
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -1331,7 +1331,7 @@ exports[`<QueryResults with PPL data/> spec renders the component with mock quer
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -1713,7 +1713,7 @@ exports[`<QueryResults with PPL data/> spec renders the component with mock quer
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -2095,7 +2095,7 @@ exports[`<QueryResults with PPL data/> spec renders the component with mock quer
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -2477,7 +2477,7 @@ exports[`<QueryResults with PPL data/> spec renders the component with mock quer
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -2859,7 +2859,7 @@ exports[`<QueryResults with PPL data/> spec renders the component with mock quer
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -3241,7 +3241,7 @@ exports[`<QueryResults with PPL data/> spec renders the component with mock quer
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -3623,7 +3623,7 @@ exports[`<QueryResults with PPL data/> spec renders the component with mock quer
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -4005,7 +4005,7 @@ exports[`<QueryResults with PPL data/> spec renders the component with mock quer
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -4387,7 +4387,7 @@ exports[`<QueryResults with PPL data/> spec renders the component with mock quer
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -5740,7 +5740,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -6121,7 +6121,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -6502,7 +6502,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -6883,7 +6883,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -7264,7 +7264,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -7645,7 +7645,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -8026,7 +8026,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -8407,7 +8407,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -8788,7 +8788,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -9169,7 +9169,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -10521,7 +10521,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -10903,7 +10903,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -11285,7 +11285,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -11667,7 +11667,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -12049,7 +12049,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -12431,7 +12431,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -12813,7 +12813,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -13195,7 +13195,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -13577,7 +13577,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
@@ -13959,7 +13959,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                           >
                             <button
                               aria-label="Expand"
-                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                               style="margin-left: -4px;"
                               type="button"
                             >
diff --git a/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap b/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
index d75233d4..549623ad 100644
--- a/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
+++ b/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
@@ -438,7 +438,7 @@ exports[`<QueryResultsBody with PPL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -820,7 +820,7 @@ exports[`<QueryResultsBody with PPL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -1202,7 +1202,7 @@ exports[`<QueryResultsBody with PPL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -1584,7 +1584,7 @@ exports[`<QueryResultsBody with PPL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -1966,7 +1966,7 @@ exports[`<QueryResultsBody with PPL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -2348,7 +2348,7 @@ exports[`<QueryResultsBody with PPL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -2730,7 +2730,7 @@ exports[`<QueryResultsBody with PPL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -3112,7 +3112,7 @@ exports[`<QueryResultsBody with PPL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -3494,7 +3494,7 @@ exports[`<QueryResultsBody with PPL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -3876,7 +3876,7 @@ exports[`<QueryResultsBody with PPL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -4258,7 +4258,7 @@ exports[`<QueryResultsBody with PPL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -5441,7 +5441,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -5822,7 +5822,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -6203,7 +6203,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -6584,7 +6584,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -6965,7 +6965,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -7346,7 +7346,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -7727,7 +7727,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -8108,7 +8108,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -8489,7 +8489,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -8870,7 +8870,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -9251,7 +9251,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -10307,7 +10307,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Collapse"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -10718,7 +10718,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                                   >
                                     <button
                                       aria-label="Expand"
-                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
+                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiSideNavItemButton__icon"
                                       type="button"
                                     >
                                       <svg
@@ -10758,7 +10758,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                                   >
                                     <button
                                       aria-label="Collapse"
-                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
+                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiSideNavItemButton__icon"
                                       type="button"
                                     >
                                       <svg
@@ -10872,7 +10872,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                                   >
                                     <button
                                       aria-label="Expand"
-                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
+                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiSideNavItemButton__icon"
                                       type="button"
                                     >
                                       <svg
@@ -10912,7 +10912,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                                   >
                                     <button
                                       aria-label="Expand"
-                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
+                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiSideNavItemButton__icon"
                                       type="button"
                                     >
                                       <svg
@@ -10952,7 +10952,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                                   >
                                     <button
                                       aria-label="Expand"
-                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
+                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiSideNavItemButton__icon"
                                       type="button"
                                     >
                                       <svg
@@ -11002,7 +11002,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -11383,7 +11383,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -11764,7 +11764,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -12145,7 +12145,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -12526,7 +12526,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -12907,7 +12907,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -13288,7 +13288,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -13669,7 +13669,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -14050,7 +14050,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
@@ -14431,7 +14431,7 @@ exports[`<QueryResultsBody with SQL language/> spec renders component with mock
                         >
                           <button
                             aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                             style="margin-left: -4px;"
                             type="button"
                           >
diff --git a/public/components/QueryResults/async_query_body.tsx b/public/components/QueryResults/async_query_body.tsx
index 7c326bca..490860fd 100644
--- a/public/components/QueryResults/async_query_body.tsx
+++ b/public/components/QueryResults/async_query_body.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiFlexGroup,
   EuiIcon,
   EuiLoadingSpinner,
@@ -41,9 +41,9 @@ export function AsyncQueryBody(props: AsyncQueryBodyProps) {
         <EuiModalBody>{asyncQueryError}</EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButton onClick={closeModal} fill>
+          <EuiSmallButton onClick={closeModal} fill>
             Close
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     );
@@ -58,7 +58,7 @@ export function AsyncQueryBody(props: AsyncQueryBodyProps) {
             <h3>Query failed</h3>
           </EuiText>
           <EuiText>The query failed to execute and the operation could not be complete.</EuiText>
-          <EuiButton onClick={() => showModal()}>View error details</EuiButton>
+          <EuiSmallButton onClick={() => showModal()}>View error details</EuiSmallButton>
           {modal}
         </>
       ) : (
@@ -69,7 +69,7 @@ export function AsyncQueryBody(props: AsyncQueryBodyProps) {
           </EuiText>
           <EuiText>Status: {asyncLoadingStatus}</EuiText>
           {asyncLoadingStatus !== AsyncQueryStatus.Scheduled && (
-            <EuiButton onClick={cancelAsyncQuery}>Cancel</EuiButton>
+            <EuiSmallButton onClick={cancelAsyncQuery}>Cancel</EuiSmallButton>
           )}
         </>
       )}
diff --git a/public/components/SQLPage/CreateButton.tsx b/public/components/SQLPage/CreateButton.tsx
index 2120b926..37c4e013 100644
--- a/public/components/SQLPage/CreateButton.tsx
+++ b/public/components/SQLPage/CreateButton.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiComboBoxOptionOption, EuiContextMenu, EuiPopover } from '@elastic/eui';
+import { EuiSmallButton, EuiComboBoxOptionOption, EuiContextMenu, EuiPopover } from '@elastic/eui';
 import React, { useState } from 'react';
 import {
   COVERING_INDEX_QUERY,
@@ -66,9 +66,9 @@ export const CreateButton = ({ updateSQLQueries, selectedDatasource }: CreateBut
   ];
 
   const button = (
-    <EuiButton iconType="arrowDown" iconSide="right" onClick={() => togglePopover(null)}>
+    <EuiSmallButton iconType="arrowDown" iconSide="right" onClick={() => togglePopover(null)}>
       Create
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   return (
diff --git a/public/components/SQLPage/DataSelect.tsx b/public/components/SQLPage/DataSelect.tsx
index 8af7be70..484c74c1 100644
--- a/public/components/SQLPage/DataSelect.tsx
+++ b/public/components/SQLPage/DataSelect.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
+import { EuiCompressedComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 import { CoreStart } from '../../../../../src/core/public';
 import { fetchDataSources } from '../../../common/utils/fetch_datasources';
@@ -38,10 +38,10 @@ export const DataSelect = ({ http, onSelect, urlDataSource, asyncLoading, dataSo
       onSelect(selectedItems);
     }
   };
-  
+
   return (
     options.length > 0 && (
-      <EuiComboBox
+      <EuiCompressedComboBox
         placeholder='Select data source connection'
         singleSelection={{ asPlainText: true }}
         isClearable={false}
diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
index 372c43c4..808332ed 100644
--- a/public/components/SQLPage/SQLPage.tsx
+++ b/public/components/SQLPage/SQLPage.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiCodeBlock,
   EuiCodeEditor,
   EuiComboBoxOptionOption,
@@ -123,9 +123,9 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
             </EuiModalBody>
 
             <EuiModalFooter>
-              <EuiButton onClick={closeModal} fill>
+              <EuiSmallButton onClick={closeModal} fill>
                 Close
-              </EuiButton>
+              </EuiSmallButton>
             </EuiModalFooter>
           </EuiModal>
         </EuiOverlayMask>
@@ -160,7 +160,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
             <EuiFlexItem>
               <EuiFlexGroup className="action-container" gutterSize="m">
                 <EuiFlexItem grow={false}>
-                  <EuiButton
+                  <EuiSmallButton
                     data-test-subj="sqlRunButton"
                     fill={true}
                     className="sql-editor-button"
@@ -168,7 +168,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                     onClick={() => this.props.onRun(this.props.sqlQuery)}
                   >
                     {this.props.asyncLoading ? 'Running' : 'Run'}
-                  </EuiButton>
+                  </EuiSmallButton>
                 </EuiFlexItem>
                 <EuiFlexItem
                   grow={false}
@@ -177,13 +177,13 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                     this.props.onClear();
                   }}
                 >
-                  <EuiButton
+                  <EuiSmallButton
                     data-test-subj="sqlClearButton"
                     className="sql-editor-button"
                     isDisabled={this.props.asyncLoading}
                   >
                     Clear
-                  </EuiButton>
+                  </EuiSmallButton>
                 </EuiFlexItem>
                 {this.props.selectedDatasource &&
                 this.props.selectedDatasource[0].label === 'OpenSearch' ? (
@@ -191,22 +191,22 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                     grow={false}
                     onClick={() => this.props.onTranslate(this.props.sqlQuery)}
                   >
-                    <EuiButton
+                    <EuiSmallButton
                       className="sql-editor-button"
                       onClick={showModal}
                       isDisabled={this.props.asyncLoading}
                     >
                       Explain
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 ) : (
                   <EuiFlexItem
                     grow={false}
                     onClick={() => this.props.updateSQLQueries(SAMPLE_SQL_QUERY)}
                   >
-                    <EuiButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
+                    <EuiSmallButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
                       Sample Query
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 )}
               </EuiFlexGroup>
@@ -214,7 +214,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
             {this.props.selectedDatasource &&
               this.props.selectedDatasource[0].label !== 'OpenSearch' && (
                 <EuiFlexItem grow={false}>
-                  <EuiButton
+                  <EuiSmallButton
                     className="sql-accelerate-button"
                     onClick={() =>
                       this.renderCreateAccelerationFlyout({
@@ -225,7 +225,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                     isDisabled={this.props.asyncLoading}
                   >
                     Accelerate Table
-                  </EuiButton>
+                  </EuiSmallButton>
                 </EuiFlexItem>
               )}
           </EuiFlexGroup>
diff --git a/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap b/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap
index a08c41d7..734c0c5b 100644
--- a/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap
+++ b/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap
@@ -136,7 +136,7 @@ exports[`<SQLPage /> spec renders the component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
               data-test-subj="sqlRunButton"
               type="button"
             >
@@ -155,7 +155,7 @@ exports[`<SQLPage /> spec renders the component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary sql-editor-button"
+              class="euiButton euiButton--primary euiButton--small sql-editor-button"
               data-test-subj="sqlClearButton"
               type="button"
             >
@@ -174,7 +174,7 @@ exports[`<SQLPage /> spec renders the component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary sql-editor-button"
+              class="euiButton euiButton--primary euiButton--small sql-editor-button"
               type="button"
             >
               <span
@@ -331,7 +331,7 @@ exports[`<SQLPage /> spec tests the action buttons 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
               data-test-subj="sqlRunButton"
               type="button"
             >
@@ -350,7 +350,7 @@ exports[`<SQLPage /> spec tests the action buttons 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary sql-editor-button"
+              class="euiButton euiButton--primary euiButton--small sql-editor-button"
               data-test-subj="sqlClearButton"
               type="button"
             >
@@ -369,7 +369,7 @@ exports[`<SQLPage /> spec tests the action buttons 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary sql-editor-button"
+              class="euiButton euiButton--primary euiButton--small sql-editor-button"
               type="button"
             >
               <span
diff --git a/public/components/SQLPage/__tests__/__snapshots__/CreateButton.test.tsx.snap b/public/components/SQLPage/__tests__/__snapshots__/CreateButton.test.tsx.snap
index 798bda15..9a4e9d3a 100644
--- a/public/components/SQLPage/__tests__/__snapshots__/CreateButton.test.tsx.snap
+++ b/public/components/SQLPage/__tests__/__snapshots__/CreateButton.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`CreateButton opens and closes the popover 1`] = `
       class="euiPopover__anchor"
     >
       <button
-        class="euiButton euiButton--primary"
+        class="euiButton euiButton--primary euiButton--small"
         type="button"
       >
         <span
@@ -53,7 +53,7 @@ exports[`CreateButton opens and closes the popover 2`] = `
       class="euiPopover__anchor"
     >
       <button
-        class="euiButton euiButton--primary"
+        class="euiButton euiButton--primary euiButton--small"
         type="button"
       >
         <span
diff --git a/public/components/SQLPage/__tests__/__snapshots__/acceleration_index_flyout.test.tsx.snap b/public/components/SQLPage/__tests__/__snapshots__/acceleration_index_flyout.test.tsx.snap
index 116193f0..86efda67 100644
--- a/public/components/SQLPage/__tests__/__snapshots__/acceleration_index_flyout.test.tsx.snap
+++ b/public/components/SQLPage/__tests__/__snapshots__/acceleration_index_flyout.test.tsx.snap
@@ -172,7 +172,7 @@ Array [
                   class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--flushLeft"
                     type="button"
                   >
                     <span
@@ -480,7 +480,7 @@ Array [
                   className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--flushLeft"
                     disabled={false}
                     onClick={[MockFunction]}
                     type="button"
@@ -801,7 +801,7 @@ Array [
                   class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--flushLeft"
                     type="button"
                   >
                     <span
@@ -1105,7 +1105,7 @@ Array [
                   className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--flushLeft"
                     disabled={false}
                     onClick={[MockFunction]}
                     type="button"
@@ -1410,7 +1410,7 @@ Array [
                   class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--flushLeft"
                     type="button"
                   >
                     <span
@@ -1706,7 +1706,7 @@ Array [
                   className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--flushLeft"
                     disabled={false}
                     onClick={[MockFunction]}
                     type="button"
diff --git a/public/components/SQLPage/acceleration_index_flyout.tsx b/public/components/SQLPage/acceleration_index_flyout.tsx
index 06b118dc..f85510f6 100644
--- a/public/components/SQLPage/acceleration_index_flyout.tsx
+++ b/public/components/SQLPage/acceleration_index_flyout.tsx
@@ -5,7 +5,7 @@
 
 import {
   EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiDescriptionList,
   EuiDescriptionListDescription,
   EuiDescriptionListTitle,
@@ -139,9 +139,9 @@ export const AccelerationIndexFlyout = ({
         <EuiFlyoutFooter>
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty iconType="cross" onClick={resetFlyout} flush="left">
+              <EuiSmallButtonEmpty iconType="cross" onClick={resetFlyout} flush="left">
                 Close
-              </EuiButtonEmpty>
+              </EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiFlexGroup>
diff --git a/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap b/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap
index 55866b92..20ad56df 100644
--- a/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap
+++ b/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap
@@ -147,7 +147,7 @@ Array [
                       class="euiSpacer euiSpacer--s"
                     />
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="some_html_id-row"
                     >
                       <div
@@ -168,17 +168,17 @@ Array [
                           aria-describedby="some_html_id-help-0"
                           aria-expanded="false"
                           aria-haspopup="listbox"
-                          class="euiComboBox"
+                          class="euiComboBox euiComboBox--compressed"
                           role="combobox"
                         >
                           <div
-                            class="euiFormControlLayout"
+                            class="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               class="euiFormControlLayout__childrenWrapper"
                             >
                               <div
-                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                 data-test-subj="comboBoxInput"
                                 tabindex="-1"
                               >
@@ -215,7 +215,7 @@ Array [
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height="16"
                                     role="img"
@@ -241,7 +241,7 @@ Array [
                       </div>
                     </div>
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="some_html_id-row"
                     >
                       <div
@@ -262,17 +262,17 @@ Array [
                           aria-describedby="some_html_id-help-0"
                           aria-expanded="false"
                           aria-haspopup="listbox"
-                          class="euiComboBox"
+                          class="euiComboBox euiComboBox--compressed"
                           role="combobox"
                         >
                           <div
-                            class="euiFormControlLayout"
+                            class="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               class="euiFormControlLayout__childrenWrapper"
                             >
                               <div
-                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                 data-test-subj="comboBoxInput"
                                 tabindex="-1"
                               >
@@ -309,7 +309,7 @@ Array [
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height="16"
                                     role="img"
@@ -335,7 +335,7 @@ Array [
                       </div>
                     </div>
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="some_html_id-row"
                     >
                       <div
@@ -356,17 +356,17 @@ Array [
                           aria-describedby="some_html_id-help-0"
                           aria-expanded="false"
                           aria-haspopup="listbox"
-                          class="euiComboBox"
+                          class="euiComboBox euiComboBox--compressed"
                           role="combobox"
                         >
                           <div
-                            class="euiFormControlLayout"
+                            class="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               class="euiFormControlLayout__childrenWrapper"
                             >
                               <div
-                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                 data-test-subj="comboBoxInput"
                                 tabindex="-1"
                               >
@@ -403,7 +403,7 @@ Array [
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height="16"
                                     role="img"
@@ -443,7 +443,7 @@ Array [
                       class="euiSpacer euiSpacer--s"
                     />
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="some_html_id-row"
                     >
                       <div
@@ -496,17 +496,17 @@ Array [
                           aria-describedby="some_html_id-help-0"
                           aria-expanded="false"
                           aria-haspopup="listbox"
-                          class="euiComboBox"
+                          class="euiComboBox euiComboBox--compressed"
                           role="combobox"
                         >
                           <div
-                            class="euiFormControlLayout"
+                            class="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               class="euiFormControlLayout__childrenWrapper"
                             >
                               <div
-                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                 data-test-subj="comboBoxInput"
                                 tabindex="-1"
                               >
@@ -544,7 +544,7 @@ Array [
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height="16"
                                     role="img"
@@ -570,7 +570,7 @@ Array [
                       </div>
                     </div>
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="some_html_id-row"
                     >
                       <div
@@ -588,7 +588,7 @@ Array [
                         class="euiFormRow__fieldWrapper"
                       >
                         <div
-                          class="euiFormControlLayout"
+                          class="euiFormControlLayout euiFormControlLayout--compressed"
                         >
                           <div
                             class="euiFormControlLayout__childrenWrapper"
@@ -596,7 +596,7 @@ Array [
                             <input
                               aria-describedby="some_html_id-help-0"
                               aria-label="Number of primary shards"
-                              class="euiFieldNumber"
+                              class="euiFieldNumber euiFieldNumber--compressed"
                               id="some_html_id"
                               max="100"
                               min="1"
@@ -615,7 +615,7 @@ Array [
                       </div>
                     </div>
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="some_html_id-row"
                     >
                       <div
@@ -633,7 +633,7 @@ Array [
                         class="euiFormRow__fieldWrapper"
                       >
                         <div
-                          class="euiFormControlLayout"
+                          class="euiFormControlLayout euiFormControlLayout--compressed"
                         >
                           <div
                             class="euiFormControlLayout__childrenWrapper"
@@ -641,7 +641,7 @@ Array [
                             <input
                               aria-describedby="some_html_id-help-0"
                               aria-label="Number of replicas"
-                              class="euiFieldNumber"
+                              class="euiFieldNumber euiFieldNumber--compressed"
                               id="some_html_id"
                               max="100"
                               min="0"
@@ -660,7 +660,7 @@ Array [
                       </div>
                     </div>
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="some_html_id-row"
                     >
                       <div
@@ -681,7 +681,7 @@ Array [
                           id="some_html_id"
                         >
                           <div
-                            class="euiRadio euiRadioGroup__item"
+                            class="euiRadio euiRadio--compressed euiRadioGroup__item"
                           >
                             <input
                               checked=""
@@ -702,7 +702,7 @@ Array [
                             </label>
                           </div>
                           <div
-                            class="euiRadio euiRadioGroup__item"
+                            class="euiRadio euiRadio--compressed euiRadioGroup__item"
                           >
                             <input
                               class="euiRadio__input"
@@ -722,7 +722,7 @@ Array [
                             </label>
                           </div>
                           <div
-                            class="euiRadio euiRadioGroup__item"
+                            class="euiRadio euiRadio--compressed euiRadioGroup__item"
                           >
                             <input
                               class="euiRadio__input"
@@ -751,7 +751,7 @@ Array [
                       </div>
                     </div>
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="some_html_id-row"
                     >
                       <div
@@ -769,7 +769,7 @@ Array [
                         class="euiFormRow__fieldWrapper"
                       >
                         <div
-                          class="euiFormControlLayout"
+                          class="euiFormControlLayout euiFormControlLayout--compressed"
                         >
                           <div
                             class="euiFormControlLayout__childrenWrapper"
@@ -777,7 +777,7 @@ Array [
                             <input
                               aria-describedby="some_html_id-help-0"
                               aria-label="Use aria labels when no actual label is in use"
-                              class="euiFieldText"
+                              class="euiFieldText euiFieldText--compressed"
                               id="some_html_id"
                               placeholder="s3://checkpoint/location"
                               type="text"
@@ -808,7 +808,7 @@ Array [
                       class="euiSpacer euiSpacer--s"
                     />
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="some_html_id-row"
                     >
                       <div
@@ -837,7 +837,7 @@ Array [
                         class="euiFormRow__fieldWrapper"
                       >
                         <div
-                          class="euiFormControlLayout euiFormControlLayout--group"
+                          class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                         >
                           <label
                             class="euiFormLabel euiFormControlLayout__prepend"
@@ -871,7 +871,7 @@ Array [
                             <input
                               aria-describedby="some_html_id-help-0"
                               aria-label="Enter Index Name"
-                              class="euiFieldText euiFieldText--inGroup"
+                              class="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
                               disabled=""
                               id="some_html_id"
                               placeholder="Enter index name"
@@ -1040,7 +1040,7 @@ Array [
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
                         <button
-                          class="euiButton euiButton--primary euiButton--fill"
+                          class="euiButton euiButton--primary euiButton--small euiButton--fill"
                           type="button"
                         >
                           <span
@@ -1058,7 +1058,7 @@ Array [
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
                         <button
-                          class="euiButton euiButton--danger"
+                          class="euiButton euiButton--danger euiButton--small"
                           type="button"
                         >
                           <span
@@ -1087,7 +1087,7 @@ Array [
                   class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--flushLeft"
                     type="button"
                   >
                     <span
@@ -1119,7 +1119,7 @@ Array [
                   class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton--fill"
+                    class="euiButton euiButton--primary euiButton--small euiButton--fill"
                     type="button"
                   >
                     <span
@@ -1314,7 +1314,7 @@ Array [
                         className="euiSpacer euiSpacer--s"
                       />,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -1335,18 +1335,18 @@ Array [
                             aria-describedby="some_html_id-help-0"
                             aria-expanded={false}
                             aria-haspopup="listbox"
-                            className="euiComboBox"
+                            className="euiComboBox euiComboBox--compressed"
                             onKeyDown={[Function]}
                             role="combobox"
                           >
                             <div
-                              className="euiFormControlLayout"
+                              className="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 className="euiFormControlLayout__childrenWrapper"
                               >
                                 <div
-                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                   data-test-subj="comboBoxInput"
                                   onClick={[Function]}
                                   tabIndex={-1}
@@ -1408,7 +1408,7 @@ Array [
                                   >
                                     <svg
                                       aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height={16}
                                       role="img"
@@ -1435,7 +1435,7 @@ Array [
                         </div>
                       </div>,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -1456,18 +1456,18 @@ Array [
                             aria-describedby="some_html_id-help-0"
                             aria-expanded={false}
                             aria-haspopup="listbox"
-                            className="euiComboBox"
+                            className="euiComboBox euiComboBox--compressed"
                             onKeyDown={[Function]}
                             role="combobox"
                           >
                             <div
-                              className="euiFormControlLayout"
+                              className="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 className="euiFormControlLayout__childrenWrapper"
                               >
                                 <div
-                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                   data-test-subj="comboBoxInput"
                                   onClick={[Function]}
                                   tabIndex={-1}
@@ -1529,7 +1529,7 @@ Array [
                                   >
                                     <svg
                                       aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height={16}
                                       role="img"
@@ -1556,7 +1556,7 @@ Array [
                         </div>
                       </div>,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -1577,18 +1577,18 @@ Array [
                             aria-describedby="some_html_id-help-0"
                             aria-expanded={false}
                             aria-haspopup="listbox"
-                            className="euiComboBox"
+                            className="euiComboBox euiComboBox--compressed"
                             onKeyDown={[Function]}
                             role="combobox"
                           >
                             <div
-                              className="euiFormControlLayout"
+                              className="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 className="euiFormControlLayout__childrenWrapper"
                               >
                                 <div
-                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                   data-test-subj="comboBoxInput"
                                   onClick={[Function]}
                                   tabIndex={-1}
@@ -1650,7 +1650,7 @@ Array [
                                   >
                                     <svg
                                       aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height={16}
                                       role="img"
@@ -1693,7 +1693,7 @@ Array [
                         className="euiSpacer euiSpacer--s"
                       />,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -1747,18 +1747,18 @@ Array [
                             aria-describedby="some_html_id-help-0"
                             aria-expanded={false}
                             aria-haspopup="listbox"
-                            className="euiComboBox"
+                            className="euiComboBox euiComboBox--compressed"
                             onKeyDown={[Function]}
                             role="combobox"
                           >
                             <div
-                              className="euiFormControlLayout"
+                              className="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 className="euiFormControlLayout__childrenWrapper"
                               >
                                 <div
-                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                   data-test-subj="comboBoxInput"
                                   onClick={[Function]}
                                   tabIndex={-1}
@@ -1821,7 +1821,7 @@ Array [
                                   >
                                     <svg
                                       aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height={16}
                                       role="img"
@@ -1848,7 +1848,7 @@ Array [
                         </div>
                       </div>,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -1866,7 +1866,7 @@ Array [
                           className="euiFormRow__fieldWrapper"
                         >
                           <div
-                            className="euiFormControlLayout"
+                            className="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               className="euiFormControlLayout__childrenWrapper"
@@ -1874,7 +1874,7 @@ Array [
                               <input
                                 aria-describedby="some_html_id-help-0"
                                 aria-label="Number of primary shards"
-                                className="euiFieldNumber"
+                                className="euiFieldNumber euiFieldNumber--compressed"
                                 id="some_html_id"
                                 max={100}
                                 min={1}
@@ -1896,7 +1896,7 @@ Array [
                         </div>
                       </div>,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -1914,7 +1914,7 @@ Array [
                           className="euiFormRow__fieldWrapper"
                         >
                           <div
-                            className="euiFormControlLayout"
+                            className="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               className="euiFormControlLayout__childrenWrapper"
@@ -1922,7 +1922,7 @@ Array [
                               <input
                                 aria-describedby="some_html_id-help-0"
                                 aria-label="Number of replicas"
-                                className="euiFieldNumber"
+                                className="euiFieldNumber euiFieldNumber--compressed"
                                 id="some_html_id"
                                 max={100}
                                 min={0}
@@ -1944,7 +1944,7 @@ Array [
                         </div>
                       </div>,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -1967,7 +1967,7 @@ Array [
                             onFocus={[Function]}
                           >
                             <div
-                              className="euiRadio euiRadioGroup__item"
+                              className="euiRadio euiRadio--compressed euiRadioGroup__item"
                             >
                               <input
                                 checked={true}
@@ -1988,7 +1988,7 @@ Array [
                               </label>
                             </div>
                             <div
-                              className="euiRadio euiRadioGroup__item"
+                              className="euiRadio euiRadio--compressed euiRadioGroup__item"
                             >
                               <input
                                 checked={false}
@@ -2009,7 +2009,7 @@ Array [
                               </label>
                             </div>
                             <div
-                              className="euiRadio euiRadioGroup__item"
+                              className="euiRadio euiRadio--compressed euiRadioGroup__item"
                             >
                               <input
                                 checked={false}
@@ -2039,7 +2039,7 @@ Array [
                         </div>
                       </div>,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -2057,7 +2057,7 @@ Array [
                           className="euiFormRow__fieldWrapper"
                         >
                           <div
-                            className="euiFormControlLayout"
+                            className="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               className="euiFormControlLayout__childrenWrapper"
@@ -2065,7 +2065,7 @@ Array [
                               <input
                                 aria-describedby="some_html_id-help-0"
                                 aria-label="Use aria labels when no actual label is in use"
-                                className="euiFieldText"
+                                className="euiFieldText euiFieldText--compressed"
                                 id="some_html_id"
                                 onBlur={[Function]}
                                 onChange={[Function]}
@@ -2101,7 +2101,7 @@ Array [
                         className="euiSpacer euiSpacer--s"
                       />,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -2132,7 +2132,7 @@ Array [
                           className="euiFormRow__fieldWrapper"
                         >
                           <div
-                            className="euiFormControlLayout euiFormControlLayout--group"
+                            className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                           >
                             <label
                               className="euiFormLabel euiFormControlLayout__prepend"
@@ -2172,7 +2172,7 @@ Array [
                               <input
                                 aria-describedby="some_html_id-help-0"
                                 aria-label="Enter Index Name"
-                                className="euiFieldText euiFieldText--inGroup"
+                                className="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
                                 disabled={true}
                                 id="some_html_id"
                                 onBlur={[Function]}
@@ -2373,7 +2373,7 @@ Array [
                             className="euiFlexItem euiFlexItem--flexGrowZero"
                           >
                             <button
-                              className="euiButton euiButton--primary euiButton--fill"
+                              className="euiButton euiButton--primary euiButton--small euiButton--fill"
                               disabled={false}
                               onClick={[Function]}
                               style={
@@ -2398,7 +2398,7 @@ Array [
                             className="euiFlexItem euiFlexItem--flexGrowZero"
                           >
                             <button
-                              className="euiButton euiButton--danger"
+                              className="euiButton euiButton--danger euiButton--small"
                               disabled={false}
                               onClick={[Function]}
                               style={
@@ -2436,7 +2436,7 @@ Array [
                   className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--flushLeft"
                     disabled={false}
                     onClick={[MockFunction]}
                     type="button"
@@ -2471,7 +2471,7 @@ Array [
                   className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    className="euiButton euiButton--primary euiButton--fill"
+                    className="euiButton euiButton--primary euiButton--small euiButton--fill"
                     disabled={false}
                     onClick={[Function]}
                     style={
diff --git a/public/components/acceleration/create/create_acceleration.tsx b/public/components/acceleration/create/create_acceleration.tsx
index 82269449..85456666 100644
--- a/public/components/acceleration/create/create_acceleration.tsx
+++ b/public/components/acceleration/create/create_acceleration.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
@@ -139,14 +139,14 @@ export const CreateAcceleration = ({
         <EuiFlyoutFooter>
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty iconType="cross" onClick={resetFlyout} flush="left">
+              <EuiSmallButtonEmpty iconType="cross" onClick={resetFlyout} flush="left">
                 Close
-              </EuiButtonEmpty>
+              </EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton onClick={copyToEditor} fill>
+              <EuiSmallButton onClick={copyToEditor} fill>
                 Copy Query to Editor
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlyoutFooter>
diff --git a/public/components/acceleration/selectors/__tests__/__snapshots__/define_index_options.test.tsx.snap b/public/components/acceleration/selectors/__tests__/__snapshots__/define_index_options.test.tsx.snap
index 15915e36..514f7ada 100644
--- a/public/components/acceleration/selectors/__tests__/__snapshots__/define_index_options.test.tsx.snap
+++ b/public/components/acceleration/selectors/__tests__/__snapshots__/define_index_options.test.tsx.snap
@@ -14,7 +14,7 @@ Array [
     className="euiSpacer euiSpacer--s"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -45,7 +45,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout euiFormControlLayout--group"
+        className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
       >
         <label
           className="euiFormLabel euiFormControlLayout__prepend"
@@ -85,7 +85,7 @@ Array [
           <input
             aria-describedby="some_html_id-help-0"
             aria-label="Enter Index Name"
-            className="euiFieldText euiFieldText--inGroup"
+            className="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
             disabled={false}
             id="some_html_id"
             onBlur={[Function]}
@@ -129,7 +129,7 @@ Array [
     className="euiSpacer euiSpacer--s"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -160,7 +160,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout euiFormControlLayout--group"
+        className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
       >
         <label
           className="euiFormLabel euiFormControlLayout__prepend"
@@ -200,7 +200,7 @@ Array [
           <input
             aria-describedby="some_html_id-help-0"
             aria-label="Enter Index Name"
-            className="euiFieldText euiFieldText--inGroup"
+            className="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
             disabled={true}
             id="some_html_id"
             onBlur={[Function]}
@@ -244,7 +244,7 @@ Array [
     className="euiSpacer euiSpacer--s"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -275,7 +275,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout euiFormControlLayout--group"
+        className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
       >
         <label
           className="euiFormLabel euiFormControlLayout__prepend"
@@ -315,7 +315,7 @@ Array [
           <input
             aria-describedby="some_html_id-help-0"
             aria-label="Enter Index Name"
-            className="euiFieldText euiFieldText--inGroup"
+            className="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
             disabled={false}
             id="some_html_id"
             onBlur={[Function]}
diff --git a/public/components/acceleration/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap b/public/components/acceleration/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap
index be7624c9..cc0f0006 100644
--- a/public/components/acceleration/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap
+++ b/public/components/acceleration/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap
@@ -14,7 +14,7 @@ Array [
     className="euiSpacer euiSpacer--s"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -68,18 +68,18 @@ Array [
         aria-describedby="some_html_id-help-0"
         aria-expanded={false}
         aria-haspopup="listbox"
-        className="euiComboBox"
+        className="euiComboBox euiComboBox--compressed"
         onKeyDown={[Function]}
         role="combobox"
       >
         <div
-          className="euiFormControlLayout"
+          className="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             className="euiFormControlLayout__childrenWrapper"
           >
             <div
-              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               onClick={[Function]}
               tabIndex={-1}
@@ -142,7 +142,7 @@ Array [
               >
                 <svg
                   aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height={16}
                   role="img"
@@ -169,7 +169,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -187,7 +187,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -195,7 +195,7 @@ Array [
           <input
             aria-describedby="some_html_id-help-0"
             aria-label="Number of primary shards"
-            className="euiFieldNumber"
+            className="euiFieldNumber euiFieldNumber--compressed"
             id="some_html_id"
             max={100}
             min={1}
@@ -217,7 +217,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -235,7 +235,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -243,7 +243,7 @@ Array [
           <input
             aria-describedby="some_html_id-help-0"
             aria-label="Number of replicas"
-            className="euiFieldNumber"
+            className="euiFieldNumber euiFieldNumber--compressed"
             id="some_html_id"
             max={100}
             min={0}
@@ -265,7 +265,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -288,7 +288,7 @@ Array [
         onFocus={[Function]}
       >
         <div
-          className="euiRadio euiRadioGroup__item"
+          className="euiRadio euiRadio--compressed euiRadioGroup__item"
         >
           <input
             checked={true}
@@ -309,7 +309,7 @@ Array [
           </label>
         </div>
         <div
-          className="euiRadio euiRadioGroup__item"
+          className="euiRadio euiRadio--compressed euiRadioGroup__item"
         >
           <input
             checked={false}
@@ -330,7 +330,7 @@ Array [
           </label>
         </div>
         <div
-          className="euiRadio euiRadioGroup__item"
+          className="euiRadio euiRadio--compressed euiRadioGroup__item"
         >
           <input
             checked={false}
@@ -360,7 +360,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -378,7 +378,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -386,7 +386,7 @@ Array [
           <input
             aria-describedby="some_html_id-help-0"
             aria-label="Use aria labels when no actual label is in use"
-            className="euiFieldText"
+            className="euiFieldText euiFieldText--compressed"
             id="some_html_id"
             onBlur={[Function]}
             onChange={[Function]}
@@ -422,7 +422,7 @@ Array [
     className="euiSpacer euiSpacer--s"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -475,18 +475,18 @@ Array [
         aria-describedby="some_html_id-help-0"
         aria-expanded={false}
         aria-haspopup="listbox"
-        className="euiComboBox"
+        className="euiComboBox euiComboBox--compressed"
         onKeyDown={[Function]}
         role="combobox"
       >
         <div
-          className="euiFormControlLayout"
+          className="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             className="euiFormControlLayout__childrenWrapper"
           >
             <div
-              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               onClick={[Function]}
               tabIndex={-1}
@@ -549,7 +549,7 @@ Array [
               >
                 <svg
                   aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height={16}
                   role="img"
@@ -577,7 +577,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -595,7 +595,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -603,7 +603,7 @@ Array [
           <input
             aria-describedby="some_html_id-help-0"
             aria-label="Number of primary shards"
-            className="euiFieldNumber"
+            className="euiFieldNumber euiFieldNumber--compressed"
             id="some_html_id"
             max={100}
             min={1}
@@ -625,7 +625,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -643,7 +643,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -651,7 +651,7 @@ Array [
           <input
             aria-describedby="some_html_id-help-0"
             aria-label="Number of replicas"
-            className="euiFieldNumber"
+            className="euiFieldNumber euiFieldNumber--compressed"
             id="some_html_id"
             max={100}
             min={0}
@@ -673,7 +673,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -696,7 +696,7 @@ Array [
         onFocus={[Function]}
       >
         <div
-          className="euiRadio euiRadioGroup__item"
+          className="euiRadio euiRadio--compressed euiRadioGroup__item"
         >
           <input
             checked={true}
@@ -717,7 +717,7 @@ Array [
           </label>
         </div>
         <div
-          className="euiRadio euiRadioGroup__item"
+          className="euiRadio euiRadio--compressed euiRadioGroup__item"
         >
           <input
             checked={false}
@@ -738,7 +738,7 @@ Array [
           </label>
         </div>
         <div
-          className="euiRadio euiRadioGroup__item"
+          className="euiRadio euiRadio--compressed euiRadioGroup__item"
         >
           <input
             checked={false}
@@ -768,7 +768,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -786,7 +786,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -794,7 +794,7 @@ Array [
           <input
             aria-describedby="some_html_id-help-0"
             aria-label="Use aria labels when no actual label is in use"
-            className="euiFieldText"
+            className="euiFieldText euiFieldText--compressed"
             id="some_html_id"
             onBlur={[Function]}
             onChange={[Function]}
@@ -830,7 +830,7 @@ Array [
     className="euiSpacer euiSpacer--s"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -883,18 +883,18 @@ Array [
         aria-describedby="some_html_id-help-0"
         aria-expanded={false}
         aria-haspopup="listbox"
-        className="euiComboBox"
+        className="euiComboBox euiComboBox--compressed"
         onKeyDown={[Function]}
         role="combobox"
       >
         <div
-          className="euiFormControlLayout"
+          className="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             className="euiFormControlLayout__childrenWrapper"
           >
             <div
-              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               onClick={[Function]}
               tabIndex={-1}
@@ -957,7 +957,7 @@ Array [
               >
                 <svg
                   aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height={16}
                   role="img"
@@ -985,7 +985,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -1003,7 +1003,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -1011,7 +1011,7 @@ Array [
           <input
             aria-describedby="some_html_id-help-0"
             aria-label="Number of primary shards"
-            className="euiFieldNumber"
+            className="euiFieldNumber euiFieldNumber--compressed"
             id="some_html_id"
             max={100}
             min={1}
@@ -1033,7 +1033,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -1051,7 +1051,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -1059,7 +1059,7 @@ Array [
           <input
             aria-describedby="some_html_id-help-0"
             aria-label="Number of replicas"
-            className="euiFieldNumber"
+            className="euiFieldNumber euiFieldNumber--compressed"
             id="some_html_id"
             max={100}
             min={0}
@@ -1081,7 +1081,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -1104,7 +1104,7 @@ Array [
         onFocus={[Function]}
       >
         <div
-          className="euiRadio euiRadioGroup__item"
+          className="euiRadio euiRadio--compressed euiRadioGroup__item"
         >
           <input
             checked={true}
@@ -1125,7 +1125,7 @@ Array [
           </label>
         </div>
         <div
-          className="euiRadio euiRadioGroup__item"
+          className="euiRadio euiRadio--compressed euiRadioGroup__item"
         >
           <input
             checked={false}
@@ -1146,7 +1146,7 @@ Array [
           </label>
         </div>
         <div
-          className="euiRadio euiRadioGroup__item"
+          className="euiRadio euiRadio--compressed euiRadioGroup__item"
         >
           <input
             checked={false}
@@ -1176,7 +1176,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -1194,7 +1194,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -1202,7 +1202,7 @@ Array [
           <input
             aria-describedby="some_html_id-help-0"
             aria-label="Use aria labels when no actual label is in use"
-            className="euiFieldText"
+            className="euiFieldText euiFieldText--compressed"
             id="some_html_id"
             onBlur={[Function]}
             onChange={[Function]}
diff --git a/public/components/acceleration/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap b/public/components/acceleration/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap
index 7c9a22d4..3ef3a170 100644
--- a/public/components/acceleration/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap
+++ b/public/components/acceleration/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Index type selector components renders type selector with default options 1`] = `
 <div
-  className="euiFormRow"
+  className="euiFormRow euiFormRow--compressed"
   id="some_html_id-row"
 >
   <div
@@ -56,18 +56,18 @@ exports[`Index type selector components renders type selector with default optio
       aria-describedby="some_html_id-help-0"
       aria-expanded={false}
       aria-haspopup="listbox"
-      className="euiComboBox"
+      className="euiComboBox euiComboBox--compressed"
       onKeyDown={[Function]}
       role="combobox"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
         >
           <div
-            className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+            className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
             data-test-subj="comboBoxInput"
             onClick={[Function]}
             tabIndex={-1}
@@ -130,7 +130,7 @@ exports[`Index type selector components renders type selector with default optio
             >
               <svg
                 aria-hidden={true}
-                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                 focusable="false"
                 height={16}
                 role="img"
@@ -160,7 +160,7 @@ exports[`Index type selector components renders type selector with default optio
 
 exports[`Index type selector components renders type selector with different options 1`] = `
 <div
-  className="euiFormRow"
+  className="euiFormRow euiFormRow--compressed"
   id="some_html_id-row"
 >
   <div
@@ -213,18 +213,18 @@ exports[`Index type selector components renders type selector with different opt
       aria-describedby="some_html_id-help-0"
       aria-expanded={false}
       aria-haspopup="listbox"
-      className="euiComboBox"
+      className="euiComboBox euiComboBox--compressed"
       onKeyDown={[Function]}
       role="combobox"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
         >
           <div
-            className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+            className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
             data-test-subj="comboBoxInput"
             onClick={[Function]}
             tabIndex={-1}
@@ -287,7 +287,7 @@ exports[`Index type selector components renders type selector with different opt
             >
               <svg
                 aria-hidden={true}
-                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                 focusable="false"
                 height={16}
                 role="img"
diff --git a/public/components/acceleration/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap b/public/components/acceleration/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap
index 8daa8dce..7d1dd8bc 100644
--- a/public/components/acceleration/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap
+++ b/public/components/acceleration/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap
@@ -26,7 +26,7 @@ Array [
     className="euiSpacer euiSpacer--s"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -47,18 +47,18 @@ Array [
         aria-describedby="some_html_id-help-0"
         aria-expanded={false}
         aria-haspopup="listbox"
-        className="euiComboBox"
+        className="euiComboBox euiComboBox--compressed"
         onKeyDown={[Function]}
         role="combobox"
       >
         <div
-          className="euiFormControlLayout"
+          className="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             className="euiFormControlLayout__childrenWrapper"
           >
             <div
-              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               onClick={[Function]}
               tabIndex={-1}
@@ -120,7 +120,7 @@ Array [
               >
                 <svg
                   aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height={16}
                   role="img"
@@ -147,7 +147,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -168,18 +168,18 @@ Array [
         aria-describedby="some_html_id-help-0"
         aria-expanded={false}
         aria-haspopup="listbox"
-        className="euiComboBox"
+        className="euiComboBox euiComboBox--compressed"
         onKeyDown={[Function]}
         role="combobox"
       >
         <div
-          className="euiFormControlLayout"
+          className="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             className="euiFormControlLayout__childrenWrapper"
           >
             <div
-              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               onClick={[Function]}
               tabIndex={-1}
@@ -241,7 +241,7 @@ Array [
               >
                 <svg
                   aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height={16}
                   role="img"
@@ -268,7 +268,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -289,18 +289,18 @@ Array [
         aria-describedby="some_html_id-help-0"
         aria-expanded={false}
         aria-haspopup="listbox"
-        className="euiComboBox"
+        className="euiComboBox euiComboBox--compressed"
         onKeyDown={[Function]}
         role="combobox"
       >
         <div
-          className="euiFormControlLayout"
+          className="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             className="euiFormControlLayout__childrenWrapper"
           >
             <div
-              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               onClick={[Function]}
               tabIndex={-1}
@@ -362,7 +362,7 @@ Array [
               >
                 <svg
                   aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height={16}
                   role="img"
@@ -417,7 +417,7 @@ Array [
     className="euiSpacer euiSpacer--s"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -438,18 +438,18 @@ Array [
         aria-describedby="some_html_id-help-0"
         aria-expanded={false}
         aria-haspopup="listbox"
-        className="euiComboBox"
+        className="euiComboBox euiComboBox--compressed"
         onKeyDown={[Function]}
         role="combobox"
       >
         <div
-          className="euiFormControlLayout"
+          className="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             className="euiFormControlLayout__childrenWrapper"
           >
             <div
-              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               onClick={[Function]}
               tabIndex={-1}
@@ -511,7 +511,7 @@ Array [
               >
                 <svg
                   aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height={16}
                   role="img"
@@ -539,7 +539,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -560,18 +560,18 @@ Array [
         aria-describedby="some_html_id-help-0"
         aria-expanded={false}
         aria-haspopup="listbox"
-        className="euiComboBox"
+        className="euiComboBox euiComboBox--compressed"
         onKeyDown={[Function]}
         role="combobox"
       >
         <div
-          className="euiFormControlLayout"
+          className="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             className="euiFormControlLayout__childrenWrapper"
           >
             <div
-              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               onClick={[Function]}
               tabIndex={-1}
@@ -633,7 +633,7 @@ Array [
               >
                 <svg
                   aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height={16}
                   role="img"
@@ -661,7 +661,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -682,18 +682,18 @@ Array [
         aria-describedby="some_html_id-help-0"
         aria-expanded={false}
         aria-haspopup="listbox"
-        className="euiComboBox"
+        className="euiComboBox euiComboBox--compressed"
         onKeyDown={[Function]}
         role="combobox"
       >
         <div
-          className="euiFormControlLayout"
+          className="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             className="euiFormControlLayout__childrenWrapper"
           >
             <div
-              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading"
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading"
               data-test-subj="comboBoxInput"
               onClick={[Function]}
               tabIndex={-1}
@@ -758,7 +758,7 @@ Array [
               >
                 <svg
                   aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height={16}
                   role="img"
diff --git a/public/components/acceleration/selectors/define_index_options.tsx b/public/components/acceleration/selectors/define_index_options.tsx
index 9f8c89b8..f80e3170 100644
--- a/public/components/acceleration/selectors/define_index_options.tsx
+++ b/public/components/acceleration/selectors/define_index_options.tsx
@@ -4,11 +4,11 @@
  */
 
 import {
-  EuiButton,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiIconTip,
   EuiLink,
   EuiMarkdownFormat,
@@ -52,9 +52,9 @@ export const DefineIndexOptions = ({
         </EuiFlexGroup>
       </EuiModalBody>
       <EuiModalFooter>
-        <EuiButton onClick={() => setModalComponent(<></>)} fill>
+        <EuiSmallButton onClick={() => setModalComponent(<></>)} fill>
           Close
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
@@ -94,7 +94,7 @@ export const DefineIndexOptions = ({
         <h3>Index settings</h3>
       </EuiText>
       <EuiSpacer size="s" />
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Index name"
         helpText='Must be in lowercase letters. Cannot begin with underscores. Spaces, commas, and characters -, :, ", *, +, /, \, |, ?, #, >, or < are not allowed. Prefix and suffix are added to the name of generated OpenSearch index.'
         isInvalid={hasError(accelerationFormData.formErrors, 'indexNameError')}
@@ -105,7 +105,7 @@ export const DefineIndexOptions = ({
           </EuiText>
         }
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           placeholder="Enter index name"
           value={accelerationFormData.accelerationIndexName}
           onChange={onChangeIndexName}
@@ -122,7 +122,7 @@ export const DefineIndexOptions = ({
             );
           }}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
       {modalComponent}
     </>
   );
diff --git a/public/components/acceleration/selectors/index_setting_options.tsx b/public/components/acceleration/selectors/index_setting_options.tsx
index 12cd2829..604d1074 100644
--- a/public/components/acceleration/selectors/index_setting_options.tsx
+++ b/public/components/acceleration/selectors/index_setting_options.tsx
@@ -4,11 +4,11 @@
  */
 
 import {
-  EuiFieldNumber,
-  EuiFieldText,
-  EuiFormRow,
-  EuiRadioGroup,
-  EuiSelect,
+  EuiCompressedFieldNumber,
+  EuiCompressedFieldText,
+  EuiCompressedFormRow,
+  EuiCompressedRadioGroup,
+  EuiCompressedSelect,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
@@ -150,13 +150,13 @@ export const IndexSettingOptions = ({
         accelerationFormData={accelerationFormData}
         setAccelerationFormData={setAccelerationFormData}
       />
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Number of primary shards"
         helpText="Specify the number of primary shards for the index. The number of primary shards cannot be changed after the index is created."
         isInvalid={hasError(accelerationFormData.formErrors, 'primaryShardsError')}
         error={accelerationFormData.formErrors.primaryShardsError}
       >
-        <EuiFieldNumber
+        <EuiCompressedFieldNumber
           placeholder="Number of primary shards"
           value={primaryShards}
           onChange={onChangePrimaryShards}
@@ -174,14 +174,14 @@ export const IndexSettingOptions = ({
           }}
           isInvalid={hasError(accelerationFormData.formErrors, 'primaryShardsError')}
         />
-      </EuiFormRow>
-      <EuiFormRow
+      </EuiCompressedFormRow>
+      <EuiCompressedFormRow
         label="Number of replicas"
         helpText="Specify the number of replicas each primary shard should have."
         isInvalid={hasError(accelerationFormData.formErrors, 'replicaShardsError')}
         error={accelerationFormData.formErrors.replicaShardsError}
       >
-        <EuiFieldNumber
+        <EuiCompressedFieldNumber
           placeholder="Number of replicas"
           value={replicaCount}
           onChange={onChangeReplicaCount}
@@ -199,26 +199,26 @@ export const IndexSettingOptions = ({
           }}
           isInvalid={hasError(accelerationFormData.formErrors, 'replicaShardsError')}
         />
-      </EuiFormRow>
-      <EuiFormRow
+      </EuiCompressedFormRow>
+      <EuiCompressedFormRow
         label="Refresh type"
         helpText="Specify how often the index should refresh, which publishes the most recent changes and make them available for search."
       >
-        <EuiRadioGroup
+        <EuiCompressedRadioGroup
           options={refreshOptions}
           idSelected={refreshTypeSelected}
           onChange={onChangeRefreshType}
           name="refresh type radio group"
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
       {refreshTypeSelected === intervalRefreshId && (
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="Refresh interval"
           helpText="Specify how often the index should refresh, which publishes the most recent changes and make them available for search"
           isInvalid={hasError(accelerationFormData.formErrors, 'refreshIntervalError')}
           error={accelerationFormData.formErrors.refreshIntervalError}
         >
-          <EuiFieldNumber
+          <EuiCompressedFieldNumber
             placeholder="Refresh interval"
             value={refreshWindow}
             onChange={onChangeRefreshWindow}
@@ -236,23 +236,23 @@ export const IndexSettingOptions = ({
               );
             }}
             append={
-              <EuiSelect
+              <EuiCompressedSelect
                 value={refreshInterval}
                 onChange={onChangeRefreshInterval}
                 options={ACCELERATION_TIME_INTERVAL}
               />
             }
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
       {refreshTypeSelected !== manualRefreshId && (
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="Checkpoint location"
           helpText="The HDFS compatible file system location path for incremental refresh job checkpoint."
           isInvalid={hasError(accelerationFormData.formErrors, 'checkpointLocationError')}
           error={accelerationFormData.formErrors.checkpointLocationError}
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             placeholder="s3://checkpoint/location"
             value={checkpoint}
             onChange={onChangeCheckpoint}
@@ -269,16 +269,16 @@ export const IndexSettingOptions = ({
               );
             }}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
       {accelerationFormData.accelerationIndexType === 'materialized' && (
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="Watermark Delay"
           helpText="Data arrival delay for incremental refresh on a materialized view with aggregations"
           isInvalid={hasError(accelerationFormData.formErrors, 'watermarkDelayError')}
           error={accelerationFormData.formErrors.watermarkDelayError}
         >
-          <EuiFieldNumber
+          <EuiCompressedFieldNumber
             placeholder="Watermark delay interval"
             value={delayWindow}
             onChange={onChangeDelayWindow}
@@ -296,14 +296,14 @@ export const IndexSettingOptions = ({
               );
             }}
             append={
-              <EuiSelect
+              <EuiCompressedSelect
                 value={delayInterval}
                 onChange={onChangeDelayInterval}
                 options={ACCELERATION_TIME_INTERVAL}
               />
             }
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
     </>
   );
diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/public/components/acceleration/selectors/index_type_selector.tsx
index 22c364d0..ad1b2c7e 100644
--- a/public/components/acceleration/selectors/index_type_selector.tsx
+++ b/public/components/acceleration/selectors/index_type_selector.tsx
@@ -4,9 +4,9 @@
  */
 
 import {
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLink,
   EuiText,
   htmlIdGenerator,
@@ -90,7 +90,7 @@ export const IndexTypeSelector = ({
   };
   return (
     <>
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Index type"
         helpText="Select the type of index you want to create. Each index type has benefits and costs."
         labelAppend={
@@ -101,7 +101,7 @@ export const IndexTypeSelector = ({
           </EuiText>
         }
       >
-        <EuiComboBox
+        <EuiCompressedComboBox
           placeholder="Select an index type"
           singleSelection={{ asPlainText: true }}
           options={ACCELERATION_INDEX_TYPES}
@@ -111,7 +111,7 @@ export const IndexTypeSelector = ({
           isClearable={false}
           isLoading={loading}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </>
   );
 };
diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx
index 793fcffd..1f734194 100644
--- a/public/components/acceleration/selectors/source_selector.tsx
+++ b/public/components/acceleration/selectors/source_selector.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiCompressedComboBox, EuiComboBoxOptionOption, EuiCompressedFormRow, EuiSpacer, EuiText } from '@elastic/eui';
 import producer from 'immer';
 import React, { useEffect, useState } from 'react';
 import { CoreStart } from '../../../../../../src/core/public';
@@ -153,13 +153,13 @@ export const AccelerationDataSourceSelector = ({
         Select the data source to accelerate data from. External data sources may take time to load.
       </EuiText>
       <EuiSpacer size="s" />
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Data source"
         helpText="A data source has to be configured and active to be able to select it and index data from."
         isInvalid={hasError(accelerationFormData.formErrors, 'dataSourceError')}
         error={accelerationFormData.formErrors.dataSourceError}
       >
-        <EuiComboBox
+        <EuiCompressedComboBox
           placeholder="Select a data source"
           singleSelection={{ asPlainText: true }}
           options={dataConnections}
@@ -181,14 +181,14 @@ export const AccelerationDataSourceSelector = ({
           isInvalid={hasError(accelerationFormData.formErrors, 'dataSourceError')}
           isLoading={loadingComboBoxes.dataSource}
         />
-      </EuiFormRow>
-      <EuiFormRow
+      </EuiCompressedFormRow>
+      <EuiCompressedFormRow
         label="Database"
         helpText="Select the database that contains the tables you'd like to use."
         isInvalid={hasError(accelerationFormData.formErrors, 'databaseError')}
         error={accelerationFormData.formErrors.databaseError}
       >
-        <EuiComboBox
+        <EuiCompressedComboBox
           placeholder="Select a database"
           singleSelection={{ asPlainText: true }}
           options={databases}
@@ -208,14 +208,14 @@ export const AccelerationDataSourceSelector = ({
           isInvalid={hasError(accelerationFormData.formErrors, 'databaseError')}
           isLoading={loadingComboBoxes.database}
         />
-      </EuiFormRow>
-      <EuiFormRow
+      </EuiCompressedFormRow>
+      <EuiCompressedFormRow
         label="Table"
         helpText="Select the Spark table that has the data you would like to index."
         isInvalid={hasError(accelerationFormData.formErrors, 'dataTableError')}
         error={accelerationFormData.formErrors.dataTableError}
       >
-        <EuiComboBox
+        <EuiCompressedComboBox
           placeholder="Select a table"
           singleSelection={{ asPlainText: true }}
           options={tables}
@@ -235,7 +235,7 @@ export const AccelerationDataSourceSelector = ({
           isInvalid={hasError(accelerationFormData.formErrors, 'dataTableError')}
           isLoading={loadingComboBoxes.dataTable}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </>
   );
 };
diff --git a/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap b/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap
index c0f17a0c..de64c69b 100644
--- a/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap
+++ b/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap
@@ -257,7 +257,7 @@ Array [
         className="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          className="euiButton euiButton--primary euiButton--fill"
+          className="euiButton euiButton--primary euiButton--small euiButton--fill"
           disabled={false}
           onClick={[Function]}
           style={
@@ -282,7 +282,7 @@ Array [
         className="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          className="euiButton euiButton--danger"
+          className="euiButton euiButton--danger euiButton--small"
           disabled={false}
           onClick={[Function]}
           style={
@@ -662,14 +662,14 @@ Array [
                   className="euiTableCellContent euiTableCellContent--overflowingContent"
                 >
                   <div
-                    className="euiFormControlLayout"
+                    className="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       className="euiFormControlLayout__childrenWrapper"
                     >
                       <select
                         aria-label="Use aria labels when no actual label is in use"
-                        className="euiSelect"
+                        className="euiSelect euiSelect--compressed"
                         id="selectDocExample"
                         onChange={[Function]}
                         onMouseUp={[Function]}
@@ -702,7 +702,7 @@ Array [
                         >
                           <svg
                             aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                             focusable="false"
                             height={16}
                             role="img"
@@ -738,7 +738,7 @@ Array [
                   className="euiTableCellContent euiTableCellContent--overflowingContent"
                 >
                   <button
-                    className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                    className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
                     disabled={false}
                     onClick={[Function]}
                     type="button"
@@ -828,14 +828,14 @@ Array [
                   className="euiTableCellContent euiTableCellContent--overflowingContent"
                 >
                   <div
-                    className="euiFormControlLayout"
+                    className="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       className="euiFormControlLayout__childrenWrapper"
                     >
                       <select
                         aria-label="Use aria labels when no actual label is in use"
-                        className="euiSelect"
+                        className="euiSelect euiSelect--compressed"
                         id="selectDocExample"
                         onChange={[Function]}
                         onMouseUp={[Function]}
@@ -868,7 +868,7 @@ Array [
                         >
                           <svg
                             aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                             focusable="false"
                             height={16}
                             role="img"
@@ -904,7 +904,7 @@ Array [
                   className="euiTableCellContent euiTableCellContent--overflowingContent"
                 >
                   <button
-                    className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                    className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
                     disabled={false}
                     onClick={[Function]}
                     type="button"
@@ -1078,7 +1078,7 @@ Array [
         className="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          className="euiButton euiButton--primary euiButton--fill"
+          className="euiButton euiButton--primary euiButton--small euiButton--fill"
           disabled={false}
           onClick={[Function]}
           style={
@@ -1103,7 +1103,7 @@ Array [
         className="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          className="euiButton euiButton--danger"
+          className="euiButton euiButton--danger euiButton--small"
           disabled={false}
           onClick={[Function]}
           style={
diff --git a/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx b/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
index 8d3c6019..5b61b52f 100644
--- a/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
+++ b/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiExpression,
   EuiFlexGroup,
@@ -85,7 +85,7 @@ export const CoveringIndexBuilder = ({
           >
             <>
               <EuiPopoverTitle paddingSize="l">Columns</EuiPopoverTitle>
-              <EuiComboBox
+              <EuiCompressedComboBox
                 placeholder="Select one or more options"
                 options={accelerationFormData.dataTableFields.map((x) => ({ label: x.fieldName }))}
                 selectedOptions={selectedOptions}
diff --git a/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/column_expression.test.tsx.snap b/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/column_expression.test.tsx.snap
index 8812acbe..c28ceb13 100644
--- a/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/column_expression.test.tsx.snap
+++ b/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/column_expression.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`Column expression components in materialized view renders column expres
     >
       <button
         aria-label="delete-column-expression"
-        className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+        className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
         disabled={false}
         onClick={[Function]}
         type="button"
@@ -152,7 +152,7 @@ exports[`Column expression components in materialized view renders column expres
     >
       <button
         aria-label="delete-column-expression"
-        className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+        className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
         disabled={false}
         onClick={[Function]}
         type="button"
diff --git a/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx b/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx
index f396e0a8..6bb1a3eb 100644
--- a/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx
+++ b/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx
@@ -6,12 +6,12 @@
 import {
   EuiButton,
   EuiButtonEmpty,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPopover,
   EuiPopoverFooter,
   EuiPopoverTitle,
@@ -115,19 +115,19 @@ export const AddColumnPopOver = ({
       <>
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiFormRow label="Aggregate function">
-              <EuiComboBox
+            <EuiCompressedFormRow label="Aggregate function">
+              <EuiCompressedComboBox
                 singleSelection={{ asPlainText: true }}
                 options={ACCELERATION_AGGREGRATION_FUNCTIONS}
                 selectedOptions={selectedFunction}
                 onChange={setSelectedFunction}
                 isClearable={false}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiFormRow label="Aggregation field">
-              <EuiComboBox
+            <EuiCompressedFormRow label="Aggregation field">
+              <EuiCompressedComboBox
                 singleSelection={{ asPlainText: true }}
                 options={[
                   { label: '*', disabled: selectedFunction[0].label !== 'count' },
@@ -137,13 +137,13 @@ export const AddColumnPopOver = ({
                 onChange={setSelectedField}
                 isClearable={false}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="m" />
-        <EuiFormRow label="Column alias - optional">
-          <EuiFieldText name="aliasField" onChange={onChangeAlias} />
-        </EuiFormRow>
+        <EuiCompressedFormRow label="Column alias - optional">
+          <EuiCompressedFieldText name="aliasField" onChange={onChangeAlias} />
+        </EuiCompressedFormRow>
       </>
       <EuiPopoverFooter>
         <EuiButton size="s" fill onClick={onAddExpression}>
diff --git a/public/components/acceleration/visual_editors/materialized_view/column_expression.tsx b/public/components/acceleration/visual_editors/materialized_view/column_expression.tsx
index 9569b2d8..e7d29962 100644
--- a/public/components/acceleration/visual_editors/materialized_view/column_expression.tsx
+++ b/public/components/acceleration/visual_editors/materialized_view/column_expression.tsx
@@ -4,13 +4,13 @@
  */
 
 import {
-  EuiButtonIcon,
-  EuiComboBox,
+  EuiSmallButtonIcon,
+  EuiCompressedComboBox,
   EuiExpression,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPopover,
 } from '@elastic/eui';
 import producer from 'immer';
@@ -86,8 +86,8 @@ export const ColumnExpression = ({
             <>
               <EuiFlexGroup>
                 <EuiFlexItem grow={false}>
-                  <EuiFormRow label="Aggregate function">
-                    <EuiComboBox
+                  <EuiCompressedFormRow label="Aggregate function">
+                    <EuiCompressedComboBox
                       singleSelection={{ asPlainText: true }}
                       options={ACCELERATION_AGGREGRATION_FUNCTIONS}
                       selectedOptions={[
@@ -106,11 +106,11 @@ export const ColumnExpression = ({
                       }
                       isClearable={false}
                     />
-                  </EuiFormRow>
+                  </EuiCompressedFormRow>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
-                  <EuiFormRow label="Aggregation field">
-                    <EuiComboBox
+                  <EuiCompressedFormRow label="Aggregation field">
+                    <EuiCompressedComboBox
                       singleSelection={{ asPlainText: true }}
                       options={[
                         {
@@ -134,7 +134,7 @@ export const ColumnExpression = ({
                       }
                       isClearable={false}
                     />
-                  </EuiFormRow>
+                  </EuiCompressedFormRow>
                 </EuiFlexItem>
               </EuiFlexGroup>
             </>
@@ -161,8 +161,8 @@ export const ColumnExpression = ({
               panelPaddingSize="s"
               anchorPosition="downLeft"
             >
-              <EuiFormRow label="Column alias">
-                <EuiFieldText
+              <EuiCompressedFormRow label="Column alias">
+                <EuiCompressedFieldText
                   name="aliasField"
                   value={currentColumnExpressionValue.fieldAlias}
                   onChange={(e) =>
@@ -172,12 +172,12 @@ export const ColumnExpression = ({
                     )
                   }
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiPopover>
           </EuiFlexItem>
         )}
         <EuiFlexItem grow={false}>
-          <EuiButtonIcon
+          <EuiSmallButtonIcon
             color="danger"
             onClick={onDeleteColumnExpression}
             iconType="trash"
diff --git a/public/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx b/public/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx
index 9ee0a12f..21df6c59 100644
--- a/public/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx
+++ b/public/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx
@@ -4,15 +4,15 @@
  */
 
 import {
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiExpression,
-  EuiFieldNumber,
+  EuiCompressedFieldNumber,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPopover,
-  EuiSelect,
+  EuiCompressedSelect,
 } from '@elastic/eui';
 import producer from 'immer';
 import React, { useState } from 'react';
@@ -87,8 +87,8 @@ export const GroupByTumbleExpression = ({
       >
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiFormRow label="Time Field">
-              <EuiComboBox
+            <EuiCompressedFormRow label="Time Field">
+              <EuiCompressedComboBox
                 style={{ minWidth: '200px' }}
                 placeholder="Select one or more options"
                 singleSelection={{ asPlainText: true }}
@@ -99,25 +99,25 @@ export const GroupByTumbleExpression = ({
                 onChange={onChangeTimeField}
                 isClearable={false}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFormRow label="Tumble Window">
-              <EuiFieldNumber
+            <EuiCompressedFormRow label="Tumble Window">
+              <EuiCompressedFieldNumber
                 value={groupbyValues.tumbleWindow}
                 onChange={onChangeTumbleWindow}
                 min={1}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFormRow label="Tumble Interval">
-              <EuiSelect
+            <EuiCompressedFormRow label="Tumble Interval">
+              <EuiCompressedSelect
                 value={groupbyValues.tumbleInterval}
                 onChange={onChangeTumbleInterval}
                 options={ACCELERATION_TIME_INTERVAL}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPopover>
diff --git a/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/add_fields_modal.test.tsx.snap b/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/add_fields_modal.test.tsx.snap
index e2b1b685..d1e780fb 100644
--- a/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/add_fields_modal.test.tsx.snap
+++ b/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/add_fields_modal.test.tsx.snap
@@ -305,7 +305,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
               class="euiModalFooter"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 type="button"
               >
                 <span
@@ -319,7 +319,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
                 </span>
               </button>
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 type="button"
               >
                 <span
@@ -699,7 +699,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
               className="euiModalFooter"
             >
               <button
-                className="euiButton euiButton--primary"
+                className="euiButton euiButton--primary euiButton--small"
                 disabled={false}
                 onClick={[Function]}
                 style={
@@ -720,7 +720,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
                 </span>
               </button>
               <button
-                className="euiButton euiButton--primary euiButton--fill"
+                className="euiButton euiButton--primary euiButton--small euiButton--fill"
                 disabled={false}
                 onClick={[Function]}
                 style={
@@ -1071,7 +1071,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
               class="euiModalFooter"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 type="button"
               >
                 <span
@@ -1085,7 +1085,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
                 </span>
               </button>
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 type="button"
               >
                 <span
@@ -1466,7 +1466,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
               className="euiModalFooter"
             >
               <button
-                className="euiButton euiButton--primary"
+                className="euiButton euiButton--primary euiButton--small"
                 disabled={false}
                 onClick={[Function]}
                 style={
@@ -1487,7 +1487,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
                 </span>
               </button>
               <button
-                className="euiButton euiButton--primary euiButton--fill"
+                className="euiButton euiButton--primary euiButton--small euiButton--fill"
                 disabled={false}
                 onClick={[Function]}
                 style={
diff --git a/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/delete_fields_modal.test.tsx.snap b/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/delete_fields_modal.test.tsx.snap
index aeff0d12..4d060c45 100644
--- a/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/delete_fields_modal.test.tsx.snap
+++ b/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/delete_fields_modal.test.tsx.snap
@@ -330,7 +330,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
               class="euiModalFooter"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 type="button"
               >
                 <span
@@ -344,7 +344,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
                 </span>
               </button>
               <button
-                class="euiButton euiButton--danger euiButton--fill"
+                class="euiButton euiButton--danger euiButton--small euiButton--fill"
                 type="button"
               >
                 <span
@@ -755,7 +755,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
               className="euiModalFooter"
             >
               <button
-                className="euiButton euiButton--primary"
+                className="euiButton euiButton--primary euiButton--small"
                 disabled={false}
                 onClick={[Function]}
                 style={
@@ -776,7 +776,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
                 </span>
               </button>
               <button
-                className="euiButton euiButton--danger euiButton--fill"
+                className="euiButton euiButton--danger euiButton--small euiButton--fill"
                 disabled={false}
                 onClick={[Function]}
                 style={
@@ -1426,7 +1426,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
               class="euiModalFooter"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 type="button"
               >
                 <span
@@ -1440,7 +1440,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
                 </span>
               </button>
               <button
-                class="euiButton euiButton--danger euiButton--fill"
+                class="euiButton euiButton--danger euiButton--small euiButton--fill"
                 type="button"
               >
                 <span
@@ -2167,7 +2167,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
               className="euiModalFooter"
             >
               <button
-                className="euiButton euiButton--primary"
+                className="euiButton euiButton--primary euiButton--small"
                 disabled={false}
                 onClick={[Function]}
                 style={
@@ -2188,7 +2188,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
                 </span>
               </button>
               <button
-                className="euiButton euiButton--danger euiButton--fill"
+                className="euiButton euiButton--danger euiButton--small euiButton--fill"
                 disabled={false}
                 onClick={[Function]}
                 style={
diff --git a/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/skipping_index_builder.test.tsx.snap b/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/skipping_index_builder.test.tsx.snap
index 77fdeab5..90a60bf5 100644
--- a/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/skipping_index_builder.test.tsx.snap
+++ b/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/skipping_index_builder.test.tsx.snap
@@ -167,7 +167,7 @@ Array [
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        className="euiButton euiButton--primary euiButton--fill"
+        className="euiButton euiButton--primary euiButton--small euiButton--fill"
         disabled={false}
         onClick={[Function]}
         style={
@@ -192,7 +192,7 @@ Array [
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        className="euiButton euiButton--danger"
+        className="euiButton euiButton--danger euiButton--small"
         disabled={false}
         onClick={[Function]}
         style={
@@ -416,14 +416,14 @@ Array [
                 className="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <div
-                  className="euiFormControlLayout"
+                  className="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     className="euiFormControlLayout__childrenWrapper"
                   >
                     <select
                       aria-label="Use aria labels when no actual label is in use"
-                      className="euiSelect"
+                      className="euiSelect euiSelect--compressed"
                       id="selectDocExample"
                       onChange={[Function]}
                       onMouseUp={[Function]}
@@ -456,7 +456,7 @@ Array [
                       >
                         <svg
                           aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                           focusable="false"
                           height={16}
                           role="img"
@@ -492,7 +492,7 @@ Array [
                 className="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <button
-                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
                   disabled={false}
                   onClick={[Function]}
                   type="button"
@@ -582,14 +582,14 @@ Array [
                 className="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <div
-                  className="euiFormControlLayout"
+                  className="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     className="euiFormControlLayout__childrenWrapper"
                   >
                     <select
                       aria-label="Use aria labels when no actual label is in use"
-                      className="euiSelect"
+                      className="euiSelect euiSelect--compressed"
                       id="selectDocExample"
                       onChange={[Function]}
                       onMouseUp={[Function]}
@@ -622,7 +622,7 @@ Array [
                       >
                         <svg
                           aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                           focusable="false"
                           height={16}
                           role="img"
@@ -658,7 +658,7 @@ Array [
                 className="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <button
-                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
                   disabled={false}
                   onClick={[Function]}
                   type="button"
@@ -832,7 +832,7 @@ Array [
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        className="euiButton euiButton--primary euiButton--fill"
+        className="euiButton euiButton--primary euiButton--small euiButton--fill"
         disabled={false}
         onClick={[Function]}
         style={
@@ -857,7 +857,7 @@ Array [
       className="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        className="euiButton euiButton--danger"
+        className="euiButton euiButton--danger euiButton--small"
         disabled={false}
         onClick={[Function]}
         style={
diff --git a/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx b/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx
index 2fc8d883..f0fdf2e9 100644
--- a/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx
+++ b/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiInMemoryTable,
   EuiModal,
   EuiModalBody,
@@ -84,8 +84,8 @@ export const AddFieldsModal = ({
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButton onClick={() => setIsAddModalVisible(false)}>Cancel</EuiButton>
-        <EuiButton
+        <EuiSmallButton onClick={() => setIsAddModalVisible(false)}>Cancel</EuiSmallButton>
+        <EuiSmallButton
           onClick={() => {
             setAccelerationFormData(
               producer((accData) => {
@@ -105,7 +105,7 @@ export const AddFieldsModal = ({
           fill
         >
           Add
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx b/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx
index 225ff06d..2bb36fb0 100644
--- a/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx
+++ b/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiInMemoryTable,
   EuiModal,
   EuiModalBody,
@@ -80,8 +80,8 @@ export const DeleteFieldsModal = ({
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButton onClick={() => setIsDeleteModalVisible(false)}>Cancel</EuiButton>
-        <EuiButton
+        <EuiSmallButton onClick={() => setIsDeleteModalVisible(false)}>Cancel</EuiSmallButton>
+        <EuiSmallButton
           onClick={() => {
             setAccelerationFormData({
               ...accelerationFormData,
@@ -97,7 +97,7 @@ export const DeleteFieldsModal = ({
           fill
         >
           Delete
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx b/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx
index 104cdb0b..5352fd04 100644
--- a/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx
+++ b/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx
@@ -5,11 +5,11 @@
 
 import {
   EuiBasicTable,
-  EuiButton,
-  EuiButtonIcon,
+  EuiSmallButton,
+  EuiSmallButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
@@ -96,7 +96,7 @@ export const SkippingIndexBuilder = ({
     {
       name: 'Acceleration method',
       render: (item: SkippingIndexRowType) => (
-        <EuiSelect
+        <EuiCompressedSelect
           id="selectDocExample"
           options={SKIPPING_INDEX_ACCELERATION_METHODS}
           value={item.accelerationMethod}
@@ -109,7 +109,7 @@ export const SkippingIndexBuilder = ({
       name: 'Delete',
       render: (item: SkippingIndexRowType) => {
         return (
-          <EuiButtonIcon
+          <EuiSmallButtonIcon
             onClick={() => {
               setAccelerationFormData({
                 ...accelerationFormData,
@@ -179,14 +179,14 @@ export const SkippingIndexBuilder = ({
       />
       <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false} wrap>
         <EuiFlexItem grow={false}>
-          <EuiButton fill onClick={() => setIsAddModalVisible(true)}>
+          <EuiSmallButton fill onClick={() => setIsAddModalVisible(true)}>
             Add fields
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton onClick={() => setIsDeleteModalVisible(true)} color="danger">
+          <EuiSmallButton onClick={() => setIsDeleteModalVisible(true)} color="danger">
             Bulk delete
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
       {modal}