diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/index.tsx
index 0df6e9e1ebae0..98deba4f85a80 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/index.tsx
@@ -97,7 +97,7 @@ export function ServiceOverview() {
                   <EuiFlexItem>
                     <ServiceTabEmptyState
                       id="serviceOverview"
-                      onDissmiss={() => setDismissedLogsOnlyEmptyState(true)}
+                      onDismiss={() => setDismissedLogsOnlyEmptyState(true)}
                     />
                   </EuiFlexItem>
                 )}
diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts b/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts
index 8551745238e43..312ed042bb8de 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts
@@ -5,9 +5,12 @@
  * 2.0.
  */
 
+import type { ObservabilityOnboardingLocatorParams } from '@kbn/deeplinks-observability';
 import { i18n } from '@kbn/i18n';
+import type { AddDataPanelProps } from '@kbn/observability-shared-plugin/public';
+import type { LocatorPublic } from '@kbn/share-plugin/common';
 
-export type EmptyStateKey =
+export type AddAPMCalloutKeys =
   | 'serviceOverview'
   | 'serviceDependencies'
   | 'infraOverview'
@@ -16,80 +19,154 @@ export type EmptyStateKey =
   | 'metrics'
   | 'errorGroupOverview';
 
-interface EmptyStateContent {
-  title: string;
-  content: string;
-  imgName?: string;
-}
+const defaultActions = (
+  locator: LocatorPublic<ObservabilityOnboardingLocatorParams> | undefined
+) => {
+  return {
+    actions: {
+      primary: {
+        href: locator?.getRedirectUrl({ category: 'application' }),
+        label: i18n.translate('xpack.apm.serviceTabEmptyState.defaultPrimaryActionLabel', {
+          defaultMessage: 'Add APM',
+        }),
+      },
+      secondary: {
+        href: 'https://ela.st/demo-apm-try-it',
+      },
+      link: {
+        href: 'https://www.elastic.co/observability/application-performance-monitoring',
+      },
+    },
+  };
+};
 
