From e358ce0ebad41da4cc003d70ba0744cf63f93768 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 12 Jun 2026 17:46:04 +0200
Subject: [PATCH 1/2] Allow external links in empty-state items

---
 .../js/components/ui/EmptyState/Item.vue      | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/EmptyState/Item.vue b/resources/js/components/ui/EmptyState/Item.vue
index d1af7702998..f08dcc74861 100644
--- a/resources/js/components/ui/EmptyState/Item.vue
+++ b/resources/js/components/ui/EmptyState/Item.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { Link } from '@inertiajs/vue3';
 import Icon from '../Icon/Icon.vue';
-import { useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
 
 const props = defineProps({
     /** Optional link */
@@ -9,6 +9,11 @@ const props = defineProps({
         type: String,
         default: null,
     },
+    /** Optionally open link in new tab */
+    openNewTab: {
+        type: Boolean,
+        default: false
+    },
     /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: {
         type: String,
@@ -28,13 +33,32 @@ const props = defineProps({
 
 const slots = useSlots();
 const hasSlot = !!slots.default;
+
+const cpBaseUrl = Statamic.$config.get('cpUrl');
+
+function isUrlWithinControlPanel(url) {
+    return url && (url === cpBaseUrl || url.startsWith(cpBaseUrl + '/'));
+}
+
+const linkComponent = computed(() => {
+    if (hasSlot) {
+        return 'div';
+    } else if (isUrlWithinControlPanel(props.href)) {
+        return Link;
+    } else if (props.href) {
+        return 'a';
+    } else {
+        return 'button';
+    }
+});
 </script>
 
 <template>
     <li class="w-full">
         <component
-            :is="hasSlot ? 'div' : (href ? Link : 'button')"
+            :is="linkComponent"
             :href="href"
+            :target="openNewTab ? '_blank' : null"
             class="w-full flex gap-2 px-3 pt-4 pb-5.5 items-start hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md group cursor-pointer"
         >
             <Icon :name="icon" class="size-6 me-4 mt-1 text-gray-400" />

From ea848d8ee8493e78537d2329d8ad48d30345b966 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 16 Jun 2026 10:00:39 -0400
Subject: [PATCH 2/2] Use target prop for empty state item links

Aligns with the rest of the @ui library (Button, Badge, Dropdown,
Context, Heading) which expose a `target` prop, rather than a
bespoke `openNewTab` boolean. A `target="_blank"` link now renders
an `<a>` so it opens in a new tab even for internal CP URLs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 resources/js/components/ui/EmptyState/Item.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/ui/EmptyState/Item.vue b/resources/js/components/ui/EmptyState/Item.vue
index f08dcc74861..e5350c30255 100644
--- a/resources/js/components/ui/EmptyState/Item.vue
+++ b/resources/js/components/ui/EmptyState/Item.vue
@@ -9,10 +9,10 @@ const props = defineProps({
         type: String,
         default: null,
     },
-    /** Optionally open link in new tab */
-    openNewTab: {
-        type: Boolean,
-        default: false
+    /** When `href` is provided, this prop controls the link's `target` attribute */
+    target: {
+        type: String,
+        default: null,
     },
     /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: {
@@ -43,6 +43,8 @@ function isUrlWithinControlPanel(url) {
 const linkComponent = computed(() => {
     if (hasSlot) {
         return 'div';
+    } else if (props.target === '_blank') {
+        return 'a';
     } else if (isUrlWithinControlPanel(props.href)) {
         return Link;
     } else if (props.href) {
@@ -58,7 +60,7 @@ const linkComponent = computed(() => {
         <component
             :is="linkComponent"
             :href="href"
-            :target="openNewTab ? '_blank' : null"
+            :target="target"
             class="w-full flex gap-2 px-3 pt-4 pb-5.5 items-start hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md group cursor-pointer"
         >
             <Icon :name="icon" class="size-6 me-4 mt-1 text-gray-400" />