diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index 74ce76739a2621a637fcf8b164ce2ab277344230..04f63c6efd6c6327e88bf53c91f5e005537b723c 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -10,7 +10,7 @@ import {
   GlDropdownItem,
   GlTabs,
   GlTab,
-  GlBadge,
+  GlDeprecatedBadge as GlBadge,
 } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index af3f1437c644cfe411d335a06bb3cbdda2253c52..0b98f9c010191f14fbe52317d7c81db78c3b277c 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -1,6 +1,12 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlBadge, GlLink, GlLoadingIcon, GlPagination, GlTable } from '@gitlab/ui';
+import {
+  GlDeprecatedBadge as GlBadge,
+  GlLink,
+  GlLoadingIcon,
+  GlPagination,
+  GlTable,
+} from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { CLUSTER_TYPES, STATUSES } from '../constants';
 import { __, sprintf } from '~/locale';
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 da079877c7236d116b897105e7f99874e9ef3d78..7e3b52100858886ba38abe844fb745eb8a084f20 100644
--- a/app/assets/javascripts/error_tracking/components/error_details.vue
+++ b/app/assets/javascripts/error_tracking/components/error_details.vue
@@ -363,16 +363,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 d9fbd2884b7992468c9cfda632ee3afd93907f16..4f75e15a14953e8a0a6d43edc4891bd0574c89d6 100644
--- a/app/assets/javascripts/releases/components/release_block_milestone_info.vue
+++ b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
@@ -144,7 +144,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 344241213904fcdcace34bda23876b28a99d9ba3..d53630163359b4126dfa270befe41f1cd32179d2 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -147,8 +147,11 @@ export default {
           class="mr-1 position-relative text-secondary"
         /><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>
+      <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
+      <gl-badge v-if="lfsOid" variant="muted" size="sm" class="ml-1" data-qa-selector="label-lfs"
+        >LFS</gl-badge
+      >
+      <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
       <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 f819c2dbce10f4024a6197e8e2234812b863d892..a6d56819140529c7dc270b2a62ed41677f7cd7a1 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/changelogs/unreleased/gitlab-ui-badge-integration-2.yml b/changelogs/unreleased/gitlab-ui-badge-integration-2.yml
new file mode 100644
index 0000000000000000000000000000000000000000..fef025138d519d3c8799e156c738c8d111dde29e
--- /dev/null
+++ b/changelogs/unreleased/gitlab-ui-badge-integration-2.yml
@@ -0,0 +1,5 @@
+---
+title: Update the visual design of badges in some areas
+merge_request: 31646
+author:
+type: other
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/dependencies_table.vue b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
index 22e9795ce383072896bc448868714f3d0537237c..38ef7dfd73e105253df6f2591746eadc5621c62d 100644
--- a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
+++ b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
@@ -1,6 +1,13 @@
 <script>
 import { cloneDeep } from 'lodash';
-import { GlBadge, GlIcon, GlLink, GlButton, GlSkeletonLoading, GlTable } from '@gitlab/ui';
+import {
+  GlDeprecatedBadge as GlBadge,
+  GlIcon,
+  GlLink,
+  GlButton,
+  GlSkeletonLoading,
+  GlTable,
+} from '@gitlab/ui';
 import { s__ } from '~/locale';
 import DependencyLicenseLinks from './dependency_license_links.vue';
 import DependencyVulnerabilities from './dependency_vulnerabilities.vue';
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..ddc4fe807bac4ab21d1804df23c6e8248bf6b3a5 100644
--- a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue
+++ b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue
@@ -1,6 +1,6 @@
 <script>
 import { escape, isEmpty } from 'lodash';
-import { GlTooltipDirective, GlLink, GlBadge } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import Alerts from 'ee/vue_shared/dashboards/components/alerts.vue';
 import TimeAgo from 'ee/vue_shared/dashboards/components/time_ago.vue';
 import { STATUS_FAILED } from 'ee/vue_shared/dashboards/constants';
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..d819948fa8b18193815219d9c8a907bea7a0faa2 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
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlBadge, GlTooltipDirective } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge, GlTooltipDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
diff --git a/ee/app/assets/javascripts/feature_flags/components/form.vue b/ee/app/assets/javascripts/feature_flags/components/form.vue
index ce9c0097497dedc709d607591599994db8d6c466..e9f56ebcdbb47cae4e27508fb924fbd4ddec2eb6 100644
--- a/ee/app/assets/javascripts/feature_flags/components/form.vue
+++ b/ee/app/assets/javascripts/feature_flags/components/form.vue
@@ -3,7 +3,7 @@ import Vue from 'vue';
 import { memoize, isString, cloneDeep, isNumber } from 'lodash';
 import {
   GlDeprecatedButton,
-  GlBadge,
+  GlDeprecatedBadge as GlBadge,
   GlTooltip,
   GlTooltipDirective,
   GlFormTextarea,
diff --git a/ee/app/assets/javascripts/geo_node_form/components/app.vue b/ee/app/assets/javascripts/geo_node_form/components/app.vue
index 0a875589d0c1d71c01570a4c200624f7d849df89..7f2baec7e098542472533f0c0a42263a62fd1d08 100644
--- a/ee/app/assets/javascripts/geo_node_form/components/app.vue
+++ b/ee/app/assets/javascripts/geo_node_form/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import { __ } from '~/locale';
 import GeoNodeForm from './geo_node_form.vue';
 
diff --git a/ee/app/assets/javascripts/license_compliance/components/app.vue b/ee/app/assets/javascripts/license_compliance/components/app.vue
index 877a2745d033befec7ff2e71fcc5974ba6a5ec82..348dd39eba7a59abf7d16f6f2a5704491abc90ee 100644
--- a/ee/app/assets/javascripts/license_compliance/components/app.vue
+++ b/ee/app/assets/javascripts/license_compliance/components/app.vue
@@ -7,7 +7,7 @@ import {
   GlIcon,
   GlTab,
   GlTabs,
-  GlBadge,
+  GlDeprecatedBadge as GlBadge,
   GlAlert,
 } from '@gitlab/ui';
 import { LICENSE_LIST } from '../store/constants';
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 355bf818b185926e874b171709f59f2e01a7b674..427453dd826c9353d833581675130d497021e460 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
@@ -1,5 +1,11 @@
 <script>
-import { GlLink, GlSkeletonLoading, GlBadge, GlIcon, GlFriendlyWrap } from '@gitlab/ui';
+import {
+  GlLink,
+  GlSkeletonLoading,
+  GlDeprecatedBadge as GlBadge,
+  GlIcon,
+  GlFriendlyWrap,
+} from '@gitlab/ui';
 import LicenseComponentLinks from './license_component_links.vue';
 import { LICENSE_APPROVAL_CLASSIFICATION } from 'ee/vue_shared/license_compliance/constants';
 
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/requirements/components/requirements_tabs.vue b/ee/app/assets/javascripts/requirements/components/requirements_tabs.vue
index 3ac8d96578380ebb7d0bc83c14bfd6b61ba8b086..e442e19f6abf0048e8a7df0c8b43e778e2d1a5be 100644
--- a/ee/app/assets/javascripts/requirements/components/requirements_tabs.vue
+++ b/ee/app/assets/javascripts/requirements/components/requirements_tabs.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlBadge, GlButton } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge, GlButton } from '@gitlab/ui';
 
 import { FilterState } from '../constants';
 
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..ac0195384316fe7e08cf8efb73623ed7e1a11ea2 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/project_list.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/project_list.vue
@@ -1,5 +1,10 @@
 <script>
