diff --git a/apps/web/src/app/modules/organizations/users/enroll-master-password-reset.component.html b/apps/web/src/app/modules/organizations/users/enroll-master-password-reset.component.html
index e232a7987f..f72602ac91 100644
--- a/apps/web/src/app/modules/organizations/users/enroll-master-password-reset.component.html
+++ b/apps/web/src/app/modules/organizations/users/enroll-master-password-reset.component.html
@@ -32,16 +32,9 @@
         <app-user-verification [(ngModel)]="verification" name="secret"> </app-user-verification>
       </div>
       <div class="modal-footer">
-        <button bitButton buttonType="primary" type="submit" [disabled]="form.loading">
-          <i
-            class="bwi bwi-spinner bwi-spin"
-            title="{{ 'loading' | i18n }}"
-            *ngIf="form.loading"
-          ></i>
-          <span>
-            {{ "submit" | i18n }}
-          </span>
-        </button>
+        <bit-submit-button [loading]="form.loading">
+          {{ "submit" | i18n }}
+        </bit-submit-button>
         <button
           bitButton
           buttonType="secondary"
diff --git a/apps/web/src/app/modules/shared.module.ts b/apps/web/src/app/modules/shared.module.ts
index c8eaf0925f..a8801e8196 100644
--- a/apps/web/src/app/modules/shared.module.ts
+++ b/apps/web/src/app/modules/shared.module.ts
@@ -57,7 +57,13 @@ import { InfiniteScrollModule } from "ngx-infinite-scroll";
 import { ToastrModule } from "ngx-toastr";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { BadgeModule, ButtonModule, CalloutModule, MenuModule } from "@bitwarden/components";
+import {
+  BadgeModule,
+  ButtonModule,
+  CalloutModule,
+  MenuModule,
+  SubmitButtonModule,
+} from "@bitwarden/components";
 
 registerLocaleData(localeAf, "af");
 registerLocaleData(localeAz, "az");
@@ -126,6 +132,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     BadgeModule,
     ButtonModule,
     MenuModule,
+    SubmitButtonModule,
   ],
   exports: [
     CommonModule,
@@ -142,6 +149,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     BadgeModule,
     ButtonModule,
     MenuModule,
+    SubmitButtonModule,
   ],
   providers: [DatePipe],
   bootstrap: [],
diff --git a/apps/web/src/app/organizations/settings/account.component.html b/apps/web/src/app/organizations/settings/account.component.html
index 7f237203d8..73a2f7872e 100644
--- a/apps/web/src/app/organizations/settings/account.component.html
+++ b/apps/web/src/app/organizations/settings/account.component.html
@@ -66,10 +66,9 @@
       <app-avatar data="{{ org.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
     </div>
   </div>
-  <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-    <span>{{ "save" | i18n }}</span>
-  </button>
+  <bit-submit-button [loading]="form.loading">
+    {{ "save" | i18n }}
+  </bit-submit-button>
 </form>
 <ng-container *ngIf="canUseApi">
   <div class="secondary-header border-0 mb-0">
diff --git a/apps/web/src/app/reports/breach-report.component.html b/apps/web/src/app/reports/breach-report.component.html
index 6d7c0401f0..e74898c41c 100644
--- a/apps/web/src/app/reports/breach-report.component.html
+++ b/apps/web/src/app/reports/breach-report.component.html
@@ -17,10 +17,9 @@
       <small class="form-text text-muted">{{ "breachCheckUsernameEmail" | i18n }}</small>
     </div>
   </div>
-  <button bitButton buttonType="primary" class="btn-submit" type="submit" [disabled]="form.loading">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-    <span>{{ "checkBreaches" | i18n }}</span>
-  </button>
+  <bit-submit-button [loading]="form.loading">
+    {{ "checkBreaches" | i18n }}
+  </bit-submit-button>
 </form>
 <div class="mt-4" *ngIf="!form.loading && checkedUsername">
   <p *ngIf="error">{{ "reportError" | i18n }}...</p>
diff --git a/apps/web/src/app/reports/exposed-passwords-report.component.html b/apps/web/src/app/reports/exposed-passwords-report.component.html
index f0a882f793..32cfaf2019 100644
--- a/apps/web/src/app/reports/exposed-passwords-report.component.html
+++ b/apps/web/src/app/reports/exposed-passwords-report.component.html
@@ -2,17 +2,9 @@
   <h1>{{ "exposedPasswordsReport" | i18n }}</h1>
 </div>
 <p>{{ "exposedPasswordsReportDesc" | i18n }}</p>
