diff --git a/resources/js/components/ui/EmptyState/Item.vue b/resources/js/components/ui/EmptyState/Item.vue
index d1af7702998..e5350c30255 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,
     },
+    /** 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: {
         type: String,
@@ -28,13 +33,34 @@ 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 (props.target === '_blank') {
+        return 'a';
+    } 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="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" />