diff --git a/src-docs/src/views/selectable/selectable_messages.tsx b/src-docs/src/views/selectable/selectable_messages.tsx
index 35799e69d8f3..52f79fd1f04e 100644
--- a/src-docs/src/views/selectable/selectable_messages.tsx
+++ b/src-docs/src/views/selectable/selectable_messages.tsx
@@ -1,15 +1,27 @@
 import React, { useState, Fragment } from 'react';
 
-import { EuiSelectable } from '../../../../src/components/selectable';
-import { EuiSwitch } from '../../../../src/components/form/switch';
-import { EuiSpacer } from '../../../../src/components/spacer';
+import {
+  EuiSelectable,
+  EuiSelectableMessage,
+  EuiText,
+  EuiSwitch,
+  EuiSpacer,
+  EuiIcon,
+} from '../../../../src';
 
 export default () => {
   const [useCustomMessage, setUseCustomMessage] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [hasError, setHasError] = useState(false);
 
-  const emptyMessage = 'You have no spice';
+  const emptyMessage = (
+    <EuiSelectableMessage>
+      <EuiIcon type={'partial'} />
+      <EuiText>
+        <p>Cannot fetch results.</p>
+      </EuiText>
+    </EuiSelectableMessage>
+  );
   const loadingMessage = "Hey, I'm loading here!";
   const errorMessage = 'Error!';