diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index ea0747f3..d6afec06 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -58,6 +58,11 @@
   border-color: var(--border-color-disabled);
 }
 
+.loading {
+  pointer-events: none;
+  cursor: wait;
+}
+
 /* Variant */
 
 .primary {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index a5374139..76528947 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -3,6 +3,7 @@
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import styles from './Button.module.css';
+import { CircularProgress } from './CircularProgress';
 import { VariantIcon } from './VariantIcon';
 import type { ButtonProps } from './ButtonTypes';
 
@@ -17,11 +18,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       fixedIcon: _fixedIcon,
       suffixIcon: _suffixIcon,
       type = 'button',
+      disabled = false,
+      loading = false,
+      onClick,
       ...props
     },
     ref,
   ) => {
-    const icon = _icon === 'default' ? <VariantIcon variant={variant} /> : _icon;
+    const icon = loading ? <CircularProgress /> : _icon === 'default' ? <VariantIcon variant={variant} /> : _icon;
     const fixedIcon = _fixedIcon === 'default' ? <VariantIcon variant={variant} /> : _fixedIcon;
     const suffixIcon = _suffixIcon === 'default' ? <VariantIcon variant={variant} /> : _suffixIcon;
     const cls = clsx({
@@ -29,10 +33,29 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       [styles[variant]]: true,
       [styles[size]]: true,
       [styles.block]: block,
-      [styles.disabled]: !!props.disabled,
+      [styles.disabled]: disabled,
+      [styles.loading]: loading,
     });
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (loading) {
+        e.preventDefault();
+        return;
+      }
+
+      onClick?.(e);
+    };
+
     return (
-      <button type={type} className={cls} ref={ref} {...props}>
+      <button
+        type={type}
+        className={cls}
+        ref={ref}
+        disabled={disabled}
+        aria-disabled={loading}
+        onClick={handleClick}
+        {...props}
+      >
         {fixedIcon && <span className={styles.fixedIcon}>{fixedIcon}</span>}
         <span className={styles.label}>
           {icon && <span className={styles.icon}>{icon}</span>}
diff --git a/src/components/Button/ButtonTypes.ts b/src/components/Button/ButtonTypes.ts
index c8b91051..1da1808d 100644
--- a/src/components/Button/ButtonTypes.ts
+++ b/src/components/Button/ButtonTypes.ts
@@ -50,6 +50,10 @@ export type OnlyButtonProps = {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * ローディング状態を示す
+   */
+  loading?: boolean;
 };
 
 export type OnlyLinkButtonProps = {
diff --git a/src/components/Button/CircularProgress.module.css b/src/components/Button/CircularProgress.module.css
new file mode 100644
index 00000000..79cef5b8
--- /dev/null
+++ b/src/components/Button/CircularProgress.module.css
@@ -0,0 +1,38 @@
+.root {
+  display: flex;
+  animation: spin 1.4s linear infinite;
+  transform-origin: center;
+}
+
+.circle {
+  stroke: currentcolor;
+  animation: circular-progress 1.4s ease-in-out infinite;
+  transform-origin: center;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes circular-progress {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -16px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -124px;
+  }
+}
diff --git a/src/components/Button/CircularProgress.tsx b/src/components/Button/CircularProgress.tsx
new file mode 100644
index 00000000..5bfa54a2
--- /dev/null
+++ b/src/components/Button/CircularProgress.tsx
@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import styles from './CircularProgress.module.css';
+
+const CIRCLE_SIZE = 44;
+const THICKNESS = 3.6;
+
+export const CircularProgress: FC = ({ ...props }) => {
+  return (
+    <span role="progressbar" className={styles.root} {...props}>
+      <svg
+        role="img"
+        aria-label="読み込み中"
+        viewBox={`${CIRCLE_SIZE / 2} ${CIRCLE_SIZE / 2} ${CIRCLE_SIZE} ${CIRCLE_SIZE}`}
+      >
+        <circle
+          className={styles.circle}
+          cx={CIRCLE_SIZE}
+          cy={CIRCLE_SIZE}
+          r={(CIRCLE_SIZE - THICKNESS) / 2}
+          fill="none"
+          strokeWidth={THICKNESS}
+        />
+      </svg>
+    </span>
+  );
+};
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index ae9972d0..12594ea8 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -130,3 +130,16 @@ export const Disabled: Story = {
   ),
   args: defaultArgs,
 };
+
+export const Loading: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
+      <Button {...defaultArgs} loading />
+      <Button {...defaultArgs} variant="secondary" loading />
+      <Button {...defaultArgs} variant="accent" loading />
+      <Button {...defaultArgs} variant="alert" loading />
+      <Button {...defaultArgs} variant="text" loading />
+      <Button {...defaultArgs} variant="textAlert" loading />
+    </div>
+  ),
+};