diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index 2860cc88233..ca3518a471c 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -1,6 +1,7 @@
 <template>
   <component
     :is="type"
+    :id="id"
     v-bind="additionalAttributes"
     :aria-label="ariaLabel"
     :class="$_ocButton_buttonClass"
@@ -12,6 +13,7 @@
 </template>
 
 <script lang="ts">
+import uniqueId from '../../utils/uniqueId'
 import { defineComponent } from 'vue'
 import { getSizeClass } from '../../utils/sizeClasses'
 
@@ -20,6 +22,14 @@ export default defineComponent({
   status: 'ready',
   release: '1.0.0',
   props: {
+    /**
+     * The ID of the element.
+     */
+    id: {
+      type: String,
+      required: false,
+      default: () => uniqueId('oc-button-')
+    },
     /**
      * The html element used for the button.
      * `button, a, router-link`
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index dadfa186afa..08899a9e212 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -1,11 +1,11 @@
 <template>
   <span class="oc-flex oc-flex-middle">
-    <oc-button :id="editShareBtnId" class="collaborator-edit-dropdown-options-btn" appearance="raw">
+    <oc-button ref="editShareBtn" class="collaborator-edit-dropdown-options-btn" appearance="raw">
       <oc-icon name="more-2" />
     </oc-button>
     <oc-drop
       ref="expirationDateDrop"
-      :toggle="'#' + editShareBtnId"
+      :toggle="'#' + editShareBtn.id"
       mode="click"
       padding-size="small"
     >
@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { mapGetters } from 'vuex'
 import { DateTime } from 'luxon'
 
@@ -78,6 +78,13 @@ export default defineComponent({
       required: true
     }
   },
+  setup() {
+    const editShareBtn = ref()
+
+    return {
+      editShareBtn
+    }
+  },
   data: function () {
     return {
       enteredExpirationDate: null
@@ -121,10 +128,6 @@ export default defineComponent({
         }
       ]
     },
-
-    editShareBtnId() {
-      return 'files-collaborators-edit-button-' + this._uid
-    },
     shareEditOptions() {
       return this.$gettext('Context menu of the share')
     },