1 files changed, 8 insertions, 6 deletions
diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue
index 3dd05f73841..0b8c6aff219 100644
--- a/app/assets/javascripts/badges/components/badge.vue
+++ b/app/assets/javascripts/badges/components/badge.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlTooltipDirective, GlIcon, GlButton } from '@gitlab/ui';
 
 export default {
   // name: 'Badge' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
@@ -8,6 +8,7 @@ export default {
   components: {
     GlIcon,
     GlLoadingIcon,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -90,15 +91,16 @@ export default {
       </div>
     </div>
 
-    <button
+    <gl-button
       v-show="hasError"
       v-gl-tooltip.hover
       :title="s__('Badges|Reload badge image')"
-      class="btn btn-transparent btn-sm text-primary"
+      category="tertiary"
+      variant="success"
       type="button"
+      icon="retry"
+      size="small"
       @click="reloadImage"
-    >
-      <gl-icon :size="16" name="retry" />
-    </button>
+    />
   </div>
 </template>