diff --git a/playground/pages/toast.vue b/playground/pages/toast.vue
index 43bbd4ea..c69e3cfc 100644
--- a/playground/pages/toast.vue
+++ b/playground/pages/toast.vue
@@ -65,7 +65,6 @@ const templates = (id: number) => [{
   icon: 'i-heroicons-rocket-launch',
   actions: [{
     label: 'Action',
-    color: 'primary' as const,
     variant: 'outline' as const,
     click() {
       console.log(`Toast ${id} action clicked`)
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index 300cae1c..99262315 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -105,7 +105,7 @@ defineExpose({
 
       <div v-if="multiline && actions?.length" :class="ui.actions({ multiline: true })">
         <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
-          <UButton size="xs" color="white" v-bind="action" />
+          <UButton size="xs" :color="color" v-bind="action" />
         </ToastAction>
       </div>
     </div>
@@ -113,7 +113,7 @@ defineExpose({
     <div v-if="(!multiline && actions?.length) || close !== null" :class="ui.actions({ multiline: false })">
       <template v-if="!multiline">
         <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
-          <UButton size="xs" color="white" v-bind="action" />
+          <UButton size="xs" :color="color" v-bind="action" />
         </ToastAction>
       </template>