diff --git a/playground/app.vue b/playground/app.vue
index ba93bcb1..fdf4c340 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -5,7 +5,7 @@ useHead({
   }
 })
 
-const components = ['button', 'collapsible', 'tooltip']
+const components = ['badge', 'button', 'collapsible', 'tooltip']
 </script>
 
 <template>
diff --git a/playground/pages/badge.vue b/playground/pages/badge.vue
new file mode 100644
index 00000000..e9ad90af
--- /dev/null
+++ b/playground/pages/badge.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="flex gap-1.5">
+      <UBadge icon="i-heroicons-rocket-launch" label="Badge" />
+      <UBadge icon="i-heroicons-rocket-launch" label="Badge" variant="outline" />
+      <UBadge icon="i-heroicons-rocket-launch" label="Badge" variant="soft" />
+      <UBadge icon="i-heroicons-rocket-launch" label="Badge" variant="subtle" />
+    </div>
+
+    <div class="flex gap-1.5">
+      <UBadge icon="i-heroicons-rocket-launch" label="Badge" color="green" />
+      <UBadge icon="i-heroicons-rocket-launch" label="Badge" color="green" variant="outline" />
+      <UBadge icon="i-heroicons-rocket-launch" label="Badge" color="green" variant="soft" />
+      <UBadge icon="i-heroicons-rocket-launch" label="Badge" color="green" variant="subtle" />
+    </div>
+
+    <div class="flex gap-1">
+      <UBadge icon="i-heroicons-rocket-launch" label="Badge" color="white" />
+    </div>
+    <div class="flex gap-1">
+      <UBadge icon="i-heroicons-rocket-launch" label="Badge" color="gray" />
+    </div>
+    <div class="flex gap-1">
+      <UBadge icon="i-heroicons-rocket-launch" label="Badge" color="black" />
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/pages/button.vue b/playground/pages/button.vue
index 2cc6a019..8e0b31bd 100644
--- a/playground/pages/button.vue
+++ b/playground/pages/button.vue
@@ -1,33 +1,33 @@
 <template>
   <div class="flex flex-col gap-3">
     <div class="flex gap-1.5">
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" />
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="outline" />
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="soft" />
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="ghost" />
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="link" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" variant="outline" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" variant="soft" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" variant="ghost" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" variant="link" />
     </div>
 
     <div class="flex gap-1.5">
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="indigo" />
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="indigo" variant="outline" />
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="indigo" variant="soft" />
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="indigo" variant="ghost" />
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="indigo" variant="link" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" color="green" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" color="green" variant="outline" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" color="green" variant="soft" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" color="green" variant="ghost" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" color="green" variant="link" />
     </div>
 
     <div class="flex gap-1">
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="white" />
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="white" variant="ghost" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" color="white" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" color="white" variant="ghost" />
     </div>
     <div class="flex gap-1">
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="gray" />
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="gray" variant="ghost" />
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="gray" variant="link" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" variant="ghost" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" variant="link" />
     </div>
     <div class="flex gap-1">
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="black" />
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="black" variant="link" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" color="black" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" color="black" variant="link" />
     </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/playground/pages/collapsible.vue b/playground/pages/collapsible.vue
index 1f659b2b..5e47372a 100644
--- a/playground/pages/collapsible.vue
+++ b/playground/pages/collapsible.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex gap-1.5">
-    <UCollapsible>
-      <UButton label="Open" />
+    <UCollapsible class="space-y-2 flex flex-col justify-start">
+      <UButton trailing-icon="i-heroicons-chevron-right" label="Open" class="group" :ui="{ icon: 'group-data-[state=open]:rotate-180' }" />
 
       <template #content>
-        <div class="bg-red-500 h-12" />
+        <div class="bg-red-500 h-12 w-48" />
       </template>
     </UCollapsible>
   </div>
diff --git a/playground/pages/tooltip.vue b/playground/pages/tooltip.vue
index 818fb096..3b1865a8 100644
--- a/playground/pages/tooltip.vue
+++ b/playground/pages/tooltip.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex gap-1.5">
     <UTooltip content="Tooltip" side="bottom">
-      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" />
+      <UButton icon="i-heroicons-rocket-launch" label="Button" loading />
     </UTooltip>
   </div>
 </template>
\ No newline at end of file