1 files changed, 28 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue b/app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue
index cb038a8c4e1..c411496fad1 100644
--- a/app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue
+++ b/app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue
@@ -28,12 +28,37 @@ export default {
       required: false,
       default: false,
     },
+    isOnImage: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isDraft: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'md',
+      validator: (value) => ['sm', 'md'].includes(value),
+    },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     isNewNote() {
       return this.label === null;
     },
     pinLabel() {
+      if (this.ariaLabel) {
+        return this.ariaLabel;
+      }
+
       return this.isNewNote
         ? __('Comment form position')
         : sprintf(__("Comment '%{label}' position"), { label: this.label });
@@ -51,7 +76,10 @@ export default {
       'js-image-badge design-note-pin': !isNewNote,
       resolved: isResolved,
       inactive: isInactive,
+      draft: isDraft,
+      'on-image': isOnImage,
       'gl-absolute': position,
+      small: size === 'sm',
     }"
     class="gl-display-flex gl-align-items-center gl-justify-content-center gl-font-sm"
     type="button"