diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index 46dacf30f39bdcc7495a9b4db9730766bbe38260..76bf651e171212e58b3b7375e0e7dcb06a621640 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -91,7 +91,7 @@ export default {
       </div>
     </template>
     <template #cell(clusterType)="{value}">
-      <gl-badge variant="light">
+      <gl-badge variant="muted">
         {{ value }}
       </gl-badge>
     </template>
diff --git a/app/assets/javascripts/error_tracking/components/constants.js b/app/assets/javascripts/error_tracking/components/constants.js
index 60b217443de242e44f681d85ce73a803ebfd6c52..41b952e26d85e86d3016da34b5951f870a5d4303 100644
--- a/app/assets/javascripts/error_tracking/components/constants.js
+++ b/app/assets/javascripts/error_tracking/components/constants.js
@@ -8,10 +8,10 @@ export const severityLevel = {
 
 export const severityLevelVariant = {
   [severityLevel.FATAL]: 'danger',
-  [severityLevel.ERROR]: 'dark',
+  [severityLevel.ERROR]: 'neutral',
   [severityLevel.WARNING]: 'warning',
   [severityLevel.INFO]: 'info',
-  [severityLevel.DEBUG]: 'light',
+  [severityLevel.DEBUG]: 'muted',
 };
 
 export const errorStatus = {
diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue
index 148edfe3a51f370776c9ca01963a4db1fb336397..b316d4d8d38a8b6a316a920923a600ae6ec7d2de 100644
--- a/app/assets/javascripts/error_tracking/components/error_details.vue
+++ b/app/assets/javascripts/error_tracking/components/error_details.vue
@@ -345,16 +345,10 @@ export default {
           <h2 class="text-truncate">{{ error.title }}</h2>
         </tooltip-on-truncate>
         <template v-if="error.tags">
-          <gl-badge
-            v-if="error.tags.level"
-            :variant="errorSeverityVariant"
-            class="rounded-pill mr-2"
-          >
+          <gl-badge v-if="error.tags.level" :variant="errorSeverityVariant" class="mr-2">
             {{ errorLevel }}
           </gl-badge>
-          <gl-badge v-if="error.tags.logger" variant="light" class="rounded-pill"
-            >{{ error.tags.logger }}
-          </gl-badge>
+          <gl-badge v-if="error.tags.logger" variant="muted">{{ error.tags.logger }} </gl-badge>
         </template>
         <ul>
           <li v-if="error.gitlabCommit">
diff --git a/app/assets/javascripts/monitoring/components/alert_widget.vue b/app/assets/javascripts/monitoring/components/alert_widget.vue
index 86a793c854e3b09c4ba55a7ce46c0440f4405bf6..5562981fe1c6f832636de6b7da3f2c00d8b1231f 100644
--- a/app/assets/javascripts/monitoring/components/alert_widget.vue
+++ b/app/assets/javascripts/monitoring/components/alert_widget.vue
@@ -234,11 +234,7 @@ export default {
       class="alert-current-setting cursor-pointer d-flex"
       @click="showModal"
     >
-      <gl-badge
-        :variant="isFiring ? 'danger' : 'secondary'"
-        pill
-        class="d-flex-center text-truncate"
-      >
+      <gl-badge :variant="isFiring ? 'danger' : 'neutral'" class="d-flex-center text-truncate">
         <gl-icon name="warning" :size="16" class="flex-shrink-0" />
         <span class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me">
           <gl-sprintf
diff --git a/app/assets/javascripts/releases/components/release_block_milestone_info.vue b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
index 01ad0cbf732f131be2efbdff1af45c93a6bcd11e..61b2ed81ebc1d8f7b8ad54e570a1fb0b0540fa20 100644
--- a/app/assets/javascripts/releases/components/release_block_milestone_info.vue
+++ b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
@@ -148,7 +148,7 @@ export default {
     <div class="d-flex flex-column align-items-start flex-shrink-0 mr-4 mb-3 js-issues-container">
       <span class="mb-1">
         {{ __('Issues') }}
-        <gl-badge pill variant="light" class="font-weight-bold">{{ totalIssuesCount }}</gl-badge>
+        <gl-badge variant="muted" size="sm">{{ totalIssuesCount }}</gl-badge>
       </span>
       <div class="d-flex">
         <gl-link v-if="openIssuesPath" ref="openIssuesLink" :href="openIssuesPath">
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index f741a6df5d9060dee574b380ea95a60e2d463ac3..8c511abc2b9dc35813eab0a6dad215318f90a8a7 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -148,7 +148,7 @@ export default {
         /><span class="position-relative">{{ fullPath }}</span>
       </component>
       <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
-      <gl-badge v-if="lfsOid" variant="default" class="label-lfs ml-1">LFS</gl-badge>
+      <gl-badge v-if="lfsOid" variant="muted" size="sm" class="ml-1">LFS</gl-badge>
       <template v-if="isSubmodule">
         @ <gl-link :href="submoduleTreeUrl" class="commit-sha">{{ shortSha }}</gl-link>
       </template>
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index ed5c133950dc24944975277079a962a992ff51d1..a717b7fc6db64b05e0c0bc7d8bbac1fc90b20c4f 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -187,7 +187,7 @@ h3.popover-header {
 
 // Add to .label so that old system notes that are saved to the db
 // will still receive the correct styling
-.badge,
+.badge:not(.gl-badge),
 .label {
   padding: 4px 5px;
   font-size: 12px;
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index c036267a7c82e05508467e1226d760ad0a3ee160..ca5528375c499fe87f008d72a6211870a8d235b7 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -1,4 +1,4 @@
-.badge.badge-pill {
+.badge.badge-pill:not(.gl-badge) {
   font-weight: $gl-font-weight-normal;
   background-color: $badge-bg;
   color: $gray-800;
diff --git a/ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue b/ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue
index d623fa8be275463a84d9ec3b3878ed1658e39544..382351ab05481dcfe72a0e51436a1c681b6eb53c 100644
--- a/ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue
+++ b/ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue
@@ -105,7 +105,7 @@ export default {
         <template v-else>
           <div>
             <span class="font-weight-bold">{{ __('Merge Requests in Review') }}</span>
-            <gl-badge pill>{{ totalItems }}</gl-badge>
+            <gl-badge size="sm">{{ totalItems }}</gl-badge>
           </div>
           <merge-request-table />
           <gl-pagination
diff --git a/ee/app/assets/javascripts/dependencies/components/app.vue b/ee/app/assets/javascripts/dependencies/components/app.vue
index dfa4e5be2ea3e9f4dc52a8effdb8f9c42e675708..f2edc881ad267700f470f29843e39bb27d8fb2d9 100644
--- a/ee/app/assets/javascripts/dependencies/components/app.vue
+++ b/ee/app/assets/javascripts/dependencies/components/app.vue
@@ -207,7 +207,7 @@ export default {
       >
         <template #title>
           {{ listType.label }}
-          <gl-badge pill :data-qa-selector="qaCountSelector(listType.label)">
+          <gl-badge :data-qa-selector="qaCountSelector(listType.label)">
             {{ totals[listType.namespace] }}
           </gl-badge>
         </template>
diff --git a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
index d4b68e8cf1909a0ebbdfd84f9f8c2379aec57f27..917271377904837c3d54c26f8b82e4872c63a60f 100644
--- a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
+++ b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
@@ -138,16 +138,13 @@ export default {
     </template>
 
     <template #cell(isVulnerable)="{ item, toggleDetails }">
-      <!-- This badge usage will be simplified by
-        https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28356 -->
       <gl-badge
         v-if="item.vulnerabilities.length"
         variant="warning"
         href="#"
-        class="d-inline-flex align-items-center bg-warning-100 text-warning-700 bold"
         @click.native="toggleDetails"
       >
-        <gl-icon name="warning" class="text-warning-500 mr-1" />
+        <gl-icon name="warning" class="mr-1" />
         {{
           n__(
             'Dependencies|%d vulnerability detected',
diff --git a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue
index 50c62ef39db9eff0704c7313030bbf05aed7ada6..19347ced63e4cb0bf2dae500f6c0ca6042fc953b 100644
--- a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue
+++ b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue
@@ -148,7 +148,7 @@ export default {
             >
               {{ buildName }}
             </gl-link>
-            <gl-badge v-else v-gl-tooltip="jobTooltip" variant="primary">{{ buildName }}</gl-badge>
+            <gl-badge v-else v-gl-tooltip="jobTooltip" variant="info">{{ buildName }}</gl-badge>
           </div>
           <commit
             :tag="lastDeployment.tag"
diff --git a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue
index 9f95742647d3bd48cb265b0c2de60c05b01eb7eb..d31a2d172ec78b648ff1f338fe2240692353eb54 100644
--- a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue
+++ b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue
@@ -60,7 +60,7 @@ export default {
       >
         <span class="js-environment-name bold"> {{ environment.name }}</span>
       </gl-link>
-      <gl-badge v-if="environment.within_folder" :pill="true" class="dashboard-card-icon">{{
+      <gl-badge v-if="environment.within_folder" class="dashboard-card-icon">{{
         environment.size
       }}</gl-badge>
     </div>
diff --git a/ee/app/assets/javascripts/license_compliance/components/app.vue b/ee/app/assets/javascripts/license_compliance/components/app.vue
index 0d54cb9c627a9d64f4d047cb6bbc12ca08b5e2e5..f31fbb73b2d087944a244c0bd33f6d36117286f9 100644
--- a/ee/app/assets/javascripts/license_compliance/components/app.vue
+++ b/ee/app/assets/javascripts/license_compliance/components/app.vue
@@ -124,7 +124,7 @@ export default {
         <gl-tab>
           <template #title>
             {{ s__('Licenses|Detected in Project') }}
-            <gl-badge pill>{{ licenseCount }}</gl-badge>
+            <gl-badge>{{ licenseCount }}</gl-badge>
           </template>
 
           <detected-licenses-table />
@@ -133,7 +133,7 @@ export default {
         <gl-tab>
           <template #title>
             {{ s__('Licenses|Policies') }}
-            <gl-badge pill>{{ policyCount }}</gl-badge>
+            <gl-badge>{{ policyCount }}</gl-badge>
           </template>
 
           <license-management />
diff --git a/ee/app/assets/javascripts/license_compliance/components/licenses_table_row.vue b/ee/app/assets/javascripts/license_compliance/components/licenses_table_row.vue
index 6801bc651a9af7c3d8fada6e8c34f9c6bab00e07..a1b941f993532f3d11cd16a992b26072812ff187 100644
--- a/ee/app/assets/javascripts/license_compliance/components/licenses_table_row.vue
+++ b/ee/app/assets/javascripts/license_compliance/components/licenses_table_row.vue
@@ -64,8 +64,7 @@ export default {
         <div class="table-mobile-content d-md-flex justify-content-between align-items-center">
           <license-component-links :components="license.components" :title="license.name" />
           <div v-if="isDenied" class="d-inline-block">
-            <!-- This badge usage will be simplified in https://gitlab.com/gitlab-org/gitlab/-/issues/213789 -->
-            <gl-badge variant="warning" class="gl-alert-warning d-flex align-items-center">
+            <gl-badge variant="warning">
               <gl-icon name="warning" :size="16" class="pr-1" />
               <span>{{ s__('Licenses|Policy violation: denied') }}</span>
             </gl-badge>
diff --git a/ee/app/assets/javascripts/packages/shared/components/package_tags.vue b/ee/app/assets/javascripts/packages/shared/components/package_tags.vue
index 14a98c8158d11458dc5fe0e390201813e96726a2..83583f175d2584251fa5760939a00b59fa784ef2 100644
--- a/ee/app/assets/javascripts/packages/shared/components/package_tags.vue
+++ b/ee/app/assets/javascripts/packages/shared/components/package_tags.vue
@@ -57,8 +57,8 @@ export default {
     tagBadgeClass(index) {
       return {
         'd-none': true,
-        'd-block': this.tagCount === 1,
-        'd-md-block': this.tagCount > 1,
+        'd-flex': this.tagCount === 1,
+        'd-md-flex': this.tagCount > 1,
         'append-right-4': index !== this.tagsToRender.length - 1,
         'prepend-left-8': !this.hideLabel && index === 0,
       };
@@ -87,9 +87,9 @@ export default {
       v-if="moreTagsDisplay"
       ref="moreBadge"
       v-gl-tooltip
-      variant="light"
+      variant="muted"
       :title="moreTagsTooltip"
-      class="d-none d-md-block prepend-left-4"
+      class="d-none d-md-flex prepend-left-4"
       ><gl-sprintf :message="__('+%{tags} more')">
         <template #tags>
           {{ moreTagsDisplay }}
@@ -100,7 +100,7 @@ export default {
     <gl-badge
       v-if="moreTagsDisplay && hideLabel"
       ref="moreBadge"
-      variant="light"
+      variant="muted"
       class="d-md-none prepend-left-4"
       >{{ tagsDisplay }}</gl-badge
     >
diff --git a/ee/app/assets/javascripts/security_dashboard/components/project_list.vue b/ee/app/assets/javascripts/security_dashboard/components/project_list.vue
index 84feaef6d585d494ab652ba8e1227759c9e7d08f..eea097344b658578afd0875ce28ed0a5019f82dc 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/project_list.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/project_list.vue
@@ -37,7 +37,7 @@ export default {
     <div>
       <h4 class="h5 font-weight-bold text-secondary border-bottom mb-3 pb-2">
         {{ s__('SecurityReports|Projects added') }}
-        <gl-badge pill class="font-weight-bold">{{ projects.length }}</gl-badge>
+        <gl-badge class="font-weight-bold">{{ projects.length }}</gl-badge>
         <gl-loading-icon v-if="showLoadingIndicator" size="sm" class="float-right" />
       </h4>
       <ul v-if="projects.length" class="list-unstyled">
diff --git a/ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue b/ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue
index 018680f2f39a17ce063e6d44351f47c0e881eac2..54e1603ff707061c6a5f2ea93c384aa030368d4e 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue
@@ -64,7 +64,7 @@ export default {
         <gl-tab ref="outdatedProjectsTab" title-item-class="ml-3">
           <template #title>
             {{ s__('UnscannedProjects|Out of date') }}
-            <gl-badge v-if="!isLoading" ref="outdatedProjectsCount" pill>{{
+            <gl-badge v-if="!isLoading" ref="outdatedProjectsCount">{{
               outdatedProjectsCount
             }}</gl-badge>
           </template>
@@ -84,7 +84,7 @@ export default {
         <gl-tab ref="untestedProjectsTab" title-item-class="ml-3">
           <template #title>
             {{ s__('UnscannedProjects|Untested') }}
-            <gl-badge v-if="!isLoading" ref="untestedProjectsCount" pill>{{
+            <gl-badge v-if="!isLoading" ref="untestedProjectsCount">{{
               untestedProjectsCount
             }}</gl-badge>
           </template>
diff --git a/ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap b/ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap
index 1a1dc7237b64fd0eefe1d40b81bb0636301901d1..63765875fcaf34d6e14af2dc402515a68a4eebfc 100644
--- a/ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap
+++ b/ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap
@@ -126,7 +126,8 @@ exports[`Environment Header with environments grouped into a folder matches the
      
     <gl-badge-stub
       class="dashboard-card-icon"
-      pill="true"
+      size="md"
+      variant="neutral"
     >
       5
     </gl-badge-stub>
diff --git a/ee/spec/frontend/packages/shared/components/package_tags_spec.js b/ee/spec/frontend/packages/shared/components/package_tags_spec.js
index 825e361d3e2e710ec089a8c21281f768a1458859..a2ae569a435b66f02db24ede52e862657a6ba027 100644
--- a/ee/spec/frontend/packages/shared/components/package_tags_spec.js
+++ b/ee/spec/frontend/packages/shared/components/package_tags_spec.js
@@ -73,25 +73,25 @@ describe('PackageTags', () => {
     it('shows tag badge when there is only one', () => {
       createComponent([mockTags[0]]);
 
-      const expectedStyle = [...defaultStyle, 'd-block', 'prepend-left-8'];
+      const expectedStyle = [...defaultStyle, 'd-flex', 'prepend-left-8'];
 
       expect(
         tagBadges()
           .at(0)
           .classes(),
-      ).toEqual(expectedStyle);
+      ).toEqual(expect.arrayContaining(expectedStyle));
     });
 
     it('shows tag badge for medium or heigher resolutions', () => {
       createComponent(mockTags);
 
-      const expectedStyle = [...defaultStyle, 'd-md-block'];
+      const expectedStyle = [...defaultStyle, 'd-md-flex'];
 
       expect(
         tagBadges()
           .at(1)
           .classes(),
-      ).toEqual(expectedStyle);
+      ).toEqual(expect.arrayContaining(expectedStyle));
     });
 
     it('correctly prepends left and appends right when there is more than one tag', () => {
@@ -99,15 +99,17 @@ describe('PackageTags', () => {
         tagDisplayLimit: 4,
       });
 
-      const expectedStyleWithoutAppend = [...defaultStyle, 'd-md-block'];
+      const expectedStyleWithoutAppend = [...defaultStyle, 'd-md-flex'];
       const expectedStyleWithAppend = [...expectedStyleWithoutAppend, 'append-right-4'];
 
       const allBadges = tagBadges();
 
-      expect(allBadges.at(0).classes()).toEqual([...expectedStyleWithAppend, 'prepend-left-8']);
-      expect(allBadges.at(1).classes()).toEqual(expectedStyleWithAppend);
-      expect(allBadges.at(2).classes()).toEqual(expectedStyleWithAppend);
-      expect(allBadges.at(3).classes()).toEqual(expectedStyleWithoutAppend);
+      expect(allBadges.at(0).classes()).toEqual(
+        expect.arrayContaining([...expectedStyleWithAppend, 'prepend-left-8']),
+      );
+      expect(allBadges.at(1).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend));
+      expect(allBadges.at(2).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend));
+      expect(allBadges.at(3).classes()).toEqual(expect.arrayContaining(expectedStyleWithoutAppend));
     });
   });
 });
diff --git a/package.json b/package.json
index b5b772601ebf44c98e41897a0f06ca412e2e1e67..3b41c1e1e3449f5bb6e19920df999f976a47b195 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "@babel/preset-env": "^7.8.4",
     "@gitlab/at.js": "1.5.5",
     "@gitlab/svgs": "1.125.0",
-    "@gitlab/ui": "13.9.0",
+    "@gitlab/ui": "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/540491242/artifacts/raw/gitlab-ui.481-style-text-badges.tgz",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.2-2",
     "@sentry/browser": "^5.10.2",
@@ -217,4 +217,4 @@
     "node": ">=10.13.0",
     "yarn": "^1.10.0"
   }
-}
\ No newline at end of file
+}
diff --git a/spec/frontend/error_tracking/components/error_details_spec.js b/spec/frontend/error_tracking/components/error_details_spec.js
index adbbc04ce78c3e7a0ef97bf727c114c8ba5603b3..7fdab606de953babfd9da58a16920941ba4f45e4 100644
--- a/spec/frontend/error_tracking/components/error_details_spec.js
+++ b/spec/frontend/error_tracking/components/error_details_spec.js
@@ -235,7 +235,7 @@ describe('ErrorDetails', () => {
             },
           });
           return wrapper.vm.$nextTick().then(() => {
-            expect(wrapper.find(GlBadge).attributes('variant')).toEqual(
+            expect(wrapper.find(GlBadge).props('variant')).toEqual(
               severityLevelVariant[severityLevel[level]],
             );
           });
@@ -249,7 +249,7 @@ describe('ErrorDetails', () => {
           },
         });
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.find(GlBadge).attributes('variant')).toEqual(
+          expect(wrapper.find(GlBadge).props('variant')).toEqual(
             severityLevelVariant[severityLevel.ERROR],
           );
         });
diff --git a/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap b/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap
index 2179e7b4ab5145da8afa67f02d2c9832d619c221..59c17daacff3cbb59acb9f5bb237377ad1502928 100644
--- a/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap
+++ b/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap
@@ -3,7 +3,7 @@
 exports[`AlertWidget Alert firing displays a warning icon and matches snapshot 1`] = `
 <gl-badge-stub
   class="d-flex-center text-truncate"
-  pill=""
+  size="md"
   variant="danger"
 >
   <gl-icon-stub
@@ -25,8 +25,8 @@ exports[`AlertWidget Alert firing displays a warning icon and matches snapshot 1
 exports[`AlertWidget Alert not firing displays a warning icon and matches snapshot 1`] = `
 <gl-badge-stub
   class="d-flex-center text-truncate"
-  pill=""
-  variant="secondary"
+  size="md"
+  variant="neutral"
 >
   <gl-icon-stub
     class="flex-shrink-0"
diff --git a/yarn.lock b/yarn.lock
index 0a4ef63d5805feaf2f0320c0c5b6fda63ed3ed96..7d0a1fb4178b7002b2d0915b663ad59da20e7bb6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -787,10 +787,9 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.125.0.tgz#59c667dae8f7e4c80b482f5f6cc35367c016387b"
   integrity sha512-MKfFYa8f+9P2tJ/JN/E9oDBSSo/gRz2zuGui4XHQPoaw/DkIMn7EyAzeSpRgbgs1LgMcEqqKsIEx+spCga3jsQ==
 
-"@gitlab/ui@13.9.0":
-  version "13.9.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-13.9.0.tgz#c75c3c6adc92e71a5e7915fe6d1c9fa6e2d5f85d"
-  integrity sha512-fpjjMXAyOGIITR/Jb7zmw7ul5EAwdSdivmJsiQnwb9eetjNgVlguYu0ZZM0YAdgRXeeIRyVaS8OCqTeyD02yFQ==
+"@gitlab/ui@https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/540491242/artifacts/raw/gitlab-ui.481-style-text-badges.tgz":
+  version "14.0.0"
+  resolved "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/540491242/artifacts/raw/gitlab-ui.481-style-text-badges.tgz#1845ef234f8c3b522dfef2a74cf64f6f74ecac16"
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"