-import { GlBadge, GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import {
+  GlDeprecatedBadge as GlBadge,
+  GlDeprecatedButton,
+  GlLoadingIcon,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 
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..bebce356b0ac6351a1a986f2715336bfe3eeed31 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge, GlTabs, GlTab, GlLink } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlTabs, GlTab, GlLink } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 
 import Icon from '~/vue_shared/components/icon.vue';
diff --git a/ee/app/assets/javascripts/vue_shared/metrics_reports/components/metrics_reports_issue_body.vue b/ee/app/assets/javascripts/vue_shared/metrics_reports/components/metrics_reports_issue_body.vue
index 730f8c051dc6703959943c40abd8c4f6486441d5..c7d9eef2e875135d5882bddf92cb3535b4db0b21 100644
--- a/ee/app/assets/javascripts/vue_shared/metrics_reports/components/metrics_reports_issue_body.vue
+++ b/ee/app/assets/javascripts/vue_shared/metrics_reports/components/metrics_reports_issue_body.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue b/ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue
index 59f34bf4235738e29b7e6f5752332f849a583201..b85f4cd280a9de97476ee058cd2d4aa63f1195b4 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge, GlPopover } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlPopover } from '@gitlab/ui';
 
 export default {
   name: 'RemediatedBadge',
diff --git a/ee/spec/frontend/dependencies/components/dependencies_table_spec.js b/ee/spec/frontend/dependencies/components/dependencies_table_spec.js
index 2c01fec983f7fcfb14d0e71cc3dfaf44d5e42243..8ff294718817a9e388f5d89f56aef116886f1b9b 100644
--- a/ee/spec/frontend/dependencies/components/dependencies_table_spec.js
+++ b/ee/spec/frontend/dependencies/components/dependencies_table_spec.js
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
-import { GlBadge, GlButton, GlLink, GlSkeletonLoading } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlButton, GlLink, GlSkeletonLoading } from '@gitlab/ui';
 import stubChildren from 'helpers/stub_children';
 import DependenciesTable from 'ee/dependencies/components/dependencies_table.vue';
 import DependencyLicenseLinks from 'ee/dependencies/components/dependency_license_links.vue';
