diff --git a/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx b/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx
index 734756b31aa2e8..10a1b6d44daa1a 100644
--- a/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx
+++ b/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx
@@ -132,7 +132,6 @@ export class ControlGroupContainer extends Container<
         ownFocus
         label={ControlGroupStrings.getControlButtonTitle()}
         iconType="arrowDown"
-        iconSide="right"
         panelPaddingSize="none"
         data-test-subj="dashboardControlsMenuButton"
       >
diff --git a/src/plugins/dashboard/kibana.json b/src/plugins/dashboard/kibana.json
index 0130d4a5f81181..cac4ad98a72e7e 100644
--- a/src/plugins/dashboard/kibana.json
+++ b/src/plugins/dashboard/kibana.json
@@ -30,5 +30,11 @@
   ],
   "server": true,
   "ui": true,
-  "requiredBundles": ["home", "kibanaReact", "kibanaUtils", "presentationUtil"]
-}
+  "requiredBundles": [
+    "home",
+    "kibanaReact",
+    "kibanaUtils",
+    "presentationUtil",
+    "sharedUX"
+  ]
+}
\ No newline at end of file
diff --git a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
index e66525398b86ba..8c3f0057d34a5d 100644
--- a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
+++ b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
@@ -48,12 +48,12 @@ import {
 import {
   AddFromLibraryButton,
   LazyLabsFlyout,
-  PrimaryActionButton,
   QuickButtonGroup,
   QuickButtonProps,
   SolutionToolbar,
   withSuspense,
 } from '../../../../presentation_util/public';
+import { SolutionToolbarButton } from '../../../../shared_ux/public';
 
 export interface DashboardTopNavState {
   chromeIsVisible: boolean;
@@ -589,8 +589,7 @@ export function DashboardTopNav({
           <SolutionToolbar isDarkModeEnabled={IS_DARK_THEME}>
             {{
               primaryActionButton: (
-                <PrimaryActionButton
-                  isDarkModeEnabled={IS_DARK_THEME}
+                <SolutionToolbarButton
                   label={getCreateVisualizationButtonTitle()}
                   onClick={createNewVisType(lensAlias)}
                   iconType="lensApp"
diff --git a/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx b/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx
index 5fece7ff959ced..ccdf1fb0736a5d 100644
--- a/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx
+++ b/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx
@@ -242,7 +242,6 @@ export const EditorMenu = ({ dashboardContainer, createNewVisType }: Props) => {
         defaultMessage: 'Select type',
       })}
       iconType="arrowDown"
-      iconSide="right"
       panelPaddingSize="none"
       data-test-subj="dashboardEditorMenuButton"
     >
diff --git a/src/plugins/dashboard/tsconfig.json b/src/plugins/dashboard/tsconfig.json
index 862bed9d667a01..a08a548d003cd2 100644
--- a/src/plugins/dashboard/tsconfig.json
+++ b/src/plugins/dashboard/tsconfig.json
@@ -29,6 +29,7 @@
     { "path": "../charts/tsconfig.json" },
     { "path": "../discover/tsconfig.json" },
     { "path": "../visualizations/tsconfig.json" },
-    { "path": "../../../x-pack/plugins/spaces/tsconfig.json" }
+    { "path": "../../../x-pack/plugins/spaces/tsconfig.json" },
+    { "path": "../shared_ux/tsconfig.json" }
   ]
 }
diff --git a/src/plugins/presentation_util/kibana.json b/src/plugins/presentation_util/kibana.json
index 6c8d38a5f8a1e9..1c549da423e76f 100644
--- a/src/plugins/presentation_util/kibana.json
+++ b/src/plugins/presentation_util/kibana.json
@@ -9,7 +9,16 @@
   "kibanaVersion": "kibana",
   "server": true,
   "ui": true,
-  "extraPublicDirs": ["common/lib"],
-  "requiredPlugins": ["savedObjects", "kibanaReact", "embeddable", "expressions", "dataViews"],
+  "extraPublicDirs": [
+    "common/lib"
+  ],
+  "requiredPlugins": [
+    "savedObjects",
+    "kibanaReact",
+    "embeddable",
+    "expressions",
+    "dataViews",
+    "sharedUX"
+  ],
   "optionalPlugins": []
-}
+}
\ No newline at end of file
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx
index 0550de1d069fa0..6adad6d0f3d692 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/add_from_library.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { ComponentStrings } from '../../../i18n/components';
-import { SolutionToolbarButton, Props as SolutionToolbarButtonProps } from './button';
+import { SolutionToolbarButton, SolutionToolbarButtonProps } from '../../../../../shared_ux/public';
 
 const { SolutionToolbar: strings } = ComponentStrings;
 
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss b/src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss
deleted file mode 100644
index 4283813f1d0b7c..00000000000000
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.solutionToolbarButton {
-  line-height: $euiButtonHeight; // Keeps alignment of text and chart icon
-  background-color: $euiColorEmptyShade;
-
-  // Lighten the border color for all states
-  border-color: $euiBorderColor !important; // sass-lint:disable-line no-important
-
-  &[class*='--text'] {
-    border-width: $euiBorderWidthThin;
-    border-style: solid;
-  }
-}
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/button.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/button.tsx
deleted file mode 100644
index ee1bbd64b5f871..00000000000000
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/button.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { EuiButton } from '@elastic/eui';
-import { EuiButtonPropsForButton } from '@elastic/eui/src/components/button/button';
-
-import './button.scss';
-
-export interface Props
-  extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType' | 'iconSide' | 'className'> {
-  label: string;
-  primary?: boolean;
-  isDarkModeEnabled?: boolean;
-}
-
-export const SolutionToolbarButton = ({ label, primary, className, ...rest }: Props) => (
-  <EuiButton
-    {...rest}
-    size="m"
-    color={primary ? 'primary' : 'text'}
-    className={`solutionToolbarButton ${className}`}
-    fill={primary}
-  >
-    {label}
-  </EuiButton>
-);
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts b/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts
index 6076dbf8cf1235..d72177860e8e55 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/index.ts
@@ -6,10 +6,8 @@
  * Side Public License, v 1.
  */
 
