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