From 017da06f9ab7aa9da37f2b37ba6fe4312f2f6403 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Tue, 19 Dec 2023 19:22:37 +0100
Subject: [PATCH] [CL-160] Rename BadgeType to BadgeVariant (#7244)

We're establishing a common language for the Component Library. As part of this work we're renaming componentType to variant. Starting with badges.
---
 .../manage/groups.component.html              |  2 +-
 .../member-dialog.component.html              |  2 +-
 .../members/people.component.html             | 16 ++++-----
 .../policies/policies.component.html          |  2 +-
 .../access-selector.component.html            |  2 +-
 .../emergency-access.component.html           | 33 +++++++------------
 .../webauthn-login-settings.component.html    |  8 ++---
 .../user-subscription.component.html          |  2 +-
 ...nization-subscription-cloud.component.html |  4 +--
 .../exposed-passwords-report.component.html   |  2 +-
 .../reused-passwords-report.component.html    |  2 +-
 .../weak-passwords-report.component.html      |  2 +-
 .../pages/weak-passwords-report.component.ts  |  6 ++--
 .../report-card/report-card.component.html    |  2 +-
 .../components/premium-badge.component.ts     |  2 +-
 .../individual-vault/add-edit.component.html  |  2 +-
 .../collection-name-badge.component.html      |  4 +--
 .../group-name-badge.component.html           |  2 +-
 .../domain-add-edit-dialog.component.html     |  4 +--
 .../domain-verification.component.html        |  4 +--
 .../providers/manage/people.component.html    | 10 +++---
 .../shared/secrets-list.component.html        |  4 +--
 .../src/badge-list/badge-list.component.html  |  4 +--
 .../src/badge-list/badge-list.component.ts    |  4 +--
 .../src/badge-list/badge-list.stories.ts      |  8 ++---
 libs/components/src/badge/badge.directive.ts  | 19 +++++++----
 libs/components/src/badge/badge.stories.ts    | 18 +++++-----
 libs/components/src/badge/index.ts            |  2 +-
 .../multi-select/multi-select.component.html  |  2 +-
 .../src/toggle-group/toggle-group.stories.ts  | 10 +++---
 30 files changed, 91 insertions(+), 93 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/manage/groups.component.html b/apps/web/src/app/admin-console/organizations/manage/groups.component.html
index d8055e4bdc..0c65c2812d 100644
--- a/apps/web/src/app/admin-console/organizations/manage/groups.component.html
+++ b/apps/web/src/app/admin-console/organizations/manage/groups.component.html
@@ -88,7 +88,7 @@
               *ngIf="!g.details.accessAll"
               [items]="g.collectionNames"
               [maxItems]="3"
-              badgeType="secondary"
+              variant="secondary"
             ></bit-badge-list>
             <span *ngIf="g.details.accessAll">{{ "all" | i18n }}</span>
           </td>
diff --git a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
index 65d9b766dd..b53cba9c26 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
@@ -5,7 +5,7 @@
       <span class="tw-text-sm tw-normal-case tw-text-muted" *ngIf="!loading && params.name">{{
         params.name
       }}</span>
-      <span bitBadge badgeType="secondary" *ngIf="isRevoked">{{ "revoked" | i18n }}</span>
+      <span bitBadge variant="secondary" *ngIf="isRevoked">{{ "revoked" | i18n }}</span>
     </span>
     <div bitDialogContent>
       <ng-container *ngIf="loading">
diff --git a/apps/web/src/app/admin-console/organizations/members/people.component.html b/apps/web/src/app/admin-console/organizations/members/people.component.html
index d759807816..c99056dbbc 100644
--- a/apps/web/src/app/admin-console/organizations/members/people.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/people.component.html
@@ -8,22 +8,22 @@
         [attr.aria-label]="'memberStatusFilter' | i18n"
       >
         <bit-toggle [value]="null">
-          {{ "all" | i18n }} <span bitBadge badgeType="info" *ngIf="allCount">{{ allCount }}</span>
+          {{ "all" | i18n }} <span bitBadge variant="info" *ngIf="allCount">{{ allCount }}</span>
         </bit-toggle>
 
         <bit-toggle [value]="userStatusType.Invited">
           {{ "invited" | i18n }}
-          <span bitBadge badgeType="info" *ngIf="invitedCount">{{ invitedCount }}</span>
+          <span bitBadge variant="info" *ngIf="invitedCount">{{ invitedCount }}</span>
         </bit-toggle>
 
         <bit-toggle [value]="userStatusType.Accepted">
           {{ "needsConfirmation" | i18n }}
-          <span bitBadge badgeType="info" *ngIf="acceptedCount">{{ acceptedCount }}</span>
+          <span bitBadge variant="info" *ngIf="acceptedCount">{{ acceptedCount }}</span>
         </bit-toggle>
 
         <bit-toggle [value]="userStatusType.Revoked">
           {{ "revoked" | i18n }}
-          <span bitBadge badgeType="info" *ngIf="revokedCount">{{ revokedCount }}</span>
+          <span bitBadge variant="info" *ngIf="revokedCount">{{ revokedCount }}</span>
         </bit-toggle>
       </bit-toggle-group>
 
@@ -160,21 +160,21 @@
                     <span
                       bitBadge
                       class="tw-text-xs"
-                      badgeType="secondary"
+                      variant="secondary"
                       *ngIf="u.status === userStatusType.Invited"
                       >{{ "invited" | i18n }}</span
                     >
                     <span
                       bitBadge
                       class="tw-text-xs"
-                      badgeType="warning"
+                      variant="warning"
                       *ngIf="u.status === userStatusType.Accepted"
                       >{{ "needsConfirmation" | i18n }}</span
                     >
                     <span
                       bitBadge
                       class="tw-text-xs"
-                      badgeType="secondary"
+                      variant="secondary"
                       *ngIf="u.status === userStatusType.Revoked"
                       >{{ "revoked" | i18n }}</span
                     >
@@ -195,7 +195,7 @@
                 *ngIf="organization.useGroups || !u.accessAll"
                 [items]="organization.useGroups ? u.groupNames : u.collectionNames"
                 [maxItems]="3"
-                badgeType="secondary"
+                variant="secondary"
               ></bit-badge-list>
               <span *ngIf="!organization.useGroups && u.accessAll">{{ "all" | i18n }}</span>
             </td>
diff --git a/apps/web/src/app/admin-console/organizations/policies/policies.component.html b/apps/web/src/app/admin-console/organizations/policies/policies.component.html
index d12502398f..8f2c0760bd 100644
--- a/apps/web/src/app/admin-console/organizations/policies/policies.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/policies.component.html
@@ -14,7 +14,7 @@
     <tr *ngFor="let p of policies">
       <td *ngIf="p.display(organization)">
         <a href="#" appStopClick (click)="edit(p)">{{ p.name | i18n }}</a>
-        <span bitBadge badgeType="success" *ngIf="policiesEnabledMap.get(p.type)">{{
+        <span bitBadge variant="success" *ngIf="policiesEnabledMap.get(p.type)">{{
           "on" | i18n
         }}</span>
         <small class="text-muted d-block">{{ p.description | i18n }}</small>
diff --git a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
index c2ef2f78ed..5a22b7b228 100644
--- a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
+++ b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
@@ -63,7 +63,7 @@
           <div class="tw-flex tw-flex-col">
             <div>
               {{ item.labelName }}
-              <span *ngIf="$any(item).status == 0" bitBadge badgeType="secondary">
+              <span *ngIf="$any(item).status == 0" bitBadge variant="secondary">
                 {{ "invited" | i18n }}
               </span>
             </div>
diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
index 0ce30ccd4f..4f2bf3b875 100644
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
@@ -43,21 +43,15 @@
       </td>
       <td>
         <a href="#" appStopClick (click)="edit(c)">{{ c.email }}</a>
+        <span bitBadge variant="secondary" *ngIf="c.status === emergencyAccessStatusType.Invited">{{
+          "invited" | i18n
+        }}</span>
+        <span bitBadge variant="warning" *ngIf="c.status === emergencyAccessStatusType.Accepted">{{
+          "accepted" | i18n
+        }}</span>
         <span
           bitBadge
-          badgeType="secondary"
-          *ngIf="c.status === emergencyAccessStatusType.Invited"
-          >{{ "invited" | i18n }}</span
-        >
-        <span
-          bitBadge
-          badgeType="warning"
-          *ngIf="c.status === emergencyAccessStatusType.Accepted"
-          >{{ "accepted" | i18n }}</span
-        >
-        <span
-          bitBadge
-          badgeType="warning"
+          variant="warning"
           *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
           >{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
         >
@@ -163,21 +157,18 @@
         <span bitBadge *ngIf="c.status === emergencyAccessStatusType.Invited">{{
           "invited" | i18n
         }}</span>
+        <span bitBadge variant="warning" *ngIf="c.status === emergencyAccessStatusType.Accepted">{{
+          "accepted" | i18n
+        }}</span>
         <span
           bitBadge
-          badgeType="warning"
-          *ngIf="c.status === emergencyAccessStatusType.Accepted"
-          >{{ "accepted" | i18n }}</span
-        >
-        <span
-          bitBadge
-          badgeType="warning"
+          variant="warning"
           *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
           >{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
         >
         <span
           bitBadge
-          badgeType="success"
+          variant="success"
           *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved"
           >{{ "emergencyAccessRecoveryApproved" | i18n }}</span
         >
diff --git a/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html b/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
index 968b8565a6..e65899e05e 100644
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
@@ -4,21 +4,21 @@
     <span
       *ngIf="requireSsoPolicyEnabled"
       bitBadge
-      badgeType="secondary"
+      variant="secondary"
       class="tw-max-w-full !tw-align-middle"
     >
       {{ "off" | i18n }} - {{ "ssoLoginIsRequired" | i18n }}
     </span>
     <ng-container *ngIf="!requireSsoPolicyEnabled">
-      <span *ngIf="hasCredentials" bitBadge badgeType="success" class="!tw-align-middle">{{
+      <span *ngIf="hasCredentials" bitBadge variant="success" class="!tw-align-middle">{{
         "on" | i18n
       }}</span>
-      <span *ngIf="!hasCredentials" bitBadge badgeType="secondary" class="!tw-align-middle">{{
+      <span *ngIf="!hasCredentials" bitBadge variant="secondary" class="!tw-align-middle">{{
         "off" | i18n
       }}</span>
     </ng-container>
   </ng-container>
-  <span bitBadge badgeType="warning" class="!tw-align-middle">{{ "beta" | i18n }}</span>
+  <span bitBadge variant="warning" class="!tw-align-middle">{{ "beta" | i18n }}</span>
   <ng-container *ngIf="loading">
     <i class="bwi bwi-spinner bwi-spin tw-ml-1" aria-hidden="true"></i>
   </ng-container>
diff --git a/apps/web/src/app/billing/individual/user-subscription.component.html b/apps/web/src/app/billing/individual/user-subscription.component.html
index 0b709eec5b..79a694e42a 100644
--- a/apps/web/src/app/billing/individual/user-subscription.component.html
+++ b/apps/web/src/app/billing/individual/user-subscription.component.html
@@ -63,7 +63,7 @@
         <dt>{{ "status" | i18n }}</dt>
         <dd>
           <span class="text-capitalize">{{ (subscription && subscription.status) || "-" }}</span>
-          <span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
+          <span bitBadge variant="warning" *ngIf="subscriptionMarkedForCancel">{{
             "pendingCancellation" | i18n
           }}</span>
         </dd>
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
index 0ffe79cc6c..d4c34982e7 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
@@ -49,7 +49,7 @@
         <span class="tw-capitalize">{{
           isSponsoredSubscription ? "sponsored" : subscription.status || "-"
         }}</span>
-        <span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
+        <span bitBadge variant="warning" *ngIf="subscriptionMarkedForCancel">{{
           "pendingCancellation" | i18n
         }}</span>
       </dd>
@@ -96,7 +96,7 @@
               {{ "beta" | i18n }}
               ({{ "annually" | i18n }}) @
               {{ 0 | currency: "$" }}
-              <span bitBadge badgeType="warning" class="tw-ml-2">{{
+              <span bitBadge variant="warning" class="tw-ml-2">{{
                 "betaEnding" | i18n | uppercase
               }}</span>
             </td>
diff --git a/apps/web/src/app/reports/pages/exposed-passwords-report.component.html b/apps/web/src/app/reports/pages/exposed-passwords-report.component.html
index 03af0e6cb4..39642d0b10 100644
--- a/apps/web/src/app/reports/pages/exposed-passwords-report.component.html
+++ b/apps/web/src/app/reports/pages/exposed-passwords-report.component.html
@@ -60,7 +60,7 @@
             </app-org-badge>
           </td>
           <td class="text-right">
-            <span bitBadge badgeType="warning">
+            <span bitBadge variant="warning">
               {{ "exposedXTimes" | i18n: (exposedPasswordMap.get(c.id) | number) }}
             </span>
           </td>
diff --git a/apps/web/src/app/reports/pages/reused-passwords-report.component.html b/apps/web/src/app/reports/pages/reused-passwords-report.component.html
index 4bb26580cc..b03907b1f6 100644
--- a/apps/web/src/app/reports/pages/reused-passwords-report.component.html
+++ b/apps/web/src/app/reports/pages/reused-passwords-report.component.html
@@ -75,7 +75,7 @@
             </app-org-badge>
           </td>
           <td class="text-right">
-            <span bitBadge badgeType="warning">
+            <span bitBadge variant="warning">
               {{ "reusedXTimes" | i18n: passwordUseMap.get(c.login.password) }}
             </span>
           </td>
diff --git a/apps/web/src/app/reports/pages/weak-passwords-report.component.html b/apps/web/src/app/reports/pages/weak-passwords-report.component.html
index 562a0b504c..dd41c46240 100644
--- a/apps/web/src/app/reports/pages/weak-passwords-report.component.html
+++ b/apps/web/src/app/reports/pages/weak-passwords-report.component.html
@@ -75,7 +75,7 @@
             </app-org-badge>
           </td>
           <td class="text-right">
-            <span bitBadge [badgeType]="passwordStrengthMap.get(c.id)[1]">
+            <span bitBadge [variant]="passwordStrengthMap.get(c.id)[1]">
               {{ passwordStrengthMap.get(c.id)[0] | i18n }}
             </span>
           </td>
diff --git a/apps/web/src/app/reports/pages/weak-passwords-report.component.ts b/apps/web/src/app/reports/pages/weak-passwords-report.component.ts
index 9da9643448..a7ed119e19 100644
--- a/apps/web/src/app/reports/pages/weak-passwords-report.component.ts
+++ b/apps/web/src/app/reports/pages/weak-passwords-report.component.ts
@@ -7,7 +7,7 @@ import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/pass
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { BadgeTypes } from "@bitwarden/components";
+import { BadgeVariant } from "@bitwarden/components";
 import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { CipherReportComponent } from "./cipher-report.component";
@@ -17,7 +17,7 @@ import { CipherReportComponent } from "./cipher-report.component";
   templateUrl: "weak-passwords-report.component.html",
 })
 export class WeakPasswordsReportComponent extends CipherReportComponent implements OnInit {
-  passwordStrengthMap = new Map<string, [string, BadgeTypes]>();
+  passwordStrengthMap = new Map<string, [string, BadgeVariant]>();
   disabled = true;
 
   private passwordStrengthCache = new Map<string, number>();
@@ -118,7 +118,7 @@ export class WeakPasswordsReportComponent extends CipherReportComponent implemen
     return c.login.password + "_____" + (this.isUserNameNotEmpty(c) ? c.login.username : "");
   }
 
-  private scoreKey(score: number): [string, BadgeTypes] {
+  private scoreKey(score: number): [string, BadgeVariant] {
     switch (score) {
       case 4:
         return ["strong", "success"];
diff --git a/apps/web/src/app/reports/shared/report-card/report-card.component.html b/apps/web/src/app/reports/shared/report-card/report-card.component.html
index 2996b7b499..5553daf6e7 100644
--- a/apps/web/src/app/reports/shared/report-card/report-card.component.html
+++ b/apps/web/src/app/reports/shared/report-card/report-card.component.html
@@ -15,7 +15,7 @@
     </div>
     <span
       bitBadge
-      [badgeType]="requiresPremium ? 'success' : 'primary'"
+      [variant]="requiresPremium ? 'success' : 'primary'"
       class="tw-absolute tw-left-2 tw-top-2 tw-leading-none"
       *ngIf="disabled"
     >
diff --git a/apps/web/src/app/vault/components/premium-badge.component.ts b/apps/web/src/app/vault/components/premium-badge.component.ts
index 5dafda2551..6deff43489 100644
--- a/apps/web/src/app/vault/components/premium-badge.component.ts
+++ b/apps/web/src/app/vault/components/premium-badge.component.ts
@@ -5,7 +5,7 @@ import { MessagingService } from "@bitwarden/common/platform/abstractions/messag
 @Component({
   selector: "app-premium-badge",
   template: `
-    <button type="button" *appNotPremium bitBadge badgeType="success" (click)="premiumRequired()">
+    <button type="button" *appNotPremium bitBadge variant="success" (click)="premiumRequired()">
       {{ "premium" | i18n }}
     </button>
   `,
diff --git a/apps/web/src/app/vault/individual-vault/add-edit.component.html b/apps/web/src/app/vault/individual-vault/add-edit.component.html
index 449f1242e4..af5954f0c4 100644
--- a/apps/web/src/app/vault/individual-vault/add-edit.component.html
+++ b/apps/web/src/app/vault/individual-vault/add-edit.component.html
@@ -267,7 +267,7 @@
                   href="#"
                   appStopClick
                   bitBadge
-                  badgeType="primary"
+                  variant="primary"
                   class="tw-ml-4"
                   (click)="upgradeOrganization()"
                   *ngIf="
diff --git a/apps/web/src/app/vault/org-vault/collection-badge/collection-name-badge.component.html b/apps/web/src/app/vault/org-vault/collection-badge/collection-name-badge.component.html
index 881ad4e1fa..853682ebda 100644
--- a/apps/web/src/app/vault/org-vault/collection-badge/collection-name-badge.component.html
+++ b/apps/web/src/app/vault/org-vault/collection-badge/collection-name-badge.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngFor="let c of shownCollections">
-  <span bitBadge badgeType="secondary">{{ c | collectionNameFromId: collections }}</span>
+  <span bitBadge variant="secondary">{{ c | collectionNameFromId: collections }}</span>
 </ng-container>
 <ng-container *ngIf="showXMore">
-  <span bitBadge badgeType="secondary">+ {{ xMoreCount }} more</span>
+  <span bitBadge variant="secondary">+ {{ xMoreCount }} more</span>
 </ng-container>
diff --git a/apps/web/src/app/vault/org-vault/group-badge/group-name-badge.component.html b/apps/web/src/app/vault/org-vault/group-badge/group-name-badge.component.html
index 7f2c3e37eb..9ddc9897a3 100644
--- a/apps/web/src/app/vault/org-vault/group-badge/group-name-badge.component.html
+++ b/apps/web/src/app/vault/org-vault/group-badge/group-name-badge.component.html
@@ -1 +1 @@
-<bit-badge-list [items]="groupNames" [maxItems]="3" badgeType="secondary"></bit-badge-list>
+<bit-badge-list [items]="groupNames" [maxItems]="3" variant="secondary"></bit-badge-list>
diff --git a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html
index 08de724562..fcbfcb74e6 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html
@@ -12,10 +12,10 @@
         data.orgDomain.domainName
       }}</span>
 
-      <span *ngIf="data?.orgDomain && !data.orgDomain?.verifiedDate" bitBadge badgeType="warning">{{
+      <span *ngIf="data?.orgDomain && !data.orgDomain?.verifiedDate" bitBadge variant="warning">{{
         "domainStatusUnverified" | i18n
       }}</span>
-      <span *ngIf="data?.orgDomain && data?.orgDomain?.verifiedDate" bitBadge badgeType="success">{{
+      <span *ngIf="data?.orgDomain && data?.orgDomain?.verifiedDate" bitBadge variant="success">{{
         "domainStatusVerified" | i18n
       }}</span>
     </span>
diff --git a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html
index dbe793dd3b..84d32ade01 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html
@@ -41,10 +41,10 @@
               </button>
             </td>
             <td bitCell>
-              <span *ngIf="!orgDomain?.verifiedDate" bitBadge badgeType="warning">{{
+              <span *ngIf="!orgDomain?.verifiedDate" bitBadge variant="warning">{{
                 "domainStatusUnverified" | i18n
               }}</span>
-              <span *ngIf="orgDomain?.verifiedDate" bitBadge badgeType="success">{{
+              <span *ngIf="orgDomain?.verifiedDate" bitBadge variant="success">{{
                 "domainStatusVerified" | i18n
               }}</span>
             </td>
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.html
index 99c73057bb..cb271b94d0 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.html
@@ -8,17 +8,17 @@
     >
       <bit-toggle [value]="null">
         {{ "all" | i18n }}
-        <span bitBadge badgeType="info" *ngIf="allCount">{{ allCount }}</span>
+        <span bitBadge variant="info" *ngIf="allCount">{{ allCount }}</span>
       </bit-toggle>
 
       <bit-toggle [value]="userStatusType.Invited">
         {{ "invited" | i18n }}
-        <span bitBadge badgeType="info" *ngIf="invitedCount">{{ invitedCount }}</span>
+        <span bitBadge variant="info" *ngIf="invitedCount">{{ invitedCount }}</span>
       </bit-toggle>
 
       <bit-toggle [value]="userStatusType.Accepted">
         {{ "accepted" | i18n }}
-        <span bitBadge badgeType="warning" *ngIf="acceptedCount">{{ acceptedCount }}</span>
+        <span bitBadge variant="warning" *ngIf="acceptedCount">{{ acceptedCount }}</span>
       </bit-toggle>
     </bit-toggle-group>
 
@@ -120,10 +120,10 @@
           </td>
           <td>
             <a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>
-            <span bitBadge badgeType="secondary" *ngIf="u.status === userStatusType.Invited">{{
+            <span bitBadge variant="secondary" *ngIf="u.status === userStatusType.Invited">{{
               "invited" | i18n
             }}</span>
-            <span bitBadge badgeType="warning" *ngIf="u.status === userStatusType.Accepted">{{
+            <span bitBadge variant="warning" *ngIf="u.status === userStatusType.Accepted">{{
               "accepted" | i18n
             }}</span>
             <small class="text-muted d-block" *ngIf="u.name">{{ u.name }}</small>
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
index 36efa42ea6..f8d5d1081e 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
@@ -90,13 +90,13 @@
         <span
           *ngFor="let project of secret.projects"
           bitBadge
-          badgeType="secondary"
+          variant="secondary"
           class="tw-ml-1"
           [title]="project.name"
         >
           {{ project.name | ellipsis: 32 }}
         </span>
-        <span *ngIf="secret.projects.length === 0" bitBadge badgeType="warning" class="tw-ml-1"
+        <span *ngIf="secret.projects.length === 0" bitBadge variant="warning" class="tw-ml-1"
           ><i class="bwi bwi-fw bwi-exclamation-triangle tw-mr-1" aria-hidden="true"></i
           >{{ "unassigned" | i18n }}</span
         >
diff --git a/libs/components/src/badge-list/badge-list.component.html b/libs/components/src/badge-list/badge-list.component.html
index da58323084..53360a0c10 100644
--- a/libs/components/src/badge-list/badge-list.component.html
+++ b/libs/components/src/badge-list/badge-list.component.html
@@ -1,11 +1,11 @@
 <div class="tw-inline-flex tw-gap-2">
   <ng-container *ngFor="let item of filteredItems; let last = last">
-    <span bitBadge [badgeType]="badgeType" [truncate]="truncate">
+    <span bitBadge [variant]="variant" [truncate]="truncate">
       {{ item }}
     </span>
     <span class="tw-sr-only" *ngIf="!last || isFiltered">, </span>
   </ng-container>
-  <span *ngIf="isFiltered" bitBadge [badgeType]="badgeType">
+  <span *ngIf="isFiltered" bitBadge [variant]="variant">
     {{ "plusNMore" | i18n: (items.length - filteredItems.length).toString() }}
   </span>
 </div>
diff --git a/libs/components/src/badge-list/badge-list.component.ts b/libs/components/src/badge-list/badge-list.component.ts
index 64deae21b9..5ec0d7dc4c 100644
--- a/libs/components/src/badge-list/badge-list.component.ts
+++ b/libs/components/src/badge-list/badge-list.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges } from "@angular/core";
 
-import { BadgeTypes } from "../badge";
+import { BadgeVariant } from "../badge";
 
 @Component({
   selector: "bit-badge-list",
@@ -12,7 +12,7 @@ export class BadgeListComponent implements OnChanges {
   protected filteredItems: string[] = [];
   protected isFiltered = false;
 
-  @Input() badgeType: BadgeTypes = "primary";
+  @Input() variant: BadgeVariant = "primary";
   @Input() items: string[] = [];
   @Input() truncate = true;
 
diff --git a/libs/components/src/badge-list/badge-list.stories.ts b/libs/components/src/badge-list/badge-list.stories.ts
index 92e9e14875..24024cb6bb 100644
--- a/libs/components/src/badge-list/badge-list.stories.ts
+++ b/libs/components/src/badge-list/badge-list.stories.ts
@@ -28,7 +28,7 @@ export default {
     }),
   ],
   args: {
-    badgeType: "primary",
+    variant: "primary",
     truncate: false,
   },
   parameters: {
@@ -45,12 +45,12 @@ export const Default: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <bit-badge-list [badgeType]="badgeType" [maxItems]="maxItems" [items]="items" [truncate]="truncate"></bit-badge-list>
+      <bit-badge-list [variant]="variant" [maxItems]="maxItems" [items]="items" [truncate]="truncate"></bit-badge-list>
     `,
   }),
 
   args: {
-    badgeType: "info",
+    variant: "info",
     maxItems: 3,
     items: ["Badge 1", "Badge 2", "Badge 3", "Badge 4", "Badge 5"],
     truncate: false,
@@ -60,7 +60,7 @@ export const Default: Story = {
 export const Truncated: Story = {
   ...Default,
   args: {
-    badgeType: "info",
+    variant: "info",
     maxItems: 3,
     items: ["Badge 1", "Badge 2 containing lengthy text", "Badge 3", "Badge 4", "Badge 5"],
     truncate: true,
diff --git a/libs/components/src/badge/badge.directive.ts b/libs/components/src/badge/badge.directive.ts
index 14dc96edd5..dd28d86ae8 100644
--- a/libs/components/src/badge/badge.directive.ts
+++ b/libs/components/src/badge/badge.directive.ts
@@ -1,8 +1,8 @@
 import { Directive, ElementRef, HostBinding, Input } from "@angular/core";
 
-export type BadgeTypes = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
 
-const styles: Record<BadgeTypes, string[]> = {
+const styles: Record<BadgeVariant, string[]> = {
   primary: ["tw-bg-primary-500"],
   secondary: ["tw-bg-text-muted"],
   success: ["tw-bg-success-500"],
@@ -11,7 +11,7 @@ const styles: Record<BadgeTypes, string[]> = {
   info: ["tw-bg-info-500"],
 };
 
-const hoverStyles: Record<BadgeTypes, string[]> = {
+const hoverStyles: Record<BadgeVariant, string[]> = {
   primary: ["hover:tw-bg-primary-700"],
   secondary: ["hover:tw-bg-secondary-700"],
   success: ["hover:tw-bg-success-700"],
@@ -44,15 +44,22 @@ export class BadgeDirective {
       "focus:tw-ring-offset-2",
       "focus:tw-ring-primary-700",
     ]
-      .concat(styles[this.badgeType])
-      .concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : [])
+      .concat(styles[this.variant])
+      .concat(this.hasHoverEffects ? hoverStyles[this.variant] : [])
       .concat(this.truncate ? ["tw-truncate", "tw-max-w-40"] : []);
   }
   @HostBinding("attr.title") get title() {
     return this.truncate ? this.el.nativeElement.textContent.trim() : null;
   }
 
-  @Input() badgeType: BadgeTypes = "primary";
+  /**
+   * Variant, sets the background color of the badge.
+   */
+  @Input() variant: BadgeVariant = "primary";
+
+  /**
+   * Truncate long text
+   */
   @Input() truncate = true;
 
   private hasHoverEffects = false;
diff --git a/libs/components/src/badge/badge.stories.ts b/libs/components/src/badge/badge.stories.ts
index 5912250e0e..27873bbbbf 100644
--- a/libs/components/src/badge/badge.stories.ts
+++ b/libs/components/src/badge/badge.stories.ts
@@ -13,7 +13,7 @@ export default {
     }),
   ],
   args: {
-    badgeType: "primary",
+    variant: "primary",
     truncate: false,
   },
   parameters: {
@@ -30,11 +30,11 @@ export const Primary: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <span class="tw-text-main">Span </span><span bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge containing lengthy text</span>
+      <span class="tw-text-main">Span </span><span bitBadge [variant]="variant" [truncate]="truncate">Badge containing lengthy text</span>
       <br><br>
-      <span class="tw-text-main">Link </span><a href="#" bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge</a>
+      <span class="tw-text-main">Link </span><a href="#" bitBadge [variant]="variant" [truncate]="truncate">Badge</a>
       <br><br>
-      <span class="tw-text-main">Button </span><button bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge</button>
+      <span class="tw-text-main">Button </span><button bitBadge [variant]="variant" [truncate]="truncate">Badge</button>
     `,
   }),
 };
@@ -42,35 +42,35 @@ export const Primary: Story = {
 export const Secondary: Story = {
   ...Primary,
   args: {
-    badgeType: "secondary",
+    variant: "secondary",
   },
 };
 
 export const Success: Story = {
   ...Primary,
   args: {
-    badgeType: "success",
+    variant: "success",
   },
 };
 
 export const Danger: Story = {
   ...Primary,
   args: {
-    badgeType: "danger",
+    variant: "danger",
   },
 };
 
 export const Warning: Story = {
   ...Primary,
   args: {
-    badgeType: "warning",
+    variant: "warning",
   },
 };
 
 export const Info: Story = {
   ...Primary,
   args: {
-    badgeType: "info",
+    variant: "info",
   },
 };
 
diff --git a/libs/components/src/badge/index.ts b/libs/components/src/badge/index.ts
index 574db348ba..a8f5babda9 100644
--- a/libs/components/src/badge/index.ts
+++ b/libs/components/src/badge/index.ts
@@ -1,2 +1,2 @@
-export { BadgeDirective, BadgeTypes } from "./badge.directive";
+export { BadgeDirective, BadgeVariant } from "./badge.directive";
 export * from "./badge.module";
diff --git a/libs/components/src/multi-select/multi-select.component.html b/libs/components/src/multi-select/multi-select.component.html
index 1c972fbea4..6e0db43615 100644
--- a/libs/components/src/multi-select/multi-select.component.html
+++ b/libs/components/src/multi-select/multi-select.component.html
@@ -26,7 +26,7 @@
     <button
       type="button"
       bitBadge
-      badgeType="primary"
+      variant="primary"
       class="tw-mr-1 disabled:tw-border-0"
       [disabled]="disabled"
       (click)="clear(item)"
diff --git a/libs/components/src/toggle-group/toggle-group.stories.ts b/libs/components/src/toggle-group/toggle-group.stories.ts
index 50879421d1..f150449630 100644
--- a/libs/components/src/toggle-group/toggle-group.stories.ts
+++ b/libs/components/src/toggle-group/toggle-group.stories.ts
@@ -33,17 +33,17 @@ export const Default: Story = {
     template: `
       <bit-toggle-group [(selected)]="selected" aria-label="People list filter">
         <bit-toggle value="all">
-          All <span bitBadge badgeType="info">3</span>
+          All <span bitBadge variant="info">3</span>
         </bit-toggle>
-  
+
         <bit-toggle value="invited">
           Invited
         </bit-toggle>
-  
+
         <bit-toggle value="accepted">
-          Accepted <span bitBadge badgeType="info">2</span>
+          Accepted <span bitBadge variant="info">2</span>
         </bit-toggle>
-  
+
         <bit-toggle value="deactivated">
           Deactivated
         </bit-toggle>