-export { SolutionToolbarButton } from './button';
 export { SolutionToolbarPopover } from './popover';
 export { AddFromLibraryButton } from './add_from_library';
 export type { QuickButtonProps } from './quick_group';
 export { QuickButtonGroup } from './quick_group';
-export { PrimaryActionButton } from './primary_button';
 export { PrimaryActionPopover } from './primary_popover';
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx
index fea6bf41a16018..0fd241c562fffa 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/popover.tsx
@@ -7,10 +7,12 @@
  */
 
 import React, { useState } from 'react';
-import { EuiPopover } from '@elastic/eui';
+import { EuiPopover, IconType } from '@elastic/eui';
 import { Props as EuiPopoverProps } from '@elastic/eui/src/components/popover/popover';
-
-import { SolutionToolbarButton, Props as ButtonProps } from './button';
+import {
+  SolutionToolbarButton,
+  SolutionToolbarButtonProps as ButtonProps,
+} from '../../../../../shared_ux/public';
 
 type AllowedButtonProps = Omit<ButtonProps, 'onClick' | 'fill'>;
 type AllowedPopoverProps = Omit<
@@ -20,17 +22,12 @@ type AllowedPopoverProps = Omit<
 
 export type Props = AllowedButtonProps &
   AllowedPopoverProps & {
+    label: string;
     children: (arg: { closePopover: () => void }) => React.ReactNode;
+    iconType: IconType;
   };
 
