From 708ae808c79382d2af1579418c6b1871fb94ca24 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 25 Jun 2026 15:24:55 +0100
Subject: [PATCH] Style the list of blueprints as badges instead, especially
 improving legibility for dark mode

---
 resources/js/pages/collections/Empty.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/resources/js/pages/collections/Empty.vue b/resources/js/pages/collections/Empty.vue
index 19dc75e64ab..e2ae7c3b0c8 100644
--- a/resources/js/pages/collections/Empty.vue
+++ b/resources/js/pages/collections/Empty.vue
@@ -45,12 +45,18 @@ const props = defineProps([
                 :heading="createLabel"
                 :description="__('statamic::messages.collection_next_steps_create_entry_description')"
             >
-                <a
-                    v-for="blueprint in blueprints"
-                    :href="blueprint.createEntryUrl"
-                    class="text-blue-600 text-sm rtl:ml-2 ltr:mr-2"
-                    v-text="blueprint.title"
-                />
+                <div class="flex flex-wrap gap-2 mt-2">
+                    <ui-badge
+                        v-for="blueprint in blueprints"
+                        :key="blueprint.createEntryUrl"
+                        :href="blueprint.createEntryUrl"
+                        :text="blueprint.title"
+                        color="blue"
+                        size="sm"
+                        pill
+                        class="dark:bg-gray-925"
+                    />
+                </div>
             </ui-empty-state-item>
 
             <ui-empty-state-item