diff --git a/playground/pages/alert.vue b/playground/pages/alert.vue
index b9e7216b..7214b9c5 100644
--- a/playground/pages/alert.vue
+++ b/playground/pages/alert.vue
@@ -3,8 +3,9 @@ import theme from '#build/ui/alert'
 
 const variants = Object.keys(theme.variants.variant)
 
-const actions = [{
+const actions = (variant?: string) => [{
   label: 'Action',
+  color: (variant === 'solid' ? 'black' as const : 'primary' as const),
   click() {
     console.log('Action clicked')
   }
@@ -14,7 +15,7 @@ const data = {
   title: 'Heads up!',
   description: 'You can add components to your app using the cli.',
   icon: 'i-heroicons-command-line',
-  actions,
+  actions: actions(),
   close: true
 }
 </script>
@@ -30,6 +31,13 @@ const data = {
     <UAlert v-bind="data" color="white" />
     <UAlert v-bind="data" color="gray" />
     <UAlert v-bind="data" color="black" />
-    <UAlert v-for="variant in variants" :key="variant" v-bind="data" color="primary" :variant="(variant as any)" />
+    <UAlert
+      v-for="variant in variants"
+      :key="variant"
+      v-bind="data"
+      :actions="actions(variant)"
+      color="primary"
+      :variant="(variant as any)"
+    />
   </div>
 </template>