diff --git a/packages/store-ui/src/molecules/LoadingButton/LoadingButton.test.tsx b/packages/store-ui/src/molecules/LoadingButton/LoadingButton.test.tsx
new file mode 100644
index 0000000000..31861d8cbc
--- /dev/null
+++ b/packages/store-ui/src/molecules/LoadingButton/LoadingButton.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import LoadingButton from './LoadingButton'
+
+describe('Loading Button', () => {
+  it('`data-store-loading-button` is present', () => {
+    const { getByTestId } = render(<LoadingButton loading />)
+
+    expect(getByTestId('store-loading-button')).toHaveAttribute(
+      'data-store-loading-button'
+    )
+  })
+})
diff --git a/packages/store-ui/src/molecules/LoadingButton/LoadingButton.tsx b/packages/store-ui/src/molecules/LoadingButton/LoadingButton.tsx
new file mode 100644
index 0000000000..3916c0132f
--- /dev/null
+++ b/packages/store-ui/src/molecules/LoadingButton/LoadingButton.tsx
@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react'
+
+import Button from '../../atoms/Button'
+import type { ButtonProps } from '../../atoms/Button'
+import Spinner from '../../atoms/Spinner'
+
+export interface LoadingButtonProps extends ButtonProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * The current loading state of the button.
+   */
+  loading: boolean
+}
+
+const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
+  function LoadingButton(
+    { children, loading, testId = 'store-loading-button', ...otherProps },
+    ref
+  ) {
+    return (
+      <Button
+        ref={ref}
+        data-store-loading-button
+        testId={testId}
+        {...otherProps}
+      >
+        {loading ? <Spinner /> : children}
+      </Button>
+    )
+  }
+)
+
+export default LoadingButton
diff --git a/packages/store-ui/src/molecules/LoadingButton/index.tsx b/packages/store-ui/src/molecules/LoadingButton/index.tsx
new file mode 100644
index 0000000000..cfe3e3b968
--- /dev/null
+++ b/packages/store-ui/src/molecules/LoadingButton/index.tsx
@@ -0,0 +1,2 @@
+export { default } from './LoadingButton'
+export type { LoadingButtonProps } from './LoadingButton'
diff --git a/packages/store-ui/src/molecules/LoadingButton/stories/LoadingButton.mdx b/packages/store-ui/src/molecules/LoadingButton/stories/LoadingButton.mdx
new file mode 100644
index 0000000000..a84e8ea0ed
--- /dev/null
+++ b/packages/store-ui/src/molecules/LoadingButton/stories/LoadingButton.mdx
@@ -0,0 +1,20 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import LoadingButton from '../LoadingButton'
+
+# Loading Button
+
+<Canvas>
+  <Story id="molecules-loadingbutton--loadingbutton" />
+</Canvas>
+
+## Props
+
+<ArgsTable of={LoadingButton} />
+
+## CSS Selectors
+
+```css
+[data-store-loading-button] {}
+```
+
+This component inherits [Button](?path=/docs/atoms-button--button#css-selectors) css selectors.
diff --git a/packages/store-ui/src/molecules/LoadingButton/stories/LoadingButton.stories.tsx b/packages/store-ui/src/molecules/LoadingButton/stories/LoadingButton.stories.tsx
new file mode 100644
index 0000000000..5d51c01662
--- /dev/null
+++ b/packages/store-ui/src/molecules/LoadingButton/stories/LoadingButton.stories.tsx
@@ -0,0 +1,35 @@
+import type { Story } from '@storybook/react'
+import React from 'react'
+
+import type { ComponentArgTypes } from '../../../typings/utils'
+import type { LoadingButtonProps } from '../LoadingButton'
+import Component from '../LoadingButton'
+import mdx from './LoadingButton.mdx'
+
+const LoadingButtonTemplate: Story<LoadingButtonProps> = ({
+  loading,
+  testId,
+}) => (
+  <Component loading={loading} testId={testId}>
+    Loading Button
+  </Component>
+)
+
+export const LoadingButton = LoadingButtonTemplate.bind({})
+
+const argTypes: ComponentArgTypes<LoadingButtonProps> = {
+  loading: {
+    type: 'boolean',
+    defaultValue: false,
+  },
+}
+
+export default {
+  title: 'Molecules/LoadingButton',
+  argTypes,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+}
diff --git a/themes/theme-b2c-tailwind/src/molecules/index.css b/themes/theme-b2c-tailwind/src/molecules/index.css
index 0ad04b428e..fd492b9f01 100644
--- a/themes/theme-b2c-tailwind/src/molecules/index.css
+++ b/themes/theme-b2c-tailwind/src/molecules/index.css
@@ -1,8 +1,9 @@
 @import "./bullets.css";
-@import "./search-input.css";
+@import "./carousel.css";
 @import "./icon-button.css";
+@import "./loading-button.css";
 @import './price-range.css';
-@import "./carousel.css";
 @import "./modal.css";
 @import "./accordion.css";
 @import "./table.css";
+@import "./search-input.css";
diff --git a/themes/theme-b2c-tailwind/src/molecules/loading-button.css b/themes/theme-b2c-tailwind/src/molecules/loading-button.css
new file mode 100644
index 0000000000..d2ec9d377e
--- /dev/null
+++ b/themes/theme-b2c-tailwind/src/molecules/loading-button.css
@@ -0,0 +1,10 @@
+[data-store-loading-button] {
+  @apply h-11 w-60 items-center justify-center flex;
+}
+
+[data-store-loading-button] [data-store-spinner] {
+  border-top: 0.2em solid rgba(255, 255, 255, 0.2);
+  border-right: 0.2em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 0.2em solid rgba(255, 255, 255, 0.2);
+  border-left: 0.2em solid #ffffff;
+}