-export const emptyStateDefinitions: Record<EmptyStateKey, EmptyStateContent> = {
-  serviceOverview: {
-    title: i18n.translate('xpack.apm.serviceTabEmptyState.overviewTitle', {
-      defaultMessage: 'Detect and resolve issues faster with deep visibility into your application',
-    }),
-    content: i18n.translate('xpack.apm.serviceTabEmptyState.overviewContent', {
-      defaultMessage:
-        'Understanding your application performance, relationships and dependencies by instrumenting with APM.',
-    }),
-  },
-  serviceDependencies: {
-    title: i18n.translate('xpack.apm.serviceTabEmptyState.dependenciesTitle', {
-      defaultMessage: 'Understand the dependencies for your service',
-    }),
-    content: i18n.translate('xpack.apm.serviceTabEmptyState.dependenciesContent', {
-      defaultMessage:
-        "See your service's dependencies on both internal and third-party services by instrumenting with APM.",
-    }),
-    imgName: 'service_tab_empty_state_dependencies.png',
-  },
-  infraOverview: {
-    title: i18n.translate('xpack.apm.serviceTabEmptyState.infrastructureTitle', {
-      defaultMessage: 'Understand what your service is running on',
-    }),
-    content: i18n.translate('xpack.apm.serviceTabEmptyState.infrastructureContent', {
-      defaultMessage:
-        'Troubleshoot service problems by seeing the infrastructure your service is running on.',
-    }),
-    imgName: 'service_tab_empty_state_infrastructure.png',
-  },
-  serviceMap: {
-    title: i18n.translate('xpack.apm.serviceTabEmptyState.serviceMapTitle', {
-      defaultMessage: 'Visualise the dependencies between your services',
-    }),
-    content: i18n.translate('xpack.apm.serviceTabEmptyState.serviceMapContent', {
-      defaultMessage:
-        'See your services dependencies at a glance to help identify dependencies that may be affecting your service.',
-    }),
-    imgName: 'service_tab_empty_state_service_map.png',
-  },
-  transactionOverview: {
-    title: i18n.translate('xpack.apm.serviceTabEmptyState.transactionsTitle', {
-      defaultMessage: 'Troubleshoot latency, throughput and errors',
-    }),
-    content: i18n.translate('xpack.apm.serviceTabEmptyState.transactionsContent', {
-      defaultMessage:
-        "Troubleshoot your service's performance by analysing latency, throughput and errors down to the specific transaction.",
-    }),
-    imgName: 'service_tab_empty_state_transactions.png',
-  },
-  metrics: {
-    title: i18n.translate('xpack.apm.serviceTabEmptyState.metricsTitle', {
-      defaultMessage: 'View core metrics for your application',
-    }),
-    content: i18n.translate('xpack.apm.serviceTabEmptyState.metricsContent', {
-      defaultMessage:
-        'View metric trends for the instances of your service to identify performance bottlenecks that could be affecting your users.',
-    }),
-    imgName: 'service_tab_empty_state_metrics.png',
-  },
-  errorGroupOverview: {
-    title: i18n.translate('xpack.apm.serviceTabEmptyState.errorGroupOverviewTitle', {
-      defaultMessage: 'Identify transaction errors with your applications',
-    }),
-    content: i18n.translate('xpack.apm.serviceTabEmptyState.errorGroupOverviewContent', {
-      defaultMessage:
-        'Analyse errors down to the specific transaction to pin-point specific errors within your service.',
-    }),
-    imgName: 'service_tab_empty_state_errors.png',
-  },
+export const addAPMCalloutDefinitions = (
+  baseFolderPath: string,
+  locator: LocatorPublic<ObservabilityOnboardingLocatorParams> | undefined
+): Record<
+  AddAPMCalloutKeys,
+  Omit<AddDataPanelProps, 'onDismiss' | 'onAddData' | 'onLearnMore' | 'onTryIt'>
+> => {
+  return {
+    serviceOverview: {
+      content: {
+        title: i18n.translate('xpack.apm.serviceTabEmptyState.overviewTitle', {
+          defaultMessage:
+            'Detect and resolve issues faster with deep visibility into your application',
+        }),
+        content: i18n.translate('xpack.apm.serviceTabEmptyState.overviewContent', {
+          defaultMessage:
+            'Understanding your application performance, relationships and dependencies by instrumenting with APM.',
+        }),
+        img: {
+          name: 'service_tab_empty_state_overview.png',
+          baseFolderPath,
+          position: 'inside',
+        },
+      },
+      ...defaultActions(locator),
+    },
+    serviceDependencies: {
+      content: {
+        title: i18n.translate('xpack.apm.serviceTabEmptyState.dependenciesTitle', {
+          defaultMessage: 'Understand the dependencies for your service',
+        }),
+        content: i18n.translate('xpack.apm.serviceTabEmptyState.dependenciesContent', {
+          defaultMessage:
+            "See your service's dependencies on both internal and third-party services by instrumenting with APM.",
+        }),
+        img: {
+          name: 'service_tab_empty_state_dependencies.png',
+          baseFolderPath,
+          position: 'below',
+        },
+      },
+      ...defaultActions(locator),
+    },
+    infraOverview: {
+      content: {
+        title: i18n.translate('xpack.apm.serviceTabEmptyState.infrastructureTitle', {
+          defaultMessage: 'Understand what your service is running on',
+        }),
+        content: i18n.translate('xpack.apm.serviceTabEmptyState.infrastructureContent', {
+          defaultMessage:
+            'Troubleshoot service problems by seeing the infrastructure your service is running on.',
+        }),
+        img: {
+          name: 'service_tab_empty_state_infrastructure.png',
+          baseFolderPath,
+          position: 'below',
+        },
+      },
+      ...defaultActions(locator),
+    },
+    serviceMap: {
+      content: {
+        title: i18n.translate('xpack.apm.serviceTabEmptyState.serviceMapTitle', {
+          defaultMessage: 'Visualise the dependencies between your services',
+        }),
+        content: i18n.translate('xpack.apm.serviceTabEmptyState.serviceMapContent', {
+          defaultMessage:
+            'See your services dependencies at a glance to help identify dependencies that may be affecting your service.',
+        }),
+        img: {
+          name: 'service_tab_empty_state_service_map.png',
+          baseFolderPath,
+          position: 'below',
+        },
+      },
+      ...defaultActions(locator),
+    },
+    transactionOverview: {
+      content: {
+        title: i18n.translate('xpack.apm.serviceTabEmptyState.transactionsTitle', {
+          defaultMessage: 'Troubleshoot latency, throughput and errors',
+        }),
+        content: i18n.translate('xpack.apm.serviceTabEmptyState.transactionsContent', {
+          defaultMessage:
+            "Troubleshoot your service's performance by analysing latency, throughput and errors down to the specific transaction.",
+        }),
+        img: {
+          name: 'service_tab_empty_state_transactions.png',
+          baseFolderPath,
+          position: 'below',
+        },
+      },
+      ...defaultActions(locator),
+    },
+    metrics: {
+      content: {
+        title: i18n.translate('xpack.apm.serviceTabEmptyState.metricsTitle', {
+          defaultMessage: 'View core metrics for your application',
+        }),
+        content: i18n.translate('xpack.apm.serviceTabEmptyState.metricsContent', {
+          defaultMessage:
+            'View metric trends for the instances of your service to identify performance bottlenecks that could be affecting your users.',
+        }),
+        img: {
+          name: 'service_tab_empty_state_metrics.png',
+          baseFolderPath,
+          position: 'below',
+        },
+      },
+      ...defaultActions(locator),
+    },
+    errorGroupOverview: {
+      content: {
+        title: i18n.translate('xpack.apm.serviceTabEmptyState.errorGroupOverviewTitle', {
+          defaultMessage: 'Identify transaction errors with your applications',
+        }),
+        content: i18n.translate('xpack.apm.serviceTabEmptyState.errorGroupOverviewContent', {
+          defaultMessage:
+            'Analyse errors down to the specific transaction to pin-point specific errors within your service.',
+        }),
+        img: {
+          name: 'service_tab_empty_state_errors.png',
+          baseFolderPath,
+          position: 'below',
+        },
+      },
+      ...defaultActions(locator),
+    },
+  };
 };
diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/index.tsx
index a8962fcc1d2f7..f6493e213cce9 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/index.tsx
@@ -5,50 +5,24 @@
  * 2.0.
  */
 
-/* eslint-disable @elastic/eui/href-or-on-click */
-
-import {
-  EuiButton,
-  EuiButtonIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiImage,
-  EuiLink,
-  EuiPanel,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-  useEuiTheme,
-} from '@elastic/eui';
 import React from 'react';
-import { i18n } from '@kbn/i18n';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { AddDataPanel } from '@kbn/observability-shared-plugin/public';
+import {
+  OBSERVABILITY_ONBOARDING_LOCATOR,
+  ObservabilityOnboardingLocatorParams,
+} from '@kbn/deeplinks-observability';
+import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { EmptyStateClickParams, EntityInventoryAddDataParams } from '../../../services/telemetry';
 import { ApmPluginStartDeps, ApmServices } from '../../../plugin';
-import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { useKibanaUrl } from '../../../hooks/use_kibana_url';
-import { AddApmData } from '../../shared/add_data_buttons/buttons';
-import { emptyStateDefinitions, EmptyStateKey } from './constants';
+import { addAPMCalloutDefinitions, AddAPMCalloutKeys } from './constants';
 
 export interface ServiceTabEmptyStateProps {
-  id: EmptyStateKey;
-  onDissmiss?: () => void;
+  id: AddAPMCalloutKeys;
+  onDismiss?: () => void;
 }
 
-const tryItNowButton = {
-  label: i18n.translate('xpack.apm.serviceTabEmptyState.tryItNowButtonLabel', {
-    defaultMessage: 'Try it now in our demo cluster',
-  }),
-  href: 'https://ela.st/demo-apm-try-it',
-};
-
-const learnMoreLink = {
-  label: i18n.translate('xpack.apm.serviceTabEmptyState.learnMoreLinkLabel', {
-    defaultMessage: 'Learn more',
-  }),
-  href: 'https://www.elastic.co/observability/application-performance-monitoring',
-};
-
 const baseImgFolder = '/plugins/apm/assets/service_tab_empty_state';
 const defaultAddDataTelemetryParams: EntityInventoryAddDataParams = {
   view: 'add_apm_cta',
@@ -58,114 +32,40 @@ const defaultClickTelemetryParams: EmptyStateClickParams = {
   view: 'add_apm_cta',
 };
 
-export function ServiceTabEmptyState({ id, onDissmiss }: ServiceTabEmptyStateProps) {
-  const { euiTheme } = useEuiTheme();
-  const { services } = useKibana<ApmPluginStartDeps & ApmServices>();
-  const { core } = useApmPluginContext();
+export function ServiceTabEmptyState({ id, onDismiss }: ServiceTabEmptyStateProps) {
+  const {
+    services: { telemetry },
+  } = useKibana<ApmPluginStartDeps & ApmServices>();
 
-  const imgFolder = `${baseImgFolder}/${
-    core.uiSettings.get('theme:darkMode') === 'enabled' ? 'dark' : 'light'
-  }`;
-  const imgName = emptyStateDefinitions[id].imgName;
-  const imgSrc = useKibanaUrl(
-    `${imgFolder}/${imgName ? imgName : 'service_tab_empty_state_overview.png'}`
+  const { share } = useApmPluginContext();
+
+  const onboardingLocator = share.url.locators.get<ObservabilityOnboardingLocatorParams>(
+    OBSERVABILITY_ONBOARDING_LOCATOR
   );
 
+  const imgBaseFolderPath = useKibanaUrl(baseImgFolder);
+
   function handleAddAPMClick() {
-    services.telemetry.reportEntityInventoryAddData(defaultAddDataTelemetryParams);
+    telemetry.reportEntityInventoryAddData(defaultAddDataTelemetryParams);
   }
 
   function handleTryItClick() {
-    services.telemetry.reportTryItClick(defaultClickTelemetryParams);
+    telemetry.reportTryItClick(defaultClickTelemetryParams);
   }
 
   function handleLearnMoreClick() {
-    services.telemetry.reportLearnMoreClick(defaultClickTelemetryParams);
+    telemetry.reportLearnMoreClick(defaultClickTelemetryParams);
   }
 
   return (
-    <>
-      <EuiPanel color="subdued" paddingSize="xl" style={{ position: 'relative' }}>
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem>
-            <EuiTitle size="s">
-              <h3>{emptyStateDefinitions[id].title}</h3>
-            </EuiTitle>
-            <EuiSpacer size="s" />
-            <EuiText size="s">{emptyStateDefinitions[id].content}</EuiText>
-            <EuiSpacer size="m" />
-            <EuiFlexGroup alignItems="center" gutterSize="m">
-              <EuiFlexItem grow={false}>
-                <AddApmData
-                  data-test-subj="ServiceTabEmptyStateAddApmButton"
-                  size="m"
-                  fill
-                  onClick={handleAddAPMClick}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  data-test-subj="ServiceTabEmptyStateTryItNowButton"
-                  iconType="launch"
-                  iconSide="right"
-                  href={tryItNowButton.href}
-                  onClick={handleTryItClick}
-                  target="_blank"
-                >
-                  {tryItNowButton.label}
-                </EuiButton>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiLink
-                  href={learnMoreLink.href}
-                  onClick={handleLearnMoreClick}
-                  target="_blank"
-                  data-test-subj="ServiceTabEmptyStateLearnMoreButton"
-                  external
-                >
-                  {learnMoreLink.label}
-                </EuiLink>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-          {!emptyStateDefinitions[id].imgName && (
-            <EuiFlexItem
-              style={{
-                maxHeight: `${euiTheme.base * 16}px`,
-                overflow: 'hidden',
-                borderRadius: `${euiTheme.border.radius.medium}`,
-                border: `${euiTheme.border.thin}`,
-              }}
-            >
-              <EuiImage src={imgSrc} alt={emptyStateDefinitions[id].content} />
-            </EuiFlexItem>
-          )}
-
-          {onDissmiss && (
-            <EuiButtonIcon
-              style={{
-                position: 'absolute',
-                top: `${euiTheme.size.s}`,
-                right: `${euiTheme.size.s}`,
-              }}
-              data-test-subj="ServiceTabEmptyStateDismissButton"
-              iconType="cross"
-              onClick={onDissmiss}
-            />
-          )}
-        </EuiFlexGroup>
-      </EuiPanel>
-      {emptyStateDefinitions[id].imgName && (
-        <>
-          <EuiSpacer size="l" />
-          <EuiImage
-            src={imgSrc}
-            alt={emptyStateDefinitions[id].content}
-            size="fullWidth"
-            style={{ opacity: 0.4 }}
-          />
-        </>
-      )}
-    </>
+    <AddDataPanel
+      data-test-subj="apmAddApmCallout"
+      content={addAPMCalloutDefinitions(imgBaseFolderPath, onboardingLocator)[id].content}
+      actions={addAPMCalloutDefinitions(imgBaseFolderPath, onboardingLocator)[id].actions}
+      onAddData={handleAddAPMClick}
+      onTryIt={handleTryItClick}
+      onLearnMore={handleLearnMoreClick}
+      onDismiss={onDismiss}
+    />
   );
 }
diff --git a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/entities_inventory_callout.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/entities_inventory_callout.tsx
index 16cc93e2827f2..16eeba5e67ef4 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/entities_inventory_callout.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/entities_inventory_callout.tsx
@@ -13,10 +13,10 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ApmPluginStartDeps } from '../../../../plugin';
 
 interface EntitiesInventoryCalloutProps {
-  onDissmiss: () => void;
+  onDismiss: () => void;
 }
 
-export function EntitiesInventoryCallout({ onDissmiss }: EntitiesInventoryCalloutProps) {
+export function EntitiesInventoryCallout({ onDismiss }: EntitiesInventoryCalloutProps) {
   const { services } = useKibana<ApmPluginStartDeps>();
   const { observabilityShared } = services;
 
@@ -50,7 +50,7 @@ export function EntitiesInventoryCallout({ onDissmiss }: EntitiesInventoryCallou
           <EuiButtonIcon
             data-test-subj="apmEntitiesInventoryCalloutDismiss"
             iconType="cross"
-            onClick={onDissmiss}
+            onClick={onDismiss}
           />
         </EuiToolTip>
       </EuiFlexItem>
diff --git a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/index.tsx
index 3f05d872f6d1f..b7fadf8c12870 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/index.tsx
@@ -176,7 +176,7 @@ export function ApmMainTemplate({
             <EuiFlexGroup direction="column">
               {showEntitiesInventoryCallout ? (
                 <EntitiesInventoryCallout
-                  onDissmiss={() => {
+                  onDismiss={() => {
                     setdismissedEntitiesInventoryCallout(true);
                   }}
                 />
diff --git a/x-pack/plugins/observability_solution/infra/public/components/asset_details/add_metrics_callout/index.tsx b/x-pack/plugins/observability_solution/infra/public/components/asset_details/add_metrics_callout/index.tsx
index c4132a1e29a3a..bd749baed7114 100644
--- a/x-pack/plugins/observability_solution/infra/public/components/asset_details/add_metrics_callout/index.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/components/asset_details/add_metrics_callout/index.tsx
@@ -56,7 +56,7 @@ export function AddMetricsCallout({ id, onDismiss }: AddMetricsCalloutProps) {
       onAddData={handleAddMetricsClick}
       onTryIt={handleTryItClick}
       onLearnMore={handleLearnMoreClick}
-      onDissmiss={onDismiss && handleDismiss}
+      onDismiss={onDismiss && handleDismiss}
     />
   );
 }
diff --git a/x-pack/plugins/observability_solution/observability_shared/public/components/add_data_panel/add_data_panel.stories.tsx b/x-pack/plugins/observability_solution/observability_shared/public/components/add_data_panel/add_data_panel.stories.tsx
index 76442c0a4de0a..7915e4d010454 100644
--- a/x-pack/plugins/observability_solution/observability_shared/public/components/add_data_panel/add_data_panel.stories.tsx
+++ b/x-pack/plugins/observability_solution/observability_shared/public/components/add_data_panel/add_data_panel.stories.tsx
@@ -15,7 +15,7 @@ export default {
 };
 
 const defaultFunctions = {
-  onDissmiss: () => alert('Dismissed'),
+  onDismiss: () => alert('Dismissed'),
   onAddData: () => alert('Add Data'),
   onTryIt: () => alert('Try It'),
   onLearnMore: () => alert('Learn More'),
@@ -139,7 +139,7 @@ export function NotDismissable(props: ComponentProps<typeof AddDataPanel>) {
 NotDismissable.args = {
   ...defaultContent(),
   ...defaultFunctions,
-  onDissmiss: undefined,
+  onDismiss: undefined,
   actions: {
     primary: defaultPrimaryAction,
     secondary: {
diff --git a/x-pack/plugins/observability_solution/observability_shared/public/components/add_data_panel/index.tsx b/x-pack/plugins/observability_solution/observability_shared/public/components/add_data_panel/index.tsx
index ec6e405adcb26..f047fdb6b33d3 100644
--- a/x-pack/plugins/observability_solution/observability_shared/public/components/add_data_panel/index.tsx
+++ b/x-pack/plugins/observability_solution/observability_shared/public/components/add_data_panel/index.tsx
@@ -43,7 +43,7 @@ type AddDataPanelButtonWithLabel = Required<AddDataPanelButton>;
 
 export interface AddDataPanelProps {
   content: AddDataPanelContent;
-  onDissmiss?: () => void;
+  onDismiss?: () => void;
   onAddData: () => void;
   onTryIt?: () => void;
   onLearnMore: () => void;
@@ -72,7 +72,7 @@ const learnMoreDefaultLabel = i18n.translate(
 export function AddDataPanel({
   content,
   actions,
-  onDissmiss,
+  onDismiss,
   onLearnMore,
   onTryIt,
   onAddData,
@@ -155,7 +155,7 @@ export function AddDataPanel({
             </EuiFlexItem>
           )}
 
-          {onDissmiss && (
+          {onDismiss && (
             <EuiButtonIcon
               style={{
                 position: 'absolute',
@@ -164,7 +164,7 @@ export function AddDataPanel({
               }}
               data-test-subj="AddDataPanelDismissButton"
               iconType="cross"
-              onClick={onDissmiss}
+              onClick={onDismiss}
             />
           )}
         </EuiFlexGroup>