From b3d207c7b9578314ae0e67ef6f3b8186585156ad Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 31 Jul 2025 07:41:10 -0500
Subject: [PATCH] Make proper extension of `Button` more clearly defined
 (#8753)

* Remove unecessary color prop from SettingsList LinkItem

* Add UninheritableButtonProps to avoid misuse
---
 src/components/Button.tsx                        | 12 ++++++++++++
 src/screens/Settings/components/SettingsList.tsx |  6 +++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 42eb648443..22c9ab96d0 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'
diff --git a/src/screens/Settings/components/SettingsList.tsx b/src/screens/Settings/components/SettingsList.tsx
index 6d17990478..5720849723 100644
--- a/src/screens/Settings/components/SettingsList.tsx
+++ b/src/screens/Settings/components/SettingsList.tsx
@@ -124,7 +124,7 @@ export function LinkItem({
   contentContainerStyle,
   chevronColor,
   ...props
-}: LinkProps & {
+}: Omit<LinkProps, Button.UninheritableButtonProps> & {
   contentContainerStyle?: StyleProp<ViewStyle>
   destructive?: boolean
   chevronColor?: string
@@ -132,7 +132,7 @@ export function LinkItem({
   const t = useTheme()
 
   return (
-    <Link color="secondary" {...props}>
+    <Link {...props}>
       {args => (
         <Item
           destructive={destructive}
@@ -154,7 +154,7 @@ export function PressableItem({
   contentContainerStyle,
   hoverStyle,
   ...props
-}: Button.ButtonProps & {
+}: Omit<Button.ButtonProps, Button.UninheritableButtonProps> & {
   contentContainerStyle?: StyleProp<ViewStyle>
   destructive?: boolean
 }) {