diff --git a/playground/pages/collapsible.vue b/playground/pages/collapsible.vue
index 1c6f5db4..1dd9bb54 100644
--- a/playground/pages/collapsible.vue
+++ b/playground/pages/collapsible.vue
@@ -1,10 +1,13 @@
 <template>
   <UCollapsible class="space-y-2 w-48">
-    <UButton class="group" color="gray" label="Open" block>
-      <template #trailing="trailingProps">
-        <UIcon name="i-heroicons-chevron-right-20-solid" :class="trailingProps.class" class="group-data-[state=open]:rotate-90 transition-transform duration-200" />
-      </template>
-    </UButton>
+    <UButton
+      class="group"
+      trailing-icon="i-heroicons-chevron-right-20-solid"
+      color="gray"
+      label="Open"
+      block
+      :ui="{ trailingIcon: 'group-data-[state=open]:rotate-90 transition-transform duration-200' }"
+    />
 
     <template #content>
       <Placeholder class="h-24 w-full" />