diff --git a/packages/core/sds/src/components/Button/Button.tsx b/packages/core/sds/src/components/Button/Button.tsx
index 0dc8b7e6..9540f1c7 100644
--- a/packages/core/sds/src/components/Button/Button.tsx
+++ b/packages/core/sds/src/components/Button/Button.tsx
@@ -1,12 +1,22 @@
 import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react';
 
-import { buttonCss, buttonDisabledVariants, buttonSizeVariants, buttonVariantVariants, leftDecorCss } from './styles';
+import { Spinner } from '../Spinner/Spinner';
+
+import {
+  buttonCss,
+  buttonDisabledVariants,
+  buttonSizeVariants,
+  buttonVariantVariants,
+  leftDecorCss,
+  spinnerCss,
+} from './styles';
 import { ButtonSize, ButtonVariant } from './types';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   size?: ButtonSize;
   variant?: ButtonVariant;
   leftDecor?: ReactNode;
+  loading?: boolean;
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
@@ -16,6 +26,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     disabled = false,
     style: styleFromProps,
     leftDecor,
+    loading = false,
     children,
     ...restProps
   } = props;
@@ -29,8 +40,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
 
   return (
     <button ref={ref} disabled={disabled} style={style} css={buttonCss} {...restProps}>
-      {leftDecor != null && <span css={leftDecorCss}>{leftDecor}</span>}
-      {children}
+      {loading && <Spinner css={spinnerCss} />}
+      {!loading && leftDecor != null && <span css={leftDecorCss}>{leftDecor}</span>}
+      {!loading && children}
     </button>
   );
 });
diff --git a/packages/core/sds/src/components/Button/styles.ts b/packages/core/sds/src/components/Button/styles.ts
index 0c4e9d77..a3b90b83 100644
--- a/packages/core/sds/src/components/Button/styles.ts
+++ b/packages/core/sds/src/components/Button/styles.ts
@@ -112,3 +112,9 @@ export const leftDecorCss = css({
     fill: `var(${buttonColorVar})`,
   },
 });
+
+export const spinnerCss = css({
+  '& path': {
+    fill: `var(${buttonColorVar})`,
+  },
+});
diff --git a/packages/core/sds/src/components/Spinner/Spinner.tsx b/packages/core/sds/src/components/Spinner/Spinner.tsx
new file mode 100644
index 00000000..d60fd461
--- /dev/null
+++ b/packages/core/sds/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,34 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+import { spinnerAnimationCss } from './styles.ts';
+
+export interface SpinnerProps extends HTMLAttributes<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+
+export const Spinner = forwardRef<SVGSVGElement, SpinnerProps>((props, ref) => {
+  const { size = 20, color = '#8E8E8E', ...rest } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      css={spinnerAnimationCss}
+      ref={ref}
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.6538 0.955217C9.6538 1.5075 10.1038 1.94866 10.6518 2.01686C14.5991 2.50808 17.6538 5.87491 17.6538 9.95522C17.6538 14.3735 14.0721 17.9552 9.6538 17.9552C7.80416 17.9552 6.10113 17.3275 4.74612 16.2735C4.31019 15.9344 3.68036 15.9287 3.28984 16.3192C2.89931 16.7097 2.89644 17.3473 3.3238 17.6971C5.04786 19.1084 7.25194 19.9552 9.6538 19.9552C15.1766 19.9552 19.6538 15.4781 19.6538 9.95522C19.6538 4.76939 15.7064 0.505529 10.6524 0.00445341C10.1028 -0.0500354 9.6538 0.402932 9.6538 0.955217Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+
+Spinner.displayName = 'Spinner';
diff --git a/packages/core/sds/src/components/Spinner/index.ts b/packages/core/sds/src/components/Spinner/index.ts
new file mode 100644
index 00000000..b1a1e650
--- /dev/null
+++ b/packages/core/sds/src/components/Spinner/index.ts
@@ -0,0 +1,3 @@
+export { Spinner } from './Spinner';
+
+export type { SpinnerProps } from './Spinner';
diff --git a/packages/core/sds/src/components/Spinner/styles.ts b/packages/core/sds/src/components/Spinner/styles.ts
new file mode 100644
index 00000000..58161cc0
--- /dev/null
+++ b/packages/core/sds/src/components/Spinner/styles.ts
@@ -0,0 +1,11 @@
+import { keyframes } from '@emotion/react';
+
+const rotate = keyframes`
+	100% {
+    transform: rotate(360deg);
+  }
+`;
+
+export const spinnerAnimationCss = {
+  animation: `${rotate} 0.8s linear infinite`,
+};
diff --git a/packages/core/sds/src/components/index.ts b/packages/core/sds/src/components/index.ts
index 35e50f8a..12632542 100644
--- a/packages/core/sds/src/components/index.ts
+++ b/packages/core/sds/src/components/index.ts
@@ -1,10 +1,11 @@
-export * from './Typography';
-export * from './Icon';
-export * from './Button';
-export * from './TextButton';
-export * from './Badge';
-export * from './SegmentedControl';
 export * from './Accordion';
+export * from './Badge';
+export * from './Button';
+export * from './Checkbox';
+export * from './Icon';
 export * from './Loader';
+export * from './SegmentedControl';
 export * from './Skeleton';
-export * from './Checkbox';
+export * from './Spinner';
+export * from './TextButton';
+export * from './Typography';