diff --git a/ee/spec/frontend/environments_dashboard/components/environment_header_spec.js b/ee/spec/frontend/environments_dashboard/components/environment_header_spec.js
index 96ffe311346372b205120998bba904f402ec6c94..4f9188107040d830ab6c42f607c4dca126d3032c 100644
--- a/ee/spec/frontend/environments_dashboard/components/environment_header_spec.js
+++ b/ee/spec/frontend/environments_dashboard/components/environment_header_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount, mount } from '@vue/test-utils';
-import { GlLink, GlBadge } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import component from 'ee/environments_dashboard/components/dashboard/environment_header.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
diff --git a/ee/spec/frontend/geo_node_form/components/app_spec.js b/ee/spec/frontend/geo_node_form/components/app_spec.js
index d9bf33b4a1ef1ee11c613c3e57c32e5d95fd6b29..4bbd20f4d50c71ce48937a819324710a422fd62a 100644
--- a/ee/spec/frontend/geo_node_form/components/app_spec.js
+++ b/ee/spec/frontend/geo_node_form/components/app_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlBadge } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import GeoNodeFormApp from 'ee/geo_node_form/components/app.vue';
 import GeoNodeForm from 'ee/geo_node_form/components/geo_node_form.vue';
 import { MOCK_SELECTIVE_SYNC_TYPES, MOCK_SYNC_SHARDS } from '../mock_data';
