docs(kbutton): improve docs, remove icon+text example from sandbox

Kong · Oct 23, 2024 · 76f88b7 · 76f88b7
1 parent 9ed5fdc
commit 76f88b7
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 19 deletions.
diff --git 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
@@ -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">