1 files changed, 52 insertions, 13 deletions

diff --git a/app/assets/javascripts/design_management/components/delete_button.vue b/app/assets/javascripts/design_management/components/delete_button.vue
index 1fd902c9ed7..37686dd5a46 100644
--- a/app/assets/javascripts/design_management/components/delete_button.vue
+++ b/app/assets/javascripts/design_management/components/delete_button.vue
@@ -1,11 +1,12 @@
 <script>
-import { GlDeprecatedButton, GlModal, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
+import { s__, __ } from '~/locale';
 
 export default {
   name: 'DeleteButton',
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlModal,
   },
   directives: {
@@ -25,40 +26,78 @@ export default {
     buttonVariant: {
       type: String,
       required: false,
-      default: '',
+      default: 'info',
+    },
+    buttonCategory: {
+      type: String,
+      required: false,
+      default: 'primary',
+    },
+    buttonIcon: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    buttonSize: {
+      type: String,
+      required: false,
+      default: 'medium',
     },
     hasSelectedDesigns: {
       type: Boolean,
       required: false,
       default: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
       modalId: uniqueId('design-deletion-confirmation-'),
     };
   },
+  modal: {
+    title: s__('DesignManagement|Are you sure you want to archive the selected designs?'),
+    actionPrimary: {
+      text: s__('DesignManagement|Archive designs'),
+      attributes: { variant: 'warning' },
+    },
+    actionCancel: {
+      text: __('Cancel'),
+    },
+  },
 };
 </script>
 
 <template>
-  <div>
+  <div class="gl-display-flex gl-align-items-center gl-h-full">
     <gl-modal
       :modal-id="modalId"
-      :title="s__('DesignManagement|Delete designs confirmation')"
-      :ok-title="s__('DesignManagement|Delete')"
-      ok-variant="danger"
+      :title="$options.modal.title"
+      :action-primary="$options.modal.actionPrimary"
+      :action-cancel="$options.modal.actionCancel"
       @ok="$emit('deleteSelectedDesigns')"
     >
-      <p>{{ s__('DesignManagement|Are you sure you want to delete the selected designs?') }}</p>
+      <p>
+        {{
+          s__(
+            'DesignManagement|Archived designs will still be available in previous versions of the design collection.',
+          )
+        }}
+      </p>
     </gl-modal>
-    <gl-deprecated-button
+    <gl-button
       v-gl-modal-directive="modalId"
       :variant="buttonVariant"
-      :disabled="isDeleting || !hasSelectedDesigns"
+      :category="buttonCategory"
+      :size="buttonSize"
       :class="buttonClass"
-    >
-      <slot></slot>
-    </gl-deprecated-button>
+      :loading="loading"
+      :icon="buttonIcon"
+      :disabled="isDeleting || !hasSelectedDesigns"
+    />
   </div>
 </template>