From 76f88b775f45a2b1c7dbaec281c9316784f4171e Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Wed, 23 Oct 2024 13:18:44 +0800
Subject: [PATCH] docs(kbutton): improve docs, remove icon+text example from
 sandbox

---
 docs/components/button.md       |  4 +++-
 sandbox/pages/SandboxButton.vue | 19 +------------------
 2 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/docs/components/button.md b/docs/components/button.md
index f7945a5f7a..056a42d808 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -22,7 +22,9 @@ The Button component can take 1 of 5 appearance values:
 - `none`
 
 :::tip NOTE
-Use `appearance="none"` to apply custom styles while keeping KButton's basic functionality. When this is enabled, the `size` prop won’t work unless `icon` is set to `true`.
+Use `appearance="none"` to get an unstyled button, making it easier to customize from scratch. This removes the built-in styling but retains the button's functionality.
+
+When `appearance="none"` is set, the `size` prop only works if `icon` is `true`; otherwise, `size` has no effect.
 :::
 
 <div class="spacing-container">
diff --git a/sandbox/pages/SandboxButton.vue b/sandbox/pages/SandboxButton.vue
index a3f8e6cb75..045e910236 100644
--- a/sandbox/pages/SandboxButton.vue
+++ b/sandbox/pages/SandboxButton.vue
@@ -102,6 +102,7 @@
         description="Here we pass an invalid value to the appearance prop (see the error in the console) which the KButton handles by falling back to primary appearance."
         title="invalid value"
       >
+        <!-- @vue-expect-error -->
         <KButton appearance="outline">
           Still Primary
         </KButton>
@@ -304,13 +305,6 @@
             <AddCircleIcon />
             Danger
           </KButton>
-          <KButton
-            appearance="none"
-            size="large"
-          >
-            <AddCircleIcon />
-            None
-          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton>
@@ -329,10 +323,6 @@
             <AddCircleIcon />
             Danger
           </KButton>
-          <KButton appearance="none">
-            <AddCircleIcon />
-            None
-          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton size="small">
@@ -360,13 +350,6 @@
             <AddCircleIcon />
             Danger
           </KButton>
-          <KButton
-            appearance="none"
-            size="small"
-          >
-            <AddCircleIcon />
-            None
-          </KButton>
         </div>
         <!-- icon after -->
         <div class="horizontal-spacing">