diff --git a/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx b/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx
index 78d28c253ae..c09f60e20d2 100644
--- a/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx
+++ b/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx
@@ -22,6 +22,8 @@ There are different variants to handle the most common empty state use cases. Th
 
 Use when there is no data to display and you want to encourage the user to take an action. Usually either to complete some initial configuration, or to create an item.
 
+If there is already a primary call to action button visible (e.g. in the page header), this should be hidden whilst the empty state is shown to avoid duplicate primary actions on the page.
+
 ```jsx
 import { EmptyState, LinkButton, TextLink } from '@grafana/ui';
 
diff --git a/public/app/features/playlist/PlaylistPage.tsx b/public/app/features/playlist/PlaylistPage.tsx
index 801f3199998..9a3e6d309b8 100644
--- a/public/app/features/playlist/PlaylistPage.tsx
+++ b/public/app/features/playlist/PlaylistPage.tsx
@@ -40,7 +40,7 @@ export const PlaylistPage = () => {
   return (
     <Page
       actions={
-        contextSrv.isEditor ? (
+        contextSrv.isEditor && showSearch ? (
           <LinkButton href="/playlists/new">
             <Trans i18nKey="playlist-page.create-button.title">New playlist</Trans>
           </LinkButton>