-<button
-  bitButton
-  buttonType="primary"
-  type="button"
-  class="btn-submit"
-  [disabled]="loading"
-  (click)="load()"
->
-  <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-  <span>{{ "checkExposedPasswords" | i18n }}</span>
-</button>
+<bit-submit-button [loading]="loading" (click)="load()">
+  {{ "checkExposedPasswords" | i18n }}
+</bit-submit-button>
 <div class="mt-4" *ngIf="hasLoaded">
   <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
     {{ "noExposedPasswords" | i18n }}
diff --git a/apps/web/src/app/settings/change-kdf.component.html b/apps/web/src/app/settings/change-kdf.component.html
index f5eae39be4..b06cf01d06 100644
--- a/apps/web/src/app/settings/change-kdf.component.html
+++ b/apps/web/src/app/settings/change-kdf.component.html
@@ -71,8 +71,7 @@
       </div>
     </div>
   </div>
-  <button bitButton buttonType="primary" class="btn-submit" [disabled]="form.loading">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-    <span>{{ "changeKdf" | i18n }}</span>
-  </button>
+  <bit-submit-button [loading]="form.loading">
+    {{ "changeKdf" | i18n }}
+  </bit-submit-button>
 </form>
diff --git a/apps/web/src/app/settings/change-password.component.html b/apps/web/src/app/settings/change-password.component.html
index 990d950604..90df85042e 100644
--- a/apps/web/src/app/settings/change-password.component.html
+++ b/apps/web/src/app/settings/change-password.component.html
@@ -87,8 +87,7 @@
       </a>
     </div>
   </div>
-  <button bitButton buttonType="primary" class="btn-submit" [disabled]="form.loading">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-    <span>{{ "changeMasterPassword" | i18n }}</span>
-  </button>
+  <bit-submit-button [loading]="form.loading">
+    {{ "changeMasterPassword" | i18n }}
+  </bit-submit-button>
 </form>
diff --git a/apps/web/src/app/settings/emergency-access-add-edit.component.html b/apps/web/src/app/settings/emergency-access-add-edit.component.html
index 488980a41e..e7198e1903 100644
--- a/apps/web/src/app/settings/emergency-access-add-edit.component.html
+++ b/apps/web/src/app/settings/emergency-access-add-edit.component.html
@@ -100,20 +100,9 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button
-          bitButton
-          type="submit"
-          buttonType="primary"
-          [disabled]="loading || form.loading || readOnly"
-        >
-          <i
-            class="bwi bwi-spinner bwi-spin"
-            title="{{ 'loading' | i18n }}"
-            aria-hidden="true"
-            *ngIf="loading || form.loading"
-          ></i>
-          <span *ngIf="!loading && !form.loading">{{ "save" | i18n }}</span>
-        </button>
+        <bit-submit-button [loading]="loading || form.loading" [disabled]="readOnly">
+          {{ "save" | i18n }}
+        </bit-submit-button>
         <button bitButton buttonType="secondary" type="button" data-dismiss="modal">
           {{ "cancel" | i18n }}
         </button>
diff --git a/apps/web/src/app/settings/premium.component.html b/apps/web/src/app/settings/premium.component.html
index 4d6613aa1e..63995b457a 100644
--- a/apps/web/src/app/settings/premium.component.html
+++ b/apps/web/src/app/settings/premium.component.html
@@ -68,16 +68,9 @@
         "licenseFileDesc" | i18n: "bitwarden_premium_license.json"
       }}</small>
     </div>
-    <button
-      bitButton
-      buttonType="primary"
-      type="submit"
-      class="btn-submit"
-      [disabled]="form.loading"
-    >
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-      <span>{{ "submit" | i18n }}</span>
-    </button>
+    <bit-submit-button [loading]="form.loading">
+      {{ "submit" | i18n }}
+    </bit-submit-button>
   </form>
 </ng-container>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!selfHosted">
@@ -125,8 +118,7 @@
     </p>
   </div>
   <small class="text-muted font-italic">{{ "paymentChargedAnnually" | i18n }}</small>
-  <button bitButton buttonType="primary" type="submit" class="btn-submit" [disabled]="form.loading">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-    <span>{{ "submit" | i18n }}</span>
-  </button>
+  <bit-submit-button [loading]="form.loading">
+    {{ "submit" | i18n }}
+  </bit-submit-button>
 </form>
