diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index af6d6515..3f5e3d7a 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -1,6 +1,7 @@
 .button {
   --border-width: 1px;
 
+  position: relative;
   box-sizing: border-box;
   display: inline-grid;
   grid-template-columns: 1fr auto 1fr;
@@ -34,8 +35,12 @@
   outline: solid var(--color-accent) 2px;
 }
 
+.button.loading {
+  cursor: wait;
+}
+
 @media (hover: hover) {
-  .button:hover {
+  .button:hover:not(.loading) {
     color: var(--text-hover);
     cursor: pointer;
     background-color: var(--bg-hover);
@@ -60,9 +65,16 @@
   border-width: 0;
 }
 
-.loading {
-  pointer-events: none;
-  cursor: wait;
+.loadingLabel {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.children.loading {
+  opacity: 0;
 }
 
 /* Variant */
@@ -224,6 +236,10 @@
   vertical-align: middle;
 }
 
+.icon.loading {
+  opacity: 0;
+}
+
 .icon > * {
   width: var(--icon-size);
   height: var(--icon-size);
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 2924aa62..94fce508 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -3,7 +3,6 @@
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import styles from './Button.module.css';
-import { CircularProgress } from './CircularProgress';
 import { VariantIcon } from './VariantIcon';
 import { marginVariables } from '../../utils/style';
 import type { ButtonProps } from './ButtonTypes';
@@ -21,6 +20,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       type = 'button',
       disabled = false,
       loading = false,
+      loadingLabel = '通信中',
       onClick,
       m,
       mx,
@@ -33,7 +33,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) => {
-    const icon = loading ? <CircularProgress /> : _icon === 'default' ? <VariantIcon variant={variant} /> : _icon;
+    const icon = _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({
@@ -75,10 +75,11 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         onClick={handleClick}
         {...props}
       >
+        {loading && <span className={styles.loadingLabel}>{loadingLabel}</span>}
         {fixedIcon && <span className={styles.fixedIcon}>{fixedIcon}</span>}
         <span className={styles.label}>
-          {icon && <span className={styles.icon}>{icon}</span>}
-          {children}
+          {icon && <span className={clsx(styles.icon, loading && styles.loading)}>{icon}</span>}
+          <span className={clsx(styles.children, loading && styles.loading)}>{children}</span>
           {suffixIcon && <span className={styles.suffixIcon}>{suffixIcon}</span>}
         </span>
       </button>
diff --git a/src/components/Button/ButtonTypes.ts b/src/components/Button/ButtonTypes.ts
index 1423a959..2e07a214 100644
--- a/src/components/Button/ButtonTypes.ts
+++ b/src/components/Button/ButtonTypes.ts
@@ -61,6 +61,10 @@ export type OnlyButtonProps = {
    * ローディング状態を示す
    */
   loading?: boolean;
+  /**
+   * ローディング中に表示する文言
+   */
+  loadingLabel?: string;
 };
 
 export type OnlyLinkButtonProps = {
diff --git a/src/components/Button/CircularProgress.module.css b/src/components/Button/CircularProgress.module.css
deleted file mode 100644
index db6048fa..00000000
--- a/src/components/Button/CircularProgress.module.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.root {
-  display: flex;
-  transform-origin: center;
-  animation: spin 1.4s linear infinite;
-}
-
-.circle {
-  stroke: currentcolor;
-  transform-origin: center;
-  animation: circular-progress 1.4s ease-in-out infinite;
-}
-
-@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
deleted file mode 100644
index 5bfa54a2..00000000
--- a/src/components/Button/CircularProgress.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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 8976a667..b33d19f2 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -98,16 +98,16 @@ export const WithIcon: Story = {
 };
 
 export const Block: Story = {
-  render: () => (
+  render: (args) => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
       <div>
-        <Button {...defaultArgs} size="small" variant="secondary" />
+        <Button {...args} size="small" variant="secondary" />
       </div>
       <div>
-        <Button {...defaultArgs} size="medium" variant="secondary" />
+        <Button {...args} size="medium" variant="secondary" />
       </div>
       <div>
-        <Button {...defaultArgs} size="large" variant="secondary" />
+        <Button {...args} size="large" variant="secondary" />
       </div>
     </div>
   ),
@@ -132,15 +132,47 @@ export const Disabled: Story = {
 };
 
 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>
+  args: {
+    ...defaultArgs,
+    children: 'OK',
+    loading: true,
+  },
+  render: (args) => (
+    <Stack spacing="md">
+      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
+        <Button {...args} />
+        <Button {...args} variant="secondary" />
+        <Button {...args} variant="accent" />
+        <Button {...args} variant="alert" />
+        <Button {...args} variant="text" />
+        <Button {...args} variant="textAlert" />
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
+        <Button {...args} size="medium" />
+        <Button {...args} variant="secondary" size="medium" />
+        <Button {...args} variant="accent" size="medium" />
+        <Button {...args} variant="alert" size="medium" />
+        <Button {...args} variant="text" size="medium" />
+        <Button {...args} variant="textAlert" size="medium" />
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
+        <Button {...args} size="small" />
+        <Button {...args} variant="secondary" size="small" />
+        <Button {...args} variant="accent" size="small" />
+        <Button {...args} variant="alert" size="small" />
+        <Button {...args} variant="text" size="small" />
+        <Button {...args} variant="textAlert" size="small" />
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
+        <Button {...args} icon={<Icon icon="UbieIcon" />} size="medium" loadingLabel="ラベル変更">
+          次のページへ
+        </Button>
+        <Button {...args} variant="secondary" size="medium" disabled />
+      </div>
+    </Stack>
   ),
 };