From fde88c4beccaa4f886afe84cdf71d002421c3a21 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Fri, 18 Oct 2024 11:52:02 +0800
Subject: [PATCH 1/6] feat(kbutton): add appearance="none" to button

---
 .stylelintrc.mjs                   |   5 +-
 sandbox/pages/SandboxButton.vue    | 130 ++++++++++++++++++++++++++++-
 src/components/KButton/KButton.vue | 114 +++++++++++++++++--------
 src/types/button.ts                |   3 +-
 4 files changed, 212 insertions(+), 40 deletions(-)

diff --git a/.stylelintrc.mjs b/.stylelintrc.mjs
index d1376c798d..d7e57e064c 100644
--- a/.stylelintrc.mjs
+++ b/.stylelintrc.mjs
@@ -12,7 +12,10 @@ export default {
   rules: {
     // Disallow relative font units since we don't know the base font size in other apps
     'unit-disallowed-list': ['rem', 'em'],
-    'order/properties-alphabetical-order': true,
+    'order/properties-order': [
+      ['all'],
+      { 'unspecified': 'bottomAlphabetical' },
+	  ],
     '@kong/design-tokens/use-proper-token': true,
     '@stylistic/indentation': [2, { baseIndentLevel: 0 }],
     // Only allow @kong/design-tokens or `--kong-ui-*` CSS custom properties
diff --git a/sandbox/pages/SandboxButton.vue b/sandbox/pages/SandboxButton.vue
index 847b0a1c84..a3f8e6cb75 100644
--- a/sandbox/pages/SandboxButton.vue
+++ b/sandbox/pages/SandboxButton.vue
@@ -13,7 +13,7 @@
         title="appearance"
       >
         <template #description>
-          KButton component takes 1 of 4 appearance values:
+          KButton component takes 1 of 5 appearance values:
           <ul>
             <li>
               <em>primary</em> - default value
@@ -27,6 +27,9 @@
             <li>
               <em>danger</em>
             </li>
+            <li>
+              <em>none</em>
+            </li>
           </ul>
         </template>
         <div class="horizontal-spacing">
@@ -51,6 +54,12 @@
           >
             Danger
           </KButton>
+          <KButton
+            appearance="none"
+            @click="test"
+          >
+            None
+          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton
@@ -80,6 +89,13 @@
           >
             Disabled
           </KButton>
+          <KButton
+            appearance="none"
+            disabled
+            @click="test"
+          >
+            Disabled
+          </KButton>
         </div>
       </SandboxSectionComponent>
       <SandboxSectionComponent
@@ -188,6 +204,13 @@
           >
             Danger
           </KButton>
+          <KButton
+            appearance="none"
+            target="_blank"
+            to="https://kongponents.konghq.com/"
+          >
+            None
+          </KButton>
           <KButton
             disabled
             target="_blank"
@@ -229,6 +252,13 @@
           >
             Danger
           </KButton>
+          <KButton
+            appearance="none"
+            target="_blank"
+            :to="{ name: 'home' }"
+          >
+            None
+          </KButton>
           <KButton
             disabled
             target="_blank"
@@ -274,6 +304,13 @@
             <AddCircleIcon />
             Danger
           </KButton>
+          <KButton
+            appearance="none"
+            size="large"
+          >
+            <AddCircleIcon />
+            None
+          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton>
@@ -292,6 +329,10 @@
             <AddCircleIcon />
             Danger
           </KButton>
+          <KButton appearance="none">
+            <AddCircleIcon />
+            None
+          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton size="small">
@@ -319,6 +360,13 @@
             <AddCircleIcon />
             Danger
           </KButton>
+          <KButton
+            appearance="none"
+            size="small"
+          >
+            <AddCircleIcon />
+            None
+          </KButton>
         </div>
         <!-- icon after -->
         <div class="horizontal-spacing">
@@ -347,6 +395,13 @@
             Danger
             <ChevronDownIcon />
           </KButton>
+          <KButton
+            appearance="none"
+            size="large"
+          >
+            None
+            <ChevronDownIcon />
+          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton>
@@ -365,6 +420,10 @@
             Danger
             <ChevronDownIcon />
           </KButton>
+          <KButton appearance="none">
+            None
+            <ChevronDownIcon />
+          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton size="small">
@@ -392,6 +451,13 @@
             Danger
             <ChevronDownIcon />
           </KButton>
+          <KButton
+            appearance="none"
+            size="small"
+          >
+            None
+            <ChevronDownIcon />
+          </KButton>
         </div>
       </SandboxSectionComponent>
 
@@ -429,6 +495,13 @@
           >
             <DisabledIcon />
           </KButton>
+          <KButton
+            appearance="none"
+            icon
+            size="large"
+          >
+            <AddCircleIcon />
+          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton icon>
@@ -452,6 +525,12 @@
           >
             <DisabledIcon />
           </KButton>
+          <KButton
+            appearance="none"
+            icon
+          >
+            <AddCircleIcon />
+          </KButton>
         </div>
         <div class="horizontal-spacing">
           <KButton
@@ -481,6 +560,36 @@
           >
             <DisabledIcon />
           </KButton>
+          <KButton
+            appearance="none"
+            icon
+            size="small"
+          >
+            <AddCircleIcon />
+          </KButton>
+        </div>
+      </SandboxSectionComponent>
+      <SandboxTitleComponent
+        is-subtitle
+        title="Custom button"
+      />
+      <SandboxSectionComponent>
+        <div class="horizontal-spacing">
+          <KButton
+            appearance="none"
+            class="custom-button"
+            @click="test"
+          >
+            Custom
+          </KButton>
+          <KButton
+            appearance="none"
+            class="custom-button"
+            disabled
+            @click="test"
+          >
+            Custom
+          </KButton>
         </div>
       </SandboxSectionComponent>
     </div>
@@ -507,4 +616,23 @@ const test = () => {
     gap: $kui-space-50;
   }
 }
+
+/* Low-specificity styles should be able to override */
+.custom-button {
+  background-color: #42b883;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 8px 16px;
+
+  &:hover:not(:disabled) {
+    background-color: #33a06f;
+    transition-duration: .2s;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+  }
+}
 </style>
diff --git a/src/components/KButton/KButton.vue b/src/components/KButton/KButton.vue
index a8cb98194f..1b65ec459a 100644
--- a/src/components/KButton/KButton.vue
+++ b/src/components/KButton/KButton.vue
@@ -2,10 +2,12 @@
   <component
     :is="buttonType"
     class="k-button"
-    :class="[size, appearance, { 'icon-button': icon === true || (!$slots.default && $slots.icon /* TODO: remove this once we remove icon slot */) }]"
+    :class="[buttonSize, buttonAppearance, { 'icon-button': icon === true || (!$slots.default && $slots.icon /* TODO: remove this once we remove icon slot */) }]"
     :disabled="disabled ? disabled : undefined"
+    :tabindex="disabled && buttonType !== 'button' ? '-1' : undefined"
     :type="type"
     v-bind="strippedAttrs"
+    v-on="listeners"
   >
     <!-- @deprecated -->
     <!-- KButton: `icon` slot will be removed in the next major release -->
@@ -86,6 +88,24 @@ const buttonType = computed((): string => {
   return 'button'
 })
 
+const buttonAppearance = computed((): ButtonAppearance | [ButtonAppearance, string] => {
+  // If the appearance is invalid, output both to keep backwards compatibility
+  // in case some of the tests rely on the invalid appearance output
+  if (Object.values(ButtonAppearances).indexOf(props.appearance) === -1) {
+    return ['primary', props.appearance]
+  }
+
+  return props.appearance
+})
+
+const buttonSize = computed((): ButtonSize | null => {
+  if (props.appearance === 'none') {
+    return null
+  }
+
+  return props.size
+})
+
 /**
 * Strips falsy `disabled` attribute, so it does not fall onto native <a> elements.
 * Vue 3 no longer removes attribute if the value is boolean false. Instead, it's set as attr="false".
@@ -110,6 +130,25 @@ const strippedAttrs = computed((): typeof attrs => {
   return modifiedAttrs
 })
 
+const stop = (event: Event) => {
+  event.preventDefault()
+  event.stopPropagation()
+}
+
+const listeners = computed(() => {
+  if (!props.disabled || buttonType.value === 'button') {
+    return {}
+  }
+
+  // Only prevent clicks on disabled links, emulating the same behavior as a disabled button
+  return {
+    clickCapture: stop,
+    dblclickCapture: stop,
+    mousedownCapture: stop,
+    mouseupCapture: stop,
+  }
+})
+
 onMounted(() => {
   if (slots.icon) {
     console.warn('KButton: `icon` slot is deprecated. Please slot an icon into the `default` slot instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#kbutton')
@@ -124,36 +163,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/* Component mixins */
-
-@mixin kButtonPrimaryAppearance {
-  background-color: var(--kui-color-background-primary, $kui-color-background-primary);
-  border: var(--kui-border-width-20, $kui-border-width-20) solid var(--kui-color-border-transparent, $kui-color-border-transparent);
-  color: var(--kui-color-text-inverse, $kui-color-text-inverse);
-
-  &:hover:not(:disabled):not(:focus):not(:active) {
-    background-color: var(--kui-color-background-primary-strong, $kui-color-background-primary-strong);
-  }
-
-  &:focus-visible {
-    background-color: var(--kui-color-background-primary-stronger, $kui-color-background-primary-stronger);
-  }
-
-  &:active {
-    background-color: var(--kui-color-background-primary-strongest, $kui-color-background-primary-strongest);
-  }
-
-  &:disabled, &[disabled] {
-    background-color: var(--kui-color-background-disabled, $kui-color-background-disabled);
-    color: var(--kui-color-text-disabled, $kui-color-text-disabled);
-  }
-}
-
 /* Component styles */
 
 .k-button {
-  @include kButtonPrimaryAppearance; // primary appearance is the default (in case of invalid appearance)
-
   // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
   // stylelint-disable-next-line no-duplicate-selectors
   & {
@@ -192,15 +204,29 @@ export default {
     cursor: not-allowed;
   }
 
-  // remove pointer events from only <a>
-  &[disabled]:not(:disabled) {
-    pointer-events: none;
-  }
-
   /* Appearances */
 
   &.primary {
-    @include kButtonPrimaryAppearance;
+    background-color: var(--kui-color-background-primary, $kui-color-background-primary);
+    border: var(--kui-border-width-20, $kui-border-width-20) solid var(--kui-color-border-transparent, $kui-color-border-transparent);
+    color: var(--kui-color-text-inverse, $kui-color-text-inverse);
+
+    &:hover:not(:disabled):not([disabled]):not(:focus):not(:active) {
+      background-color: var(--kui-color-background-primary-strong, $kui-color-background-primary-strong);
+    }
+
+    &:focus-visible {
+      background-color: var(--kui-color-background-primary-stronger, $kui-color-background-primary-stronger);
+    }
+
+    &:active {
+      background-color: var(--kui-color-background-primary-strongest, $kui-color-background-primary-strongest);
+    }
+
+    &:disabled, &[disabled] {
+      background-color: var(--kui-color-background-disabled, $kui-color-background-disabled);
+      color: var(--kui-color-text-disabled, $kui-color-text-disabled);
+    }
   }
 
   &.secondary {
@@ -208,7 +234,7 @@ export default {
     border: var(--kui-border-width-20, $kui-border-width-20) solid var(--kui-color-border-primary, $kui-color-border-primary);
     color: var(--kui-color-text-primary, $kui-color-text-primary);
 
-    &:hover:not(:disabled):not(:focus):not(:active) {
+    &:hover:not(:disabled):not([disabled]):not(:focus):not(:active) {
       background-color: var(--kui-color-background-transparent, $kui-color-background-transparent);
       border-color: var(--kui-color-border-primary-strong, $kui-color-border-primary-strong);
       color: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong);
@@ -238,7 +264,7 @@ export default {
     border: var(--kui-border-width-20, $kui-border-width-20) solid var(--kui-color-border-transparent, $kui-color-border-transparent);
     color: var(--kui-color-text-primary, $kui-color-text-primary);
 
-    &:hover:not(:disabled):not(:focus):not(:active) {
+    &:hover:not(:disabled):not([disabled]):not(:focus):not(:active) {
       background-color: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest);
       color: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong);
     }
@@ -264,7 +290,7 @@ export default {
     border: var(--kui-border-width-20, $kui-border-width-20) solid var(--kui-color-border-transparent, $kui-color-border-transparent);
     color: var(--kui-color-text-inverse, $kui-color-text-inverse);
 
-    &:hover:not(:disabled):not(:focus):not(:active) {
+    &:hover:not(:disabled):not([disabled]):not(:focus):not(:active) {
       background-color: var(--kui-color-background-danger-strong, $kui-color-background-danger-strong);
     }
 
@@ -282,6 +308,20 @@ export default {
     }
   }
 
+  // reset the style of a button to bare minimum
+  // using :where() here to make style override easier
+  &:where(.none) {
+    all: unset;
+    align-items: center;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    transition: background-color $kongponentsTransitionDurTimingFunc, color $kongponentsTransitionDurTimingFunc, border-color $kongponentsTransitionDurTimingFunc;
+    user-select: none;
+    white-space: nowrap;
+  }
+
   /* Sizes */
 
   &.large {
diff --git a/src/types/button.ts b/src/types/button.ts
index b804e98bfd..f11a3eaabe 100644
--- a/src/types/button.ts
+++ b/src/types/button.ts
@@ -1,6 +1,6 @@
 import type { Replace } from '@/types/utils'
 
-export type ButtonAppearance = 'primary' | 'secondary' | 'tertiary' | 'danger'
+export type ButtonAppearance = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'none'
 export type ButtonAppearanceRecord = Record<Replace<ButtonAppearance, '-', ''>, ButtonAppearance>
 
 export type ButtonSize = 'large' | 'medium' | 'small'
@@ -11,6 +11,7 @@ export const ButtonAppearances: ButtonAppearanceRecord = {
   secondary: 'secondary',
   tertiary: 'tertiary',
   danger: 'danger',
+  none: 'none',
 }
 
 export const ButtonSizes: ButtonSizeRecord = {

From 079aa0ce616cf3bbdb10d5055909c2548fd311c9 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Fri, 18 Oct 2024 14:35:01 +0800
Subject: [PATCH 2/6] docs(ktable): add docs

---
 docs/components/button.md | 5 ++++-
 docs/vite.config.ts       | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/components/button.md b/docs/components/button.md
index c6fa9d94e0..109c743908 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -13,18 +13,20 @@ and configuration options.
 
 ### appearance
 
-The Button component can take 1 of 4 appearance values:
+The Button component can take 1 of 5 appearance values:
 
 - `primary`
 - `secondary`
 - `tertiary`
 - `danger`
+- `none`
 
 <div class="spacing-container">
   <KButton appearance="primary">Primary</KButton>
   <KButton appearance="secondary">Secondary</KButton>
   <KButton appearance="tertiary">Tertiary</KButton>
   <KButton appearance="danger">Danger</KButton>
+  <KButton appearance="none">None</KButton>
 </div>
 
 ```html
@@ -32,6 +34,7 @@ The Button component can take 1 of 4 appearance values:
 <KButton appearance="secondary">Secondary</KButton>
 <KButton appearance="tertiary">Tertiary</KButton>
 <KButton appearance="danger">Danger</KButton>
+<KButton appearance="none">None</KButton>
 ```
 
 ### size
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
index e9f3eedd97..b0dcf72a18 100644
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -26,6 +26,7 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
+        api: 'modern',
         // Inject the @kong/design-tokens SCSS variables, kongponents variables and mixins to make them available for all components.
         // This is not needed in host applications.
         additionalData: `

From ddde977ac508c29d8e5cf314f8a061b4a7e19aa4 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Sat, 19 Oct 2024 00:32:26 +0800
Subject: [PATCH 3/6] fix(kbutton): add more basestyle, remove href for
 disabled link

---
 docs/components/button.md          |  4 ++++
 src/components/KButton/KButton.vue | 26 +++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/docs/components/button.md b/docs/components/button.md
index 109c743908..150449aec2 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -21,6 +21,10 @@ The Button component can take 1 of 5 appearance values:
 - `danger`
 - `none`
 
+:::tip NOTE
+`appearance="none"` is used in scenarios where custom styles are needed while retaining the basic behavior of `KButton`. When enabled, the size and icon props will not be supported and do not need to be supported.
+:::
+
 <div class="spacing-container">
   <KButton appearance="primary">Primary</KButton>
   <KButton appearance="secondary">Secondary</KButton>
diff --git a/src/components/KButton/KButton.vue b/src/components/KButton/KButton.vue
index 1b65ec459a..77a22a4500 100644
--- a/src/components/KButton/KButton.vue
+++ b/src/components/KButton/KButton.vue
@@ -2,7 +2,14 @@
   <component
     :is="buttonType"
     class="k-button"
-    :class="[buttonSize, buttonAppearance, { 'icon-button': icon === true || (!$slots.default && $slots.icon /* TODO: remove this once we remove icon slot */) }]"
+    :class="[
+      buttonSize,
+      buttonAppearance,
+      {
+        'icon-button': appearance !== 'none' &&
+          (icon === true || (!$slots.default && $slots.icon /* TODO: remove this once we remove icon slot */))
+      }
+    ]"
     :disabled="disabled ? disabled : undefined"
     :tabindex="disabled && buttonType !== 'button' ? '-1' : undefined"
     :type="type"
@@ -115,10 +122,14 @@ const buttonSize = computed((): ButtonSize | null => {
 const strippedAttrs = computed((): typeof attrs => {
   const modifiedAttrs = Object.assign({}, attrs)
 
-  if (props.to && typeof props.to === 'string') {
-    modifiedAttrs.href = props.to
-  } else if (props.to) {
-    modifiedAttrs.to = props.to
+  if (props.disabled) {
+    modifiedAttrs.href = null
+  } else {
+    if (props.to && typeof props.to === 'string') {
+      modifiedAttrs.href = props.to
+    } else if (props.to) {
+      modifiedAttrs.to = props.to
+    }
   }
 
   if (props.disabled !== undefined && props.disabled !== false) {
@@ -313,6 +324,7 @@ export default {
   &:where(.none) {
     all: unset;
     align-items: center;
+    border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
     box-sizing: border-box;
     cursor: pointer;
     display: inline-flex;
@@ -320,6 +332,10 @@ export default {
     transition: background-color $kongponentsTransitionDurTimingFunc, color $kongponentsTransitionDurTimingFunc, border-color $kongponentsTransitionDurTimingFunc;
     user-select: none;
     white-space: nowrap;
+
+    &:where(.disabled, [disabled]) {
+      color: var(--kui-color-text-disabled, $kui-color-text-disabled);
+    }
   }
 
   /* Sizes */

From 1b1ff3c7beece4cfcfd5e5c6de42fdf8993086ca Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Sat, 19 Oct 2024 01:01:36 +0800
Subject: [PATCH 4/6] docs(ktable): refine note

---
 docs/components/button.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/button.md b/docs/components/button.md
index 150449aec2..1bb419c499 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -22,7 +22,7 @@ The Button component can take 1 of 5 appearance values:
 - `none`
 
 :::tip NOTE
-`appearance="none"` is used in scenarios where custom styles are needed while retaining the basic behavior of `KButton`. When enabled, the size and icon props will not be supported and do not need to be supported.
+`appearance="none"` is used in scenarios where custom styles are needed while retaining the basic behavior of `KButton`. When enabled, the `size` and `icon` props will not be supported (and there's no need to support them).
 :::
 
 <div class="spacing-container">

From 9ed5fdc7fe83926a2da3b1581b5350b74f1fd8e5 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Sun, 20 Oct 2024 10:08:20 +0800
Subject: [PATCH 5/6] fix(kbutton): add style when `icon` is set

---
 docs/components/button.md          |  2 +-
 src/components/KButton/KButton.vue | 16 +++++++---------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/docs/components/button.md b/docs/components/button.md
index 1bb419c499..f7945a5f7a 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -22,7 +22,7 @@ The Button component can take 1 of 5 appearance values:
 - `none`
 
 :::tip NOTE
-`appearance="none"` is used in scenarios where custom styles are needed while retaining the basic behavior of `KButton`. When enabled, the `size` and `icon` props will not be supported (and there's no need to support them).
+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`.
 :::
 
 <div class="spacing-container">
diff --git a/src/components/KButton/KButton.vue b/src/components/KButton/KButton.vue
index 77a22a4500..7120fe3356 100644
--- a/src/components/KButton/KButton.vue
+++ b/src/components/KButton/KButton.vue
@@ -2,14 +2,7 @@
   <component
     :is="buttonType"
     class="k-button"
-    :class="[
-      buttonSize,
-      buttonAppearance,
-      {
-        'icon-button': appearance !== 'none' &&
-          (icon === true || (!$slots.default && $slots.icon /* TODO: remove this once we remove icon slot */))
-      }
-    ]"
+    :class="[buttonSize, buttonAppearance, { 'icon-button': icon === true || (!$slots.default && $slots.icon /* TODO: remove this once we remove icon slot */) }]"
     :disabled="disabled ? disabled : undefined"
     :tabindex="disabled && buttonType !== 'button' ? '-1' : undefined"
     :type="type"
@@ -106,7 +99,7 @@ const buttonAppearance = computed((): ButtonAppearance | [ButtonAppearance, stri
 })
 
 const buttonSize = computed((): ButtonSize | null => {
-  if (props.appearance === 'none') {
+  if (props.appearance === 'none' && !props.icon) {
     return null
   }
 
@@ -336,6 +329,11 @@ export default {
     &:where(.disabled, [disabled]) {
       color: var(--kui-color-text-disabled, $kui-color-text-disabled);
     }
+
+    &:where(.icon-button) {
+      border-color: transparent;
+      border-style: solid;
+    }
   }
 
   /* Sizes */

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 6/6] 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">