diff --git a/ee/spec/frontend/license_compliance/components/app_spec.js b/ee/spec/frontend/license_compliance/components/app_spec.js
index 77d35e8dbc5c37b2db559d2f124c5c81e088c391..cf9f8c20f37e835fb860e4d14b8499b463ae82ef 100644
--- a/ee/spec/frontend/license_compliance/components/app_spec.js
+++ b/ee/spec/frontend/license_compliance/components/app_spec.js
@@ -2,7 +2,14 @@ import { shallowMount, mount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 
-import { GlEmptyState, GlLoadingIcon, GlTab, GlTabs, GlAlert, GlBadge } from '@gitlab/ui';
+import {
+  GlEmptyState,
+  GlLoadingIcon,
+  GlTab,
+  GlTabs,
+  GlAlert,
+  GlDeprecatedBadge as GlBadge,
+} from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import setWindowLocation from 'helpers/set_window_location_helper';
 
diff --git a/ee/spec/frontend/license_compliance/components/licenses_table_row_spec.js b/ee/spec/frontend/license_compliance/components/licenses_table_row_spec.js
index d99bdaeccc4d8cab92edf0e8cdf5194af0da82c2..177cb5b4e05c7eba53da0f51b329db3c3504be76 100644
--- a/ee/spec/frontend/license_compliance/components/licenses_table_row_spec.js
+++ b/ee/spec/frontend/license_compliance/components/licenses_table_row_spec.js
@@ -1,5 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlLink, GlSkeletonLoading, GlBadge, GlFriendlyWrap } from '@gitlab/ui';
+import {
+  GlLink,
+  GlSkeletonLoading,
+  GlDeprecatedBadge as GlBadge,
+  GlFriendlyWrap,
+} from '@gitlab/ui';
 import LicenseComponentLinks from 'ee/license_compliance/components/license_component_links.vue';
 import LicensesTableRow from 'ee/license_compliance/components/licenses_table_row.vue';
 import { makeLicense } from './utils';
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/ee/spec/frontend/requirements/components/requirements_tabs_spec.js b/ee/spec/frontend/requirements/components/requirements_tabs_spec.js
index b07cb527ccc5c5f78fbe41ecff9c4642c2d76d8c..db64a65171874551832343cabe880bd3db0b0421 100644
--- a/ee/spec/frontend/requirements/components/requirements_tabs_spec.js
+++ b/ee/spec/frontend/requirements/components/requirements_tabs_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import { GlLink, GlBadge, GlButton } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge, GlButton } from '@gitlab/ui';
 
 import RequirementsTabs from 'ee/requirements/components/requirements_tabs.vue';
 import { FilterState } from 'ee/requirements/constants';
diff --git a/ee/spec/frontend/security_dashboard/components/project_list_spec.js b/ee/spec/frontend/security_dashboard/components/project_list_spec.js
index 45d0c94265a13cc686bce19fe9515cb40c213d44..b75ab7ce3408ed64508301b654bf531def427347 100644
--- a/ee/spec/frontend/security_dashboard/components/project_list_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/project_list_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import { GlBadge, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import ProjectList from 'ee/security_dashboard/components/project_list.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 
diff --git a/ee/spec/frontend/vulnerabilities/remediated_badge_spec.js b/ee/spec/frontend/vulnerabilities/remediated_badge_spec.js
index 4dd4abdaa20a57dc1e3fed730400c65735cb926b..b20e3a8a7754d10e1414310ea79c858686bedae7 100644
--- a/ee/spec/frontend/vulnerabilities/remediated_badge_spec.js
+++ b/ee/spec/frontend/vulnerabilities/remediated_badge_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlBadge, GlPopover } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlPopover } from '@gitlab/ui';
 import RemediatedBadge from 'ee/vulnerabilities/components/remediated_badge.vue';
 
 const POPOVER_TITLE = 'Vulnerability remediated. Review before resolving.';
diff --git a/package.json b/package.json
index e713a2f502848a7b8e7be2e5ba2a518380713973..771584d5499a99d071c5b0b83781e5aaacd9daa6 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "@babel/preset-env": "^7.8.4",
     "@gitlab/at.js": "1.5.5",
     "@gitlab/svgs": "1.130.0",
-    "@gitlab/ui": "15.6.0",
+    "@gitlab/ui": "16.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3",
     "@sentry/browser": "^5.10.2",
