diff --git a/front/src/components/channels/AlbumModal.vue b/front/src/components/channels/AlbumModal.vue
index 8f266aa3c..ba19a8795 100644
--- a/front/src/components/channels/AlbumModal.vue
+++ b/front/src/components/channels/AlbumModal.vue
@@ -58,7 +58,7 @@ defineExpose({
       />
     </div>
     <div class="actions">
-      <Button color="secondary">
+      <Button secondary>
         {{ t('components.channels.AlbumModal.button.cancel') }}
       </Button>
       <Button
diff --git a/front/ui-docs/components/ui/modal.md b/front/ui-docs/components/ui/modal.md
index eefba6dfc..6f9bf0506 100644
--- a/front/ui-docs/components/ui/modal.md
+++ b/front/ui-docs/components/ui/modal.md
@@ -247,7 +247,7 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
     </Alert>
   </template>
   <template #actions>
-    <Button @click="isOpen3 = false" color="secondary">
+    <Button @click="isOpen3 = false" secondary>
       Cancel
     </Button>
     <Button primary @click="isOpen3 = false">
diff --git a/front/ui-docs/components/ui/popover.md b/front/ui-docs/components/ui/popover.md
index 9c23b97b6..02b3bb6cd 100644
--- a/front/ui-docs/components/ui/popover.md
+++ b/front/ui-docs/components/ui/popover.md
@@ -437,8 +437,8 @@ const open = ref(false)
           <PopoverCheckbox v-model="share">
             Share by link
             <template #after>
-              <Button @click.stop="alert('Link copied to clipboard')" color="secondary" round icon="bi-link" />
-              <Button @click.stop="alert('Here is your code')" color="secondary" round icon="bi-code" />
+              <Button ghost @click.stop="alert('Link copied to clipboard')" round icon="bi-link" />
+              <Button ghost @click.stop="alert('Here is your code')" round icon="bi-code" />
             </template>
           </PopoverCheckbox>
         </template>
@@ -622,8 +622,8 @@ const privacyChoices = ["private", "pod", "public"];
           <PopoverCheckbox v-model="share">
             Share by link
             <template #after>
-              <Button @click.stop color="secondary" round icon="bi-link" />
-              <Button @click.stop color="secondary" round icon="bi-code" />
+              <Button @click.stop ghost round icon="bi-link" />
+              <Button @click.stop ghost round icon="bi-code" />
             </template>
           </PopoverCheckbox>
         </template>
@@ -727,8 +727,8 @@ const privacyChoices = ["private", "pod", "public"];
         <PopoverCheckbox v-model="share">
           Share by link
           <template #after>
-            <Button @click.stop color="secondary" round icon="bi-link" />
-            <Button @click.stop color="secondary" round icon="bi-code" />
+            <Button @click.stop ghost round icon="bi-link" />
+            <Button @click.stop ghost round icon="bi-code" />
           </template>
         </PopoverCheckbox>
       </template>