diff --git a/apps/web/src/app/settings/two-factor-setup.component.html b/apps/web/src/app/settings/two-factor-setup.component.html
index 8a4a1f698c..698e7fd9c0 100644
--- a/apps/web/src/app/settings/two-factor-setup.component.html
+++ b/apps/web/src/app/settings/two-factor-setup.component.html
@@ -77,22 +77,9 @@
         </div>
         <small class="form-text text-muted">{{ "deviceVerificationDesc" | i18n }}</small>
       </div>
-      <button
-        type="submit"
-        bitButton
-        buttonType="primary"
-        class="btn-submit"
-        [disabled]="form.loading"
-        *ngIf="isDeviceVerificationSectionEnabled"
-      >
-        <i
-          class="bwi bwi-spinner bwi-spin"
-          title="{{ 'loading' | i18n }}"
-          aria-hidden="true"
-          *ngIf="form.loading"
-        ></i>
-        <span>{{ "save" | i18n }}</span>
-      </button>
+      <bit-submit-button [loading]="form.loading" *ngIf="isDeviceVerificationSectionEnabled">
+        {{ "save" | i18n }}
+      </bit-submit-button>
     </div>
   </div>
 </form>
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index a83b561355..cb45e12228 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -5,3 +5,4 @@ export * from "./callout";
 export * from "./form-field";
 export * from "./menu";
 export * from "./utils/i18n-mock.service";
+export * from "./submit-button";
diff --git a/libs/components/src/submit-button/index.ts b/libs/components/src/submit-button/index.ts
new file mode 100644
index 0000000000..ae7d96d2c1
--- /dev/null
+++ b/libs/components/src/submit-button/index.ts
@@ -0,0 +1 @@
+export * from "./submit-button.module";
diff --git a/libs/components/src/submit-button/submit-button.component.html b/libs/components/src/submit-button/submit-button.component.html
new file mode 100644
index 0000000000..f3c097b2f3
--- /dev/null
+++ b/libs/components/src/submit-button/submit-button.component.html
@@ -0,0 +1,10 @@
+<button bitButton type="submit" [buttonType]="buttonType" [disabled]="loading || disabled">
+  <span class="tw-relative">
+    <span [ngClass]="{ 'tw-invisible': loading }">
+      <ng-content></ng-content>
+    </span>
+    <span class="tw-absolute tw-inset-0" [ngClass]="{ 'tw-invisible': !loading }">
+      <i class="bwi bwi-spinner bwi-lg bwi-spin tw-align-baseline" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
diff --git a/libs/components/src/submit-button/submit-button.component.ts b/libs/components/src/submit-button/submit-button.component.ts
new file mode 100644
index 0000000000..b005974a1c
--- /dev/null
+++ b/libs/components/src/submit-button/submit-button.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from "@angular/core";
+
+import { ButtonTypes } from "../button";
+
+@Component({
+  selector: "bit-submit-button",
+  templateUrl: "./submit-button.component.html",
+})
+export class SubmitButtonComponent {
+  @Input() buttonType: ButtonTypes = "primary";
+  @Input() disabled = false;
+  @Input() loading: boolean;
+}
diff --git a/libs/components/src/submit-button/submit-button.module.ts b/libs/components/src/submit-button/submit-button.module.ts
new file mode 100644
index 0000000000..c7ab7567e6
--- /dev/null
+++ b/libs/components/src/submit-button/submit-button.module.ts
@@ -0,0 +1,13 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { ButtonModule } from "../button";
+
+import { SubmitButtonComponent } from "./submit-button.component";
+
+@NgModule({
+  imports: [CommonModule, ButtonModule],
+  exports: [SubmitButtonComponent],
+  declarations: [SubmitButtonComponent],
+})
+export class SubmitButtonModule {}
diff --git a/libs/components/src/submit-button/submit-button.stories.ts b/libs/components/src/submit-button/submit-button.stories.ts
new file mode 100644
index 0000000000..fddf6a043c
--- /dev/null
+++ b/libs/components/src/submit-button/submit-button.stories.ts
@@ -0,0 +1,44 @@
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { SubmitButtonComponent } from "./submit-button.component";
+import { SubmitButtonModule } from "./submit-button.module";
+
+export default {
+  title: "Component Library/Submit Button",
+  component: SubmitButtonComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [SubmitButtonModule],
+    }),
+  ],
+  args: {
+    buttonType: "primary",
+    loading: false,
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A16733",
+    },
+  },
+} as Meta;
+
+const Template: Story<SubmitButtonComponent> = (args: SubmitButtonComponent) => ({
+  props: args,
+  template: `<bit-submit-button [buttonType]="buttonType" [loading]="loading" [disabled]="disabled">
+    Submit
+  </bit-submit-button>`,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};