diff --git a/resources/js/components/ui/Badge.vue b/resources/js/components/ui/Badge.vue
index 7a7d131f51..18b3b93f9e 100644
--- a/resources/js/components/ui/Badge.vue
+++ b/resources/js/components/ui/Badge.vue
@@ -49,26 +49,26 @@ const badgeClasses = computed(() => {
                 lg: 'font-medium text-sm leading-7 px-2.5 rounded-lg [&_svg]:size-4 gap-2',
             },
             color: {
-                amber: 'bg-amber-100 dark:bg-amber-300/6 border-amber-400 dark:border-amber-400/25 text-amber-700 dark:text-amber-300 [a]:hover:bg-amber-200/70 [button]:hover:bg-amber-200/70 dark:[button]:hover:bg-amber-200/9',
-                black: 'bg-gray-900 dark:bg-gray-300/6 border-black dark:border-black/25 text-white dark:text-gray-300 [a]:hover:bg-black/90 [button]:hover:bg-black/90 dark:[button]:hover:bg-black/9',
-                blue: 'bg-blue-100/80 dark:bg-blue-300/6 border-blue-300 dark:border-blue-300/25 text-blue-700 dark:text-blue-300 [a]:hover:bg-blue-200/60 [button]:hover:bg-blue-200/60 dark:[button]:hover:bg-blue-200/9',
-                cyan: 'bg-cyan-100/80 dark:bg-cyan-300/6 border-cyan-400 dark:border-cyan-400/25 text-cyan-700 dark:text-cyan-300 [a]:hover:bg-cyan-200/60 [button]:hover:bg-cyan-200/60 dark:[button]:hover:bg-cyan-200/9',
-                default: 'bg-gray-800/5 dark:bg-gray-800 border-gray-300 dark:border-gray-300/25 dark:text-gray-100 text-gray-700 [a]:hover:bg-gray-800/10 dark:[a]:hover:bg-gray-700/50 [button]:hover:bg-gray-200/50 dark:[button]:hover:bg-gray-200/9',
-                emerald: 'bg-emerald-100/80 border-emerald-400 dark:border-emerald-400/25 text-emerald-700 dark:bg-emerald-300/6 dark:text-emerald-300 [a]:hover:bg-emerald-200/60 [button]:hover:bg-emerald-200/60 dark:[button]:hover:bg-emerald-200/9',
-                fuchsia: 'bg-fuchsia-100/80 dark:bg-fuschia-300/6 border-fuchsia-300 dark:border-fuchsia-300/25 text-fuchsia-700 dark:text-fuschia-300 [a]:hover:bg-fuchsia-200/60 dark:[a]:hover:bg-fuchsia-300/15 [button]:hover:bg-fuchsia-200/60 dark:[button]:hover:bg-fuchsia-200/9',
-                green: 'bg-green-100/80 border-green-400 dark:border-green-400/25 text-green-700 dark:bg-green-300/6 dark:text-green-300 [a]:hover:bg-green-200/60 dark:[a]:hover:bg-green-300/15 [button]:hover:bg-green-200/60 dark:[button]:hover:bg-green-200/9',
-                indigo: 'bg-indigo-100/80 border-indigo-300 dark:border-indigo-300/25 text-indigo-700 dark:bg-indigo-300/6 dark:text-indigo-300 [a]:hover:bg-indigo-200/60 dark:[a]:hover:bg-indigo-300/15 [button]:hover:bg-indigo-200/60 dark:[button]:hover:bg-indigo-200/9',
-                lime: 'bg-lime-100 dark:bg-lime-300/6 border-lime-400 dark:border-lime-400/25 text-lime-700 dark:text-lime-300 [a]:hover:bg-lime-200/80 dark:[a]:hover:bg-lime-300/15 [button]:hover:bg-lime-200/80 dark:[button]:hover:bg-lime-200/9',
-                orange: 'bg-orange-100 dark:bg-orange-300/6 border-orange-400 dark:border-orange-400/25 text-orange-700 dark:text-orange-300 [a]:hover:bg-orange-200/60 [button]:hover:bg-orange-200/60 dark:[a]:hover:bg-orange-300/15 dark:[button]:hover:bg-orange-200/9',
-                pink: 'bg-pink-100/80 dark:bg-pink-300/6 border-pink-300 dark:border-pink-300/25 text-pink-800 dark:text-pink-300 [a]:hover:bg-pink-200/60 dark:[a]:hover:bg-pink-300/15 [button]:hover:bg-pink-200/60 dark:[button]:hover:bg-pink-200/9',
-                purple: 'bg-purple-100/80 dark:bg-purple-300/6 border-purple-300 dark:border-purple-300/25 text-purple-800 dark:text-purple-300 [a]:hover:bg-purple-200/60 dark:[a]:hover:bg-purple-300/15 [button]:hover:bg-purple-200/60 dark:[button]:hover:bg-purple-200/9',
-                red: 'bg-red-100/80 dark:bg-red-300/6 border-red-400 dark:border-red-400/25 text-red-700 dark:text-red-300 [a]:hover:bg-red-200/60 dark:[a]:hover:bg-red-300/15 [button]:hover:bg-red-200/60 dark:[button]:hover:bg-red-200/9',
-                rose: 'bg-rose-100/80 dark:bg-rose-300/6 border-rose-300 dark:border-rose-300/25 text-rose-800 dark:text-rose-300 [a]:hover:bg-rose-200/60 dark:[a]:hover:bg-rose-300/15 [button]:hover:bg-rose-200/60 dark:[button]:hover:bg-rose-200/9',
-                sky: 'bg-sky-100/80 dark:bg-sky-300/6 border-sky-300 dark:border-sky-300/25 text-sky-700 dark:text-sky-300 [a]:hover:bg-sky-200/60 dark:[a]:hover:bg-sky-300/15 [button]:hover:bg-sky-200/60 dark:[button]:hover:bg-sky-200/10',
-                teal: 'bg-teal-100 dark:bg-teal-300/6 border-teal-400 dark:border-teal-400/25 text-teal-700 dark:text-teal-300 [a]:hover:bg-teal-200/70 [button]:hover:bg-teal-200/70 dark:[a]:hover:bg-teal-300/15 dark:[button]:hover:bg-teal-200/9',
-                violet: 'bg-violet-100/80 dark:bg-violet-300/6 border-violet-300 dark:border-violet-300/25 text-violet-700 dark:text-violet-300 [a]:hover:bg-violet-200/60 [button]:hover:bg-violet-200/60 dark:[a]:hover:bg-violet-300/15 dark:[button]:hover:bg-violet-200/9',
-                white: 'bg-white border-gray-300 dark:border-gray-300/25 text-gray-700 dark:bg-gray-300/6 dark:text-gray-300 [a]:hover:bg-gray-200/30 [button]:hover:bg-gray-200/30 dark:[a]:hover:bg-gray-300/15 dark:[button]:hover:bg-gray-200/9',
-                yellow: 'bg-yellow-100 dark:bg-yellow-300/6 border-yellow-400 dark:border-yellow-400/25 text-yellow-700 dark:text-yellow-300 [a]:hover:bg-yellow-200/80 dark:[a]:hover:bg-yellow-300/15 [button]:hover:bg-yellow-200/80 dark:[button]:hover:bg-yellow-200/9',
+                amber: 'bg-amber-50 dark:bg-gray-800 border-amber-400 dark:border-amber-700 text-amber-700 dark:text-amber-300 [a]:hover:bg-amber-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-amber-200 dark:[button]:hover:bg-gray-700',
+                black: 'bg-gray-900 dark:bg-black border-black dark:border-gray-700 text-white dark:text-gray-300 [a]:hover:bg-gray-800 dark:[a]:hover:bg-gray-800 [button]:hover:bg-gray-800 dark:[button]:hover:bg-gray-800',
+                blue: 'bg-blue-50 dark:bg-gray-800 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300 [a]:hover:bg-blue-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-blue-100 dark:[button]:hover:bg-gray-700',
+                cyan: 'bg-cyan-50 dark:bg-gray-800 border-cyan-400 dark:border-cyan-700 text-cyan-700 dark:text-cyan-300 [a]:hover:bg-cyan-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-cyan-100 dark:[button]:hover:bg-gray-700',
+                default: 'bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700 dark:text-gray-100 text-gray-700 [a]:hover:bg-gray-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-gray-200 dark:[button]:hover:bg-gray-700',
+                emerald: 'bg-emerald-50 border-emerald-400 dark:border-emerald-700 text-emerald-700 dark:bg-gray-800 dark:text-emerald-300 [a]:hover:bg-emerald-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-emerald-100 dark:[button]:hover:bg-gray-700',
+                fuchsia: 'bg-fuchsia-50 dark:bg-gray-800 border-fuchsia-300 dark:border-fuchsia-700 text-fuchsia-700 dark:text-fuchsia-300 [a]:hover:bg-fuchsia-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-fuchsia-100 dark:[button]:hover:bg-gray-700',
+                green: 'bg-green-50 border-green-400 dark:border-green-700 text-green-700 dark:bg-gray-800 dark:text-green-300 [a]:hover:bg-green-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-green-100 dark:[button]:hover:bg-gray-700',
+                indigo: 'bg-indigo-50 border-indigo-300 dark:border-indigo-700 text-indigo-700 dark:bg-gray-800 dark:text-indigo-300 [a]:hover:bg-indigo-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-indigo-100 dark:[button]:hover:bg-gray-700',
+                lime: 'bg-lime-50 dark:bg-gray-800 border-lime-400 dark:border-lime-700 text-lime-700 dark:text-lime-300 [a]:hover:bg-lime-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-lime-100 dark:[button]:hover:bg-gray-700',
+                orange: 'bg-orange-50 dark:bg-gray-800 border-orange-400 dark:border-orange-700 text-orange-700 dark:text-orange-300 [a]:hover:bg-orange-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-orange-100 dark:[button]:hover:bg-gray-700',
+                pink: 'bg-pink-50 dark:bg-gray-800 border-pink-300 dark:border-pink-700 text-pink-800 dark:text-pink-300 [a]:hover:bg-pink-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-pink-100 dark:[button]:hover:bg-gray-700',
+                purple: 'bg-purple-50 dark:bg-gray-800 border-purple-300 dark:border-purple-700 text-purple-800 dark:text-purple-300 [a]:hover:bg-purple-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-purple-100 dark:[button]:hover:bg-gray-700',
+                red: 'bg-red-50 dark:bg-gray-800 border-red-400 dark:border-red-700 text-red-700 dark:text-red-300 [a]:hover:bg-red-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-red-100 dark:[button]:hover:bg-gray-700',
+                rose: 'bg-rose-50 dark:bg-gray-800 border-rose-300 dark:border-rose-700 text-rose-800 dark:text-rose-300 [a]:hover:bg-rose-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-rose-100 dark:[button]:hover:bg-gray-700',
+                sky: 'bg-sky-50 dark:bg-gray-800 border-sky-300 dark:border-sky-700 text-sky-700 dark:text-sky-300 [a]:hover:bg-sky-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-sky-100 dark:[button]:hover:bg-gray-700',
+                teal: 'bg-teal-50 dark:bg-gray-800 border-teal-400 dark:border-teal-700 text-teal-700 dark:text-teal-300 [a]:hover:bg-teal-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-teal-100 dark:[button]:hover:bg-gray-700',
+                violet: 'bg-violet-50 dark:bg-gray-800 border-violet-300 dark:border-violet-700 text-violet-700 dark:text-violet-300 [a]:hover:bg-violet-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-violet-100 dark:[button]:hover:bg-gray-700',
+                white: 'bg-white border-gray-300 dark:border-gray-700 text-gray-700 dark:bg-gray-800 dark:text-gray-300 [a]:hover:bg-gray-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-gray-100 dark:[button]:hover:bg-gray-700',
+                yellow: 'bg-yellow-50 dark:bg-gray-800 border-yellow-400 dark:border-yellow-700 text-yellow-700 dark:text-yellow-300 [a]:hover:bg-yellow-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-yellow-100 dark:[button]:hover:bg-gray-700',
             },
             pill: { true: 'rounded-full' },
             asButton: { true: 'shadow-ui-sm no-underline!' }
diff --git a/resources/js/pages/Playground.vue b/resources/js/pages/Playground.vue
index 6c73f167b6..8b6521be7b 100644
--- a/resources/js/pages/Playground.vue
+++ b/resources/js/pages/Playground.vue
@@ -24,7 +24,7 @@ defineProps(['icons']);
     <ui-dropdown-footer text="Logout" icon="arrow-right" />
 </ui-dropdown>
 
-    <div v-cloak>
+    <div v-cloak class="space-y-12">
         <div class="space-y-12 prose starting-style-transition starting-style-transition-children">
             <h1>Typography <strong>Test</strong> Document</h1>
             <p class="lead">This comprehensive document tests all typography elements supported by both tw-prose and @tailwindcss/typography plugins.</p>
@@ -193,6 +193,72 @@ defineProps(['icons']);
                     <ui-badge size="sm" text="Cyan" color="cyan" />
                     <ui-badge size="sm" text="Purple" color="purple" />
                     <ui-badge size="sm" text="Gray" color="gray" />
+                    <ui-badge size="sm" text="Default" />
+                    <ui-badge size="sm" text="Rose" color="rose" />
+                    <ui-badge size="sm" text="Emerald" color="emerald" />
+                    <ui-badge size="sm" text="Fuchsia" color="fuchsia" />
+                    <ui-badge size="sm" text="Indigo" color="indigo" />
+                    <ui-badge size="sm" text="Lime" color="lime" />
+                    <ui-badge size="sm" text="Orange" color="orange" />
+                    <ui-badge size="sm" text="Sky" color="sky" />
+                    <ui-badge size="sm" text="Teal" color="teal" />
+                    <ui-badge size="sm" text="Violet" color="violet" />
+                    <ui-badge size="sm" text="White" color="white" />
+                    <ui-badge size="sm" text="Yellow" color="yellow" />
+                </div>
+            </section>
+
+            <section class="space-y-4">
+                <ui-heading size="lg">Badges as Links</ui-heading>
+                <div class="mb-4 flex gap-2 sm:gap-3 items-end flex-wrap">
+                    <ui-badge size="lg" text="Green Link" color="green" href="#" />
+                    <ui-badge size="lg" text="Red Link" color="red" href="#" />
+                    <ui-badge size="lg" text="Black Link" color="black" href="#" />
+                    <ui-badge text="Blue Link" color="blue" href="#" />
+                    <ui-badge text="Amber Link" color="amber" href="#" />
+                    <ui-badge text="Pink Link" color="pink" href="#" />
+                    <ui-badge size="sm" text="Cyan Link" color="cyan" href="#" />
+                    <ui-badge size="sm" text="Purple Link" color="purple" href="#" />
+                    <ui-badge size="sm" text="Gray Link" color="gray" href="#" />
+                    <ui-badge size="sm" text="Default Link" href="#" />
+                    <ui-badge size="sm" text="Rose Link" color="rose" href="#" />
+                    <ui-badge size="sm" text="Emerald Link" color="emerald" href="#" />
+                    <ui-badge size="sm" text="Fuchsia Link" color="fuchsia" href="#" />
+                    <ui-badge size="sm" text="Indigo Link" color="indigo" href="#" />
+                    <ui-badge size="sm" text="Lime Link" color="lime" href="#" />
+                    <ui-badge size="sm" text="Orange Link" color="orange" href="#" />
+                    <ui-badge size="sm" text="Sky Link" color="sky" href="#" />
+                    <ui-badge size="sm" text="Teal Link" color="teal" href="#" />
+                    <ui-badge size="sm" text="Violet Link" color="violet" href="#" />
+                    <ui-badge size="sm" text="White Link" color="white" href="#" />
+                    <ui-badge size="sm" text="Yellow Link" color="yellow" href="#" />
+                </div>
+            </section>
+
+            <section class="space-y-4">
+                <ui-heading size="lg">Badges as Buttons</ui-heading>
+                <div class="mb-4 flex gap-2 sm:gap-3 items-end flex-wrap">
+                    <ui-badge size="lg" text="Green Button" color="green" as="button" />
+                    <ui-badge size="lg" text="Red Button" color="red" as="button" />
+                    <ui-badge size="lg" text="Black Button" color="black" as="button" />
+                    <ui-badge text="Blue Button" color="blue" as="button" />
+                    <ui-badge text="Amber Button" color="amber" as="button" />
+                    <ui-badge text="Pink Button" color="pink" as="button" />
+                    <ui-badge size="sm" text="Cyan Button" color="cyan" as="button" />
+                    <ui-badge size="sm" text="Purple Button" color="purple" as="button" />
+                    <ui-badge size="sm" text="Gray Button" color="gray" as="button" />
+                    <ui-badge size="sm" text="Default Button" as="button" />
+                    <ui-badge size="sm" text="Rose Button" color="rose" as="button" />
+                    <ui-badge size="sm" text="Emerald Button" color="emerald" as="button" />
+                    <ui-badge size="sm" text="Fuchsia Button" color="fuchsia" as="button" />
+                    <ui-badge size="sm" text="Indigo Button" color="indigo" as="button" />
+                    <ui-badge size="sm" text="Lime Button" color="lime" as="button" />
+                    <ui-badge size="sm" text="Orange Button" color="orange" as="button" />
+                    <ui-badge size="sm" text="Sky Button" color="sky" as="button" />
+                    <ui-badge size="sm" text="Teal Button" color="teal" as="button" />
+                    <ui-badge size="sm" text="Violet Button" color="violet" as="button" />
+                    <ui-badge size="sm" text="White Button" color="white" as="button" />
+                    <ui-badge size="sm" text="Yellow Button" color="yellow" as="button" />
                 </div>
             </section>