diff --git a/spec/features/projects/tree/tree_show_spec.rb b/spec/features/projects/tree/tree_show_spec.rb
index 2407a9e6ea3c3be14cda100cc89988770e85215a..5305936a12f6347f41cbcef56fead84b96c90bae 100644
--- a/spec/features/projects/tree/tree_show_spec.rb
+++ b/spec/features/projects/tree/tree_show_spec.rb
@@ -24,7 +24,7 @@
     expect(page).to have_selector('.tree-item')
     expect(page).to have_content('add tests for .gitattributes custom highlighting')
     expect(page).not_to have_selector('.flash-alert')
-    expect(page).not_to have_selector('.label-lfs', text: 'LFS')
+    expect(page).not_to have_selector('[data-qa-selector="label-lfs"]', text: 'LFS')
   end
 
   it 'renders tree table for a subtree without errors' do
@@ -33,7 +33,7 @@
 
     expect(page).to have_selector('.tree-item')
     expect(page).to have_content('add spaces in whitespace file')
-    expect(page).not_to have_selector('.label-lfs', text: 'LFS')
+    expect(page).not_to have_selector('[data-qa-selector="label-lfs"]', text: 'LFS')
     expect(page).not_to have_selector('.flash-alert')
   end
 
@@ -86,7 +86,7 @@
     it 'renders LFS badge on blob item' do
       visit project_tree_path(project, File.join('master', 'files/lfs'))
 
-      expect(page).to have_selector('.label-lfs', text: 'LFS')
+      expect(page).to have_selector('[data-qa-selector="label-lfs"]', text: 'LFS')
     end
   end
 
diff --git a/spec/frontend/alert_management/components/alert_management_list_spec.js b/spec/frontend/alert_management/components/alert_management_list_spec.js
index 88dde9f16f755781102c50daec2c711246faaf3c..baef12d66a1c9b165754b1b082d4ee85c4cdc293 100644
--- a/spec/frontend/alert_management/components/alert_management_list_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_list_spec.js
@@ -8,7 +8,7 @@ import {
   GlDropdownItem,
   GlIcon,
   GlTab,
-  GlBadge,
+  GlDeprecatedBadge as GlBadge,
 } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
diff --git a/spec/frontend/error_tracking/components/error_details_spec.js b/spec/frontend/error_tracking/components/error_details_spec.js
index 03181e322a196c0ca98cfad2a1b8be77d4f33beb..d4c99639fa41f7e566ce2be5fbaf389c3b831c96 100644
--- a/spec/frontend/error_tracking/components/error_details_spec.js
+++ b/spec/frontend/error_tracking/components/error_details_spec.js
@@ -248,7 +248,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]],
             );
           });
@@ -262,7 +262,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 dfdb9634700991e9244e2242c4460377fa41ea72..0c2d52e6df2b1aa3eeeca27bb7ba804244679c37 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -787,10 +787,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.130.0.tgz#0c2f3cdc0a4b0f54c47b2861c8fa31b2a58c570a"
   integrity sha512-azJ1E9PBk6fGOaP6816BSr8oYrQu3m3BbYZwWOCUp8AfbZuf0ZOZVYmlR9i/eAOhoqqqmwF8hYCK2VjAklbpPA==
 
-"@gitlab/ui@15.6.0":
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-15.6.0.tgz#0fc4ca7fd6ecc3c1be7e127dce3dde78fb4faa06"
-  integrity sha512-drb+f+xcAOtov2mAE3FX49845Fe4o41/jTKDxONDlsescKggZBXaSl1PQtL4EkspllIFb3JYdvL0sXbmp/dz3w==
+"@gitlab/ui@16.0":
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-16.0.0.tgz#0e2d19b85c47f45a052caf6cd0367613cbab8e8e"
+  integrity sha512-xSWXtFWWQzGtL35dGexc5LGqAJXYjLMEFQyPLzCBX3yY9tkI9s9rVMX053tnKYb9kgEmL+R/xGiW7D9nb58VmQ==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"