diff --git a/components/button-group/__tests__/__snapshots__/index.test.tsx.snap b/components/button-group/__tests__/__snapshots__/index.test.tsx.snap
index 72c0904..06fd2bb 100644
--- a/components/button-group/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/button-group/__tests__/__snapshots__/index.test.tsx.snap
@@ -32,6 +32,7 @@ exports[`ButtonGroup buttons should be displayed vertically 1`] = `
             --zeit-ui-button-padding: 1.25rem;
             --zeit-ui-button-height: 2.5rem;
             --zeit-ui-button-color: #666;
+            --zeit-ui-button-bg: #fff;
           }
 
           .btn:hover {
@@ -92,6 +93,7 @@ exports[`ButtonGroup buttons should be displayed vertically 1`] = `
             --zeit-ui-button-padding: 1.25rem;
             --zeit-ui-button-height: 2.5rem;
             --zeit-ui-button-color: #666;
+            --zeit-ui-button-bg: #fff;
           }
 
           .btn:hover {
@@ -200,6 +202,7 @@ exports[`ButtonGroup props should be passed to each button 1`] = `
             --zeit-ui-button-padding: 0.625rem;
             --zeit-ui-button-height: 1.5rem;
             --zeit-ui-button-color: #fff;
+            --zeit-ui-button-bg: #0070f3;
           }
 
           .btn:hover {
@@ -308,6 +311,7 @@ exports[`ButtonGroup props should be passed to each button 2`] = `
             --zeit-ui-button-padding: 0.625rem;
             --zeit-ui-button-height: 1.5rem;
             --zeit-ui-button-color: #fff;
+            --zeit-ui-button-bg: #0070f3;
           }
 
           .btn:hover {
@@ -416,6 +420,7 @@ exports[`ButtonGroup should render correctly 1`] = `
             --zeit-ui-button-padding: 1.25rem;
             --zeit-ui-button-height: 2.5rem;
             --zeit-ui-button-color: #666;
+            --zeit-ui-button-bg: #fff;
           }
 
           .btn:hover {
diff --git a/components/button/__tests__/__snapshots__/icon.test.tsx.snap b/components/button/__tests__/__snapshots__/icon.test.tsx.snap
index 55796dc..62c0e08 100644
--- a/components/button/__tests__/__snapshots__/icon.test.tsx.snap
+++ b/components/button/__tests__/__snapshots__/icon.test.tsx.snap
@@ -63,6 +63,7 @@ exports[`ButtonIcon should render correctly 1`] = `
             --zeit-ui-button-padding: 1.375rem;
             --zeit-ui-button-height: 2.5rem;
             --zeit-ui-button-color: #666;
+            --zeit-ui-button-bg: #fff;
           }
 
           .btn:hover {
@@ -158,6 +159,7 @@ exports[`ButtonIcon should work with right 1`] = `
             --zeit-ui-button-padding: 1.375rem;
             --zeit-ui-button-height: 2.5rem;
             --zeit-ui-button-color: #666;
+            --zeit-ui-button-bg: #fff;
           }
 
           .btn:hover {
diff --git a/components/button/button-loading.tsx b/components/button/button-loading.tsx
new file mode 100644
index 0000000..2f6f0d8
--- /dev/null
+++ b/components/button/button-loading.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import Loading from '../loading'
+
+interface Props {
+  color: string
+}
+
+const ButtonLoading: React.FC<React.PropsWithChildren<Props>> = ({ color }) => {
+  return (
+    <div className="btn-loading">
+      <Loading color={color} />
+      <style jsx>{`
+        .btn-loading {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: 2;
+          background-color: var(--zeit-ui-button-bg);
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default React.memo(ButtonLoading)
diff --git a/components/button/button.tsx b/components/button/button.tsx
index e091003..b2e3cd0 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -9,7 +9,7 @@ import React, {
 } from 'react'
 import useTheme from '../styles/use-theme'
 import ButtonDrip from './button.drip'
-import ButtonLoading from '../loading'
+import ButtonLoading from './button-loading'
 import { ButtonTypes, NormalSizes } from '../utils/prop-types'
 import { filterPropsWithGroup, getButtonChildrenWithIcon } from './utils'
 import { useButtonGroupContext } from '../button-group/button-group-context'
@@ -141,7 +141,8 @@ const Button = React.forwardRef<HTMLButtonElement, React.PropsWithChildren<Butto
         disabled={disabled}
         onClick={clickHandler}
         {...props}>
-        {loading ? <ButtonLoading /> : childrenWithIcon}
+        {loading && <ButtonLoading color={color} />}
+        {childrenWithIcon}
         {dripShow && (
           <ButtonDrip x={dripX} y={dripY} color={dripColor} onCompleted={dripCompletedHandle} />
         )}
@@ -176,6 +177,7 @@ const Button = React.forwardRef<HTMLButtonElement, React.PropsWithChildren<Butto
             --zeit-ui-button-padding: ${padding};
             --zeit-ui-button-height: ${height};
             --zeit-ui-button-color: ${color};
+            --zeit-ui-button-bg: ${bg};
           }
 
           .btn:hover {
diff --git a/components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap b/components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap
index 8fcaa31..03acd43 100644
--- a/components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap
@@ -32,6 +32,7 @@ exports[`UseToast should render different actions 1`] = `
             --zeit-ui-button-padding: 0.625rem;
             --zeit-ui-button-height: 1.5rem;
             --zeit-ui-button-color: #fff;
+            --zeit-ui-button-bg: #000;
           }
 
           .btn:hover {
@@ -92,6 +93,7 @@ exports[`UseToast should render different actions 1`] = `
             --zeit-ui-button-padding: 0.625rem;
             --zeit-ui-button-height: 1.5rem;
             --zeit-ui-button-color: #666;
+            --zeit-ui-button-bg: #fff;
           }
 
           .btn:hover {
diff --git a/pages/en-us/components/button.mdx b/pages/en-us/components/button.mdx
index 5703f82..3c03cf2 100644
--- a/pages/en-us/components/button.mdx
+++ b/pages/en-us/components/button.mdx
@@ -26,9 +26,15 @@ Used to trigger an operation.
 <Playground
   title="Loading"
   desc="Show running status."
-  scope={{ Button }}
+  scope={{ Button, Spacer }}
   code={`
-<Button loading>Action</Button>
+<>
+  <Button loading>Action</Button>
+  <Spacer y={.5} />
+  <Button loading auto>Action</Button>
+  <Spacer y={.5} />
+  <Button loading auto type="success" size="small">Action</Button>
+</>
 `} />
 
 <Playground
diff --git a/pages/zh-cn/components/button.mdx b/pages/zh-cn/components/button.mdx
index 45e7e28..f9a40d1 100644
--- a/pages/zh-cn/components/button.mdx
+++ b/pages/zh-cn/components/button.mdx
@@ -25,9 +25,15 @@ export const meta = {
 <Playground
   title="加载中"
   desc="表示正在运行或加载中的状态。"
-  scope={{ Button }}
+  scope={{ Button, Spacer }}
   code={`
-<Button loading>动作</Button>
+<>
+  <Button loading>Action</Button>
+  <Spacer y={.5} />
+  <Button loading auto>Action</Button>
+  <Spacer y={.5} />
+  <Button loading auto type="success" size="small">Action</Button>
+</>
 `} />
 
 <Playground