-export const SolutionToolbarPopover = ({
-  label,
-  iconType,
-  primary,
-  iconSide,
-  children,
-  ...popover
-}: Props) => {
+export const SolutionToolbarPopover = ({ label, iconType, children, ...popover }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const onButtonClick = () => setIsOpen((status) => !status);
@@ -38,7 +35,7 @@ export const SolutionToolbarPopover = ({
 
   const button = (
     <SolutionToolbarButton
-      {...{ label, iconType, primary, iconSide }}
+      {...{ label, iconType }}
       onClick={onButtonClick}
       data-test-subj={popover['data-test-subj']}
     />
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.scss b/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.scss
deleted file mode 100644
index c3d89f430d70c4..00000000000000
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-// Temporary fix for lensApp icon not support ghost color
-.solutionToolbar__primaryButton--dark {
-  .euiIcon path {
-    fill: $euiColorInk;
-  }
-}
-
-.solutionToolbar__primaryButton--light {
-  .euiIcon path {
-    fill: $euiColorGhost;
-  }
-}
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.tsx
deleted file mode 100644
index dcf16228ac63b7..00000000000000
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_button.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { SolutionToolbarButton, Props as SolutionToolbarButtonProps } from './button';
-
-import './primary_button.scss';
-
-export interface Props extends Omit<SolutionToolbarButtonProps, 'primary'> {
-  isDarkModeEnabled?: boolean;
-}
-
-export const PrimaryActionButton = ({ isDarkModeEnabled, ...props }: Props) => (
-  <SolutionToolbarButton
-    primary={true}
-    className={`solutionToolbar__primaryButton ${
-      isDarkModeEnabled
-        ? 'solutionToolbar__primaryButton--dark'
-        : 'solutionToolbar__primaryButton--light'
-    }`}
-    {...props}
-  />
-);
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_popover.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_popover.tsx
index 164d4c9b4a1a62..fc89faf2ef67aa 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_popover.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/primary_popover.tsx
@@ -13,5 +13,5 @@ import { SolutionToolbarPopover, Props as SolutionToolbarPopoverProps } from './
 export type Props = Omit<SolutionToolbarPopoverProps, 'primary'>;
 
 export const PrimaryActionPopover = (props: Omit<SolutionToolbarPopoverProps, 'primary'>) => (
-  <SolutionToolbarPopover primary={true} {...props} />
+  <SolutionToolbarPopover {...props} />
 );
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.stories.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.stories.tsx
index 3a04a4c974538b..92bbebea97f3fc 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.stories.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.stories.tsx
@@ -11,9 +11,10 @@ import { Story } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { EuiContextMenu } from '@elastic/eui';
 
+import { SolutionToolbarButton as PrimaryActionButton } from '../../../../shared_ux/public';
 import { SolutionToolbar } from './solution_toolbar';
 import { SolutionToolbarPopover } from './items';
-import { AddFromLibraryButton, PrimaryActionButton, QuickButtonGroup } from './items';
+import { AddFromLibraryButton, QuickButtonGroup } from './items';
 
 const quickButtons = [
   {
@@ -48,12 +49,7 @@ const primaryButtonConfigs = {
     <PrimaryActionButton label="Primary Action" iconType="apps" onClick={action('generic')} />
   ),
   Canvas: (
-    <SolutionToolbarPopover
-      label="Add element"
-      iconType="plusInCircle"
-      panelPaddingSize="none"
-      primary={true}
-    >
+    <SolutionToolbarPopover label="Add element" iconType="plusInCircle" panelPaddingSize="none">
       {() => (
         <EuiContextMenu
           initialPanelId={0}
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx
index 141a5c16d7d95c..a80d4d21122d9b 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/solution_toolbar.tsx
@@ -10,12 +10,11 @@ import React, { ReactElement } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import {
-  QuickButtonGroup,
-  PrimaryActionButton,
   SolutionToolbarButton,
-  PrimaryActionPopover,
-  SolutionToolbarPopover,
-} from './items';
+  SolutionToolbarButton as PrimaryActionButton,
+} from '../../../../shared_ux/public';
+
+import { QuickButtonGroup, PrimaryActionPopover, SolutionToolbarPopover } from './items';
 
 import './solution_toolbar.scss';
 
diff --git a/src/plugins/presentation_util/public/index.ts b/src/plugins/presentation_util/public/index.ts
index 7148b9fb6c7ddd..13b0acc5a1f48c 100644
--- a/src/plugins/presentation_util/public/index.ts
+++ b/src/plugins/presentation_util/public/index.ts
@@ -52,11 +52,9 @@ export type { QuickButtonProps } from './components/solution_toolbar';
 
 export {
   AddFromLibraryButton,
-  PrimaryActionButton,
   PrimaryActionPopover,
   QuickButtonGroup,
   SolutionToolbar,
-  SolutionToolbarButton,
   SolutionToolbarPopover,
 } from './components/solution_toolbar';
 
diff --git a/src/plugins/presentation_util/tsconfig.json b/src/plugins/presentation_util/tsconfig.json
index 38f2cf3c14a122..f92386af596ae9 100644
--- a/src/plugins/presentation_util/tsconfig.json
+++ b/src/plugins/presentation_util/tsconfig.json
@@ -20,6 +20,7 @@
     { "path": "../saved_objects/tsconfig.json" },
     { "path": "../embeddable/tsconfig.json" },
     { "path": "../kibana_react/tsconfig.json" },
-    { "path": "../data/tsconfig.json" }
+    { "path": "../data/tsconfig.json" },
+    { "path": "../shared_ux/tsconfig.json" }
   ]
 }
diff --git a/src/plugins/shared_ux/public/components/index.ts b/src/plugins/shared_ux/public/components/index.ts
index 53577e792aaa2b..c5587298a6a61b 100644
--- a/src/plugins/shared_ux/public/components/index.ts
+++ b/src/plugins/shared_ux/public/components/index.ts
@@ -41,6 +41,8 @@ export const ExitFullScreenButton = withSuspense(LazyExitFullScreenButton);
  */
 export const ToolbarButton = withSuspense(LazyToolbarButton);
 
+export type { ToolbarButtonProps } from './toolbar';
+
 /**
  * The Lazily-loaded `NoDataViews` component.  Consumers should use `React.Suspennse` or the
  * `withSuspense` HOC to load this component.
diff --git a/src/plugins/shared_ux/public/components/toolbar/buttons/primary/primary.tsx b/src/plugins/shared_ux/public/components/toolbar/buttons/primary/primary.tsx
index 48677d965fa6ce..6e9341bba5f766 100644
--- a/src/plugins/shared_ux/public/components/toolbar/buttons/primary/primary.tsx
+++ b/src/plugins/shared_ux/public/components/toolbar/buttons/primary/primary.tsx
@@ -10,11 +10,11 @@ import React from 'react';
 import { EuiButton } from '@elastic/eui';
 import { EuiButtonPropsForButton } from '@elastic/eui/src/components/button/button';
 
-export interface Props extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType'> {
+export interface ToolbarButtonProps extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType'> {
   label: string;
 }
 
-export const ToolbarButton = ({ label, ...rest }: Props) => {
+export const ToolbarButton = ({ label, ...rest }: ToolbarButtonProps) => {
   return (
     <EuiButton size="m" color="primary" fill={true} {...rest}>
       {label}
diff --git a/src/plugins/shared_ux/public/components/toolbar/index.ts b/src/plugins/shared_ux/public/components/toolbar/index.ts
index e68abf2916a72d..1c6389c4f2ce58 100644
--- a/src/plugins/shared_ux/public/components/toolbar/index.ts
+++ b/src/plugins/shared_ux/public/components/toolbar/index.ts
@@ -7,4 +7,5 @@
  */
 
 export { ToolbarButton } from './buttons/primary/primary';
+export type { ToolbarButtonProps } from './buttons/primary/primary';
 export { IconButtonGroup } from './buttons/icon_button_group/icon_button_group';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/editor_menu/editor_menu.component.tsx b/x-pack/plugins/canvas/public/components/workpad_header/editor_menu/editor_menu.component.tsx
index e8f762f9731a19..3ed6505a13cd08 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/editor_menu/editor_menu.component.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/editor_menu/editor_menu.component.tsx
@@ -149,7 +149,6 @@ export const EditorMenu: FC<Props> = ({
       ownFocus
       label={strings.getEditorMenuButtonLabel()}
       iconType="arrowDown"
-      iconSide="right"
       panelPaddingSize="none"
       data-test-subj="canvasEditorMenuButton"
     >