Make proper extension of `Button` more clearly defined (#8753)

* Remove unecessary color prop from SettingsList LinkItem

* Add UninheritableButtonProps to avoid misuse

1 files changed, 12 insertions, 0 deletions

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 42eb64844..22c9ab96d 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -20,6 +20,18 @@ import {atoms as a, flatten, select, tokens, useTheme} from '#/alf'
 import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Text} from '#/components/Typography'
 
+/**
+ * The `Button` component, and some extensions of it like `Link` are intended
+ * to be generic and therefore apply no styles by default. These `VariantProps`
+ * are what control the `Button`'s presentation, and are intended only use cases where the buttons appear as, well, buttons.
+ *
+ * If `Button` or an extension of it are used for other compound components, use this property to avoid misuse of these variant props further down the line.
+ *
+ * @example
+ * type MyComponentProps = Omit<ButtonProps, UninheritableButtonProps> & {...}
+ */
+export type UninheritableButtonProps = 'variant' | 'color' | 'size' | 'shape'
+
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
 export type ButtonColor =
   | 'primary'