replace all buttons with BottomSheetButton

src/components/BottomSheetButton.tsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import {AccessibilityProps, ViewStyle} from 'react-native'
+import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
+import {
+  BlueskyBottomSheetPressable,
+  BueskyBottomSheetPressableProps,
+} from '@haileyok/bluesky-bottom-sheet'
+
+import {atoms as a} from '#/alf'
+import {
+  ButtonContext,
+  useSharedButtonStyles,
+  VariantProps,
+} from '#/components/Button'
+
+export function BottomSheetButton({
+  children,
+  label,
+  color,
+  variant,
+  shape = 'default',
+  size,
+  disabled,
+  style,
+  ...rest
+}: BueskyBottomSheetPressableProps &
+  AccessibilityProps &
+  VariantProps & {
+    /**
+     * For a11y, try to make this descriptive and clear
+     */
+    label: string
+  }) {
+  const [state, setState] = React.useState({
+    pressed: false,
+    hovered: false,
+    focused: false,
+  })
+
+  const onPressInOuter = rest.onPressIn
+  const onPressIn = React.useCallback(
+    (e: PressableEvent) => {
+      setState(s => ({
+        ...s,
+        pressed: true,
+      }))
+      onPressInOuter?.(e)
+    },
+    [setState, onPressInOuter],
+  )
+  const onPressOutOuter = rest.onPressOut
+  const onPressOut = React.useCallback(
+    (e: PressableEvent) => {
+      setState(s => ({
+        ...s,
+        pressed: false,
+      }))
+      onPressOutOuter?.(e)
+    },
+    [setState, onPressOutOuter],
+  )
+
+  const {baseStyles, hoverStyles} = useSharedButtonStyles({
+    /**
+     * For a11y, try to make this descriptive and clear
+     */
+    color,
+    variant,
+    shape,
+    size,
+    disabled,
+  })
+
+  const context = React.useMemo<ButtonContext>(
+    () => ({
+      ...state,
+      variant,
+      color,
+      size,
+      disabled: disabled || false,
+    }),
+    [state, variant, color, size, disabled],
+  )
+
+  return (
+    <BlueskyBottomSheetPressable
+      style={[
+        a.flex_row,
+        a.align_center,
+        a.justify_center,
+        baseStyles,
+        style as ViewStyle,
+        ...(state.hovered || state.pressed ? [hoverStyles] : []),
+      ]}
+      aria-label={label}
+      aria-pressed={state.pressed}
+      accessibilityLabel={label}
+      accessibilityHint={undefined}
+      accessibilityState={{
+        disabled: disabled || false,
+      }}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      {...rest}>
+      <ButtonContext.Provider value={context}>
+        {typeof children === 'function' ? children(context) : children}
+      </ButtonContext.Provider>
+    </BlueskyBottomSheetPressable>
+  )
+}

src/components/BottomSheetButton.web.tsx

@@ -0,0 +1,3 @@
+import {Button as BottomSheetButton} from '#/components/Button'
+
+export {BottomSheetButton}

src/components/Button.tsx

@@ -89,7 +89,8 @@ export type ButtonProps = Pick<
     children: NonTextElements | ((context: ButtonContext) => NonTextElements)
   }
 
-export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
+export type ButtonTextProps = TextProps &
+  VariantProps & {disabled?: boolean | null}
 
 const Context = React.createContext<VariantProps & ButtonState>({
   hovered: false,
@@ -97,6 +98,7 @@ const Context = React.createContext<VariantProps & ButtonState>({
   pressed: false,
   disabled: false,
 })
+export const ButtonContext = Context
 
 export function useButtonContext() {
   return React.useContext(Context)
@@ -118,7 +120,6 @@ export const Button = React.forwardRef<View, ButtonProps>(
     },
     ref,
   ) => {
-    const t = useTheme()
     const [state, setState] = React.useState({
       pressed: false,
       hovered: false,
@@ -182,226 +183,13 @@ export const Button = React.forwardRef<View, ButtonProps>(
       }))
     }, [setState])
 
-    const {baseStyles, hoverStyles} = React.useMemo(() => {
+    const {baseStyles, hoverStyles} = useSharedButtonStyles({
-      const baseStyles: ViewStyle[] = []
+      color,
-      const hoverStyles: ViewStyle[] = []
+      variant,
-
+      disabled,
-      if (color === 'primary') {
+      shape,
-        if (variant === 'solid') {
+      size,
-          if (!disabled) {
+    })
-            baseStyles.push({
-              backgroundColor: t.palette.primary_500,
-            })
-            hoverStyles.push({
-              backgroundColor: t.palette.primary_600,
-            })
-          } else {
-            baseStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.primary_700,
-                dim: t.palette.primary_300,
-                dark: t.palette.primary_300,
-              }),
-            })
-          }
-        } else if (variant === 'outline') {
-          baseStyles.push(a.border, t.atoms.bg, {
-            borderWidth: 1,
-          })
-
-          if (!disabled) {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.primary_500,
-            })
-            hoverStyles.push(a.border, {
-              backgroundColor: t.palette.primary_50,
-            })
-          } else {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.primary_200,
-            })
-          }
-        } else if (variant === 'ghost') {
-          if (!disabled) {
-            baseStyles.push(t.atoms.bg)
-            hoverStyles.push({
-              backgroundColor: t.palette.primary_100,
-            })
-          }
-        }
-      } else if (color === 'secondary') {
-        if (variant === 'solid') {
-          if (!disabled) {
-            baseStyles.push(t.atoms.bg_contrast_25)
-            hoverStyles.push(t.atoms.bg_contrast_50)
-          } else {
-            baseStyles.push(t.atoms.bg_contrast_100)
-          }
-        } else if (variant === 'outline') {
-          baseStyles.push(a.border, t.atoms.bg, {
-            borderWidth: 1,
-          })
-
-          if (!disabled) {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.contrast_300,
-            })
-            hoverStyles.push(t.atoms.bg_contrast_50)
-          } else {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.contrast_200,
-            })
-          }
-        } else if (variant === 'ghost') {
-          if (!disabled) {
-            baseStyles.push(t.atoms.bg)
-            hoverStyles.push({
-              backgroundColor: t.palette.contrast_25,
-            })
-          }
-        }
-      } else if (color === 'secondary_inverted') {
-        if (variant === 'solid') {
-          if (!disabled) {
-            baseStyles.push({
-              backgroundColor: t.palette.contrast_900,
-            })
-            hoverStyles.push({
-              backgroundColor: t.palette.contrast_950,
-            })
-          } else {
-            baseStyles.push({
-              backgroundColor: t.palette.contrast_600,
-            })
-          }
-        } else if (variant === 'outline') {
-          baseStyles.push(a.border, t.atoms.bg, {
-            borderWidth: 1,
-          })
-
-          if (!disabled) {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.contrast_300,
-            })
-            hoverStyles.push(t.atoms.bg_contrast_50)
-          } else {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.contrast_200,
-            })
-          }
-        } else if (variant === 'ghost') {
-          if (!disabled) {
-            baseStyles.push(t.atoms.bg)
-            hoverStyles.push({
-              backgroundColor: t.palette.contrast_25,
-            })
-          }
-        }
-      } else if (color === 'negative') {
-        if (variant === 'solid') {
-          if (!disabled) {
-            baseStyles.push({
-              backgroundColor: t.palette.negative_500,
-            })
-            hoverStyles.push({
-              backgroundColor: t.palette.negative_600,
-            })
-          } else {
-            baseStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.negative_700,
-                dim: t.palette.negative_300,
-                dark: t.palette.negative_300,
-              }),
-            })
-          }
-        } else if (variant === 'outline') {
-          baseStyles.push(a.border, t.atoms.bg, {
-            borderWidth: 1,
-          })
-
-          if (!disabled) {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.negative_500,
-            })
-            hoverStyles.push(a.border, {
-              backgroundColor: t.palette.negative_50,
-            })
-          } else {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.negative_200,
-            })
-          }
-        } else if (variant === 'ghost') {
-          if (!disabled) {
-            baseStyles.push(t.atoms.bg)
-            hoverStyles.push({
-              backgroundColor: t.palette.negative_100,
-            })
-          }
-        }
-      }
-
-      if (shape === 'default') {
-        if (size === 'large') {
-          baseStyles.push({
-            paddingVertical: 13,
-            paddingHorizontal: 20,
-            borderRadius: 8,
-            gap: 8,
-          })
-        } else if (size === 'small') {
-          baseStyles.push({
-            paddingVertical: 8,
-            paddingHorizontal: 12,
-            borderRadius: 6,
-            gap: 6,
-          })
-        } else if (size === 'tiny') {
-          baseStyles.push({
-            paddingVertical: 4,
-            paddingHorizontal: 8,
-            borderRadius: 4,
-            gap: 4,
-          })
-        }
-      } else if (shape === 'round' || shape === 'square') {
-        if (size === 'large') {
-          if (shape === 'round') {
-            baseStyles.push({height: 46, width: 46})
-          } else {
-            baseStyles.push({height: 44, width: 44})
-          }
-        } else if (size === 'small') {
-          if (shape === 'round') {
-            baseStyles.push({height: 36, width: 36})
-          } else {
-            baseStyles.push({height: 34, width: 34})
-          }
-        } else if (size === 'tiny') {
-          if (shape === 'round') {
-            baseStyles.push({height: 22, width: 22})
-          } else {
-            baseStyles.push({height: 21, width: 21})
-          }
-        }
-
-        if (shape === 'round') {
-          baseStyles.push(a.rounded_full)
-        } else if (shape === 'square') {
-          if (size === 'tiny') {
-            baseStyles.push(a.rounded_xs)
-          } else {
-            baseStyles.push(a.rounded_sm)
-          }
-        }
-      }
-
-      return {
-        baseStyles,
-        hoverStyles,
-      }
-    }, [t, variant, color, size, shape, disabled])
 
     const {gradientColors, gradientHoverColors, gradientLocations} =
       React.useMemo(() => {
@@ -506,6 +294,239 @@ export const Button = React.forwardRef<View, ButtonProps>(
 )
 Button.displayName = 'Button'
 
+export function useSharedButtonStyles({
+  color,
+  variant,
+  disabled,
+  shape,
+  size,
+}: VariantProps & {disabled?: boolean | null}) {
+  const t = useTheme()
+
+  const {baseStyles, hoverStyles} = React.useMemo(() => {
+    const baseStyles: ViewStyle[] = []
+    const hoverStyles: ViewStyle[] = []
+
+    if (color === 'primary') {
+      if (variant === 'solid') {
+        if (!disabled) {
+          baseStyles.push({
+            backgroundColor: t.palette.primary_500,
+          })
+          hoverStyles.push({
+            backgroundColor: t.palette.primary_600,
+          })
+        } else {
+          baseStyles.push({
+            backgroundColor: select(t.name, {
+              light: t.palette.primary_700,
+              dim: t.palette.primary_300,
+              dark: t.palette.primary_300,
+            }),
+          })
+        }
+      } else if (variant === 'outline') {
+        baseStyles.push(a.border, t.atoms.bg, {
+          borderWidth: 1,
+        })
+
+        if (!disabled) {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.primary_500,
+          })
+          hoverStyles.push(a.border, {
+            backgroundColor: t.palette.primary_50,
+          })
+        } else {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.primary_200,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg)
+          hoverStyles.push({
+            backgroundColor: t.palette.primary_100,
+          })
+        }
+      }
+    } else if (color === 'secondary') {
+      if (variant === 'solid') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg_contrast_25)
+          hoverStyles.push(t.atoms.bg_contrast_50)
+        } else {
+          baseStyles.push(t.atoms.bg_contrast_100)
+        }
+      } else if (variant === 'outline') {
+        baseStyles.push(a.border, t.atoms.bg, {
+          borderWidth: 1,
+        })
+
+        if (!disabled) {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.contrast_300,
+          })
+          hoverStyles.push(t.atoms.bg_contrast_50)
+        } else {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.contrast_200,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg)
+          hoverStyles.push({
+            backgroundColor: t.palette.contrast_25,
+          })
+        }
+      }
+    } else if (color === 'secondary_inverted') {
+      if (variant === 'solid') {
+        if (!disabled) {
+          baseStyles.push({
+            backgroundColor: t.palette.contrast_900,
+          })
+          hoverStyles.push({
+            backgroundColor: t.palette.contrast_950,
+          })
+        } else {
+          baseStyles.push({
+            backgroundColor: t.palette.contrast_600,
+          })
+        }
+      } else if (variant === 'outline') {
+        baseStyles.push(a.border, t.atoms.bg, {
+          borderWidth: 1,
+        })
+
+        if (!disabled) {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.contrast_300,
+          })
+          hoverStyles.push(t.atoms.bg_contrast_50)
+        } else {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.contrast_200,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg)
+          hoverStyles.push({
+            backgroundColor: t.palette.contrast_25,
+          })
+        }
+      }
+    } else if (color === 'negative') {
+      if (variant === 'solid') {
+        if (!disabled) {
+          baseStyles.push({
+            backgroundColor: t.palette.negative_500,
+          })
+          hoverStyles.push({
+            backgroundColor: t.palette.negative_600,
+          })
+        } else {
+          baseStyles.push({
+            backgroundColor: select(t.name, {
+              light: t.palette.negative_700,
+              dim: t.palette.negative_300,
+              dark: t.palette.negative_300,
+            }),
+          })
+        }
+      } else if (variant === 'outline') {
+        baseStyles.push(a.border, t.atoms.bg, {
+          borderWidth: 1,
+        })
+
+        if (!disabled) {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.negative_500,
+          })
+          hoverStyles.push(a.border, {
+            backgroundColor: t.palette.negative_50,
+          })
+        } else {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.negative_200,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg)
+          hoverStyles.push({
+            backgroundColor: t.palette.negative_100,
+          })
+        }
+      }
+    }
+
+    if (shape === 'default') {
+      if (size === 'large') {
+        baseStyles.push({
+          paddingVertical: 13,
+          paddingHorizontal: 20,
+          borderRadius: 8,
+          gap: 8,
+        })
+      } else if (size === 'small') {
+        baseStyles.push({
+          paddingVertical: 8,
+          paddingHorizontal: 12,
+          borderRadius: 6,
+          gap: 6,
+        })
+      } else if (size === 'tiny') {
+        baseStyles.push({
+          paddingVertical: 4,
+          paddingHorizontal: 8,
+          borderRadius: 4,
+          gap: 4,
+        })
+      }
+    } else if (shape === 'round' || shape === 'square') {
+      if (size === 'large') {
+        if (shape === 'round') {
+          baseStyles.push({height: 46, width: 46})
+        } else {
+          baseStyles.push({height: 44, width: 44})
+        }
+      } else if (size === 'small') {
+        if (shape === 'round') {
+          baseStyles.push({height: 36, width: 36})
+        } else {
+          baseStyles.push({height: 34, width: 34})
+        }
+      } else if (size === 'tiny') {
+        if (shape === 'round') {
+          baseStyles.push({height: 22, width: 22})
+        } else {
+          baseStyles.push({height: 21, width: 21})
+        }
+      }
+
+      if (shape === 'round') {
+        baseStyles.push(a.rounded_full)
+      } else if (shape === 'square') {
+        if (size === 'tiny') {
+          baseStyles.push(a.rounded_xs)
+        } else {
+          baseStyles.push(a.rounded_sm)
+        }
+      }
+    }
+
+    return {
+      baseStyles,
+      hoverStyles,
+    }
+  }, [t, variant, color, size, shape, disabled])
+
+  return {baseStyles, hoverStyles}
+}
+
 export function useSharedButtonTextStyles() {
   const t = useTheme()
   const {color, variant, disabled, size} = useButtonContext()

src/components/NewskieDialog.tsx

@@ -12,6 +12,7 @@ import {isNative} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
@@ -141,7 +142,7 @@ export function NewskieDialog({
             ) : null}
 
             {isNative && (
-              <Button
+              <BottomSheetButton
                 label={_(msg`Close`)}
                 variant="solid"
                 color="secondary"
@@ -151,7 +152,7 @@ export function NewskieDialog({
                 <ButtonText>
                   <Trans>Close</Trans>
                 </ButtonText>
-              </Button>
+              </BottomSheetButton>
             )}
           </View>
 

src/components/Prompt.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
-import {GestureResponderEvent, View} from 'react-native'
+import {View} from 'react-native'
+import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonColor, ButtonProps, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
 
@@ -115,14 +117,14 @@ export function Cancel({
   }, [close])
 
   return (
-    <Button
+    <BottomSheetButton
       variant="solid"
       color="secondary"
       size={gtMobile ? 'small' : 'large'}
       label={cta || _(msg`Cancel`)}
       onPress={onPress}>
       <ButtonText>{cta || _(msg`Cancel`)}</ButtonText>
-    </Button>
+    </BottomSheetButton>
   )
 }
 
@@ -139,7 +141,7 @@ export function Action({
    * Note: The dialog will close automatically when the action is pressed, you
    * should NOT close the dialog as a side effect of this method.
    */
-  onPress: ButtonProps['onPress']
+  onPress: (e: PressableEvent) => void
   color?: ButtonColor
   /**
    * Optional i18n string. If undefined, it will default to "Confirm".
@@ -151,14 +153,14 @@ export function Action({
   const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
   const handleOnPress = React.useCallback(
-    (e: GestureResponderEvent) => {
+    (e: PressableEvent) => {
       close(() => onPress?.(e))
     },
     [close, onPress],
   )
 
   return (
-    <Button
+    <BottomSheetButton
       variant="solid"
       color={color}
       size={gtMobile ? 'small' : 'large'}
@@ -166,7 +168,7 @@ export function Action({
       onPress={handleOnPress}
       testID={testID}>
       <ButtonText>{cta || _(msg`Confirm`)}</ButtonText>
-    </Button>
+    </BottomSheetButton>
   )
 }
 
@@ -192,7 +194,7 @@ export function Basic({
    * Note: The dialog will close automatically when the action is pressed, you
    * should NOT close the dialog as a side effect of this method.
    */
-  onConfirm: ButtonProps['onPress']
+  onConfirm: (e: PressableEvent) => void
   confirmButtonColor?: ButtonColor
   showCancel?: boolean
 }>) {

src/components/ReportDialog/SelectReportOptionView.tsx

@@ -10,12 +10,8 @@ import {DMCA_LINK} from '#/components/ReportDialog/const'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {
+import {BottomSheetButton} from '#/components/BottomSheetButton'
-  Button,
+import {ButtonIcon, ButtonText, useButtonContext} from '#/components/Button'
-  ButtonIcon,
-  ButtonText,
-  useButtonContext,
-} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import {
   ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft,
@@ -72,7 +68,7 @@ export function SelectReportOptionView({
   return (
     <View style={[a.gap_lg]}>
       {props.labelers?.length > 1 ? (
-        <Button
+        <BottomSheetButton
           size="small"
           variant="solid"
           color="secondary"
@@ -80,7 +76,7 @@ export function SelectReportOptionView({
           label={_(msg`Go back to previous step`)}
           onPress={props.goBack}>
           <ButtonIcon icon={ChevronLeft} />
-        </Button>
+        </BottomSheetButton>
       ) : null}
 
       <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
@@ -95,7 +91,7 @@ export function SelectReportOptionView({
       <View style={[a.gap_sm]}>
         {reportOptions.map(reportOption => {
           return (
-            <Button
+            <BottomSheetButton
               key={reportOption.reason}
               testID={reportOption.reason}
               label={_(msg`Create report for ${reportOption.title}`)}
@@ -104,7 +100,7 @@ export function SelectReportOptionView({
                 title={reportOption.title}
                 description={reportOption.description}
               />
-            </Button>
+            </BottomSheetButton>
           )
         })}
 

src/components/ReportDialog/SubmitView.tsx

@@ -10,7 +10,8 @@ import {useAgent} from '#/state/session'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, native, useTheme} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
@@ -100,7 +101,7 @@ export function SubmitView({
 
   return (
     <View style={[a.gap_2xl]}>
-      <Button
+      <BottomSheetButton
         size="small"
         variant="solid"
         color="secondary"
@@ -108,7 +109,7 @@ export function SubmitView({
         label={_(msg`Go back to previous step`)}
         onPress={goBack}>
         <ButtonIcon icon={ChevronLeft} />
-      </Button>
+      </BottomSheetButton>
 
       <View
         style={[
@@ -211,7 +212,7 @@ export function SubmitView({
             </Text>
           ))}
 
-        <Button
+        <BottomSheetButton
           testID="sendReportBtn"
           size="large"
           variant="solid"
@@ -223,7 +224,7 @@ export function SubmitView({
             <Trans>Send report</Trans>
           </ButtonText>
           {submitting && <ButtonIcon icon={Loader} />}
-        </Button>
+        </BottomSheetButton>
       </View>
     </View>
   )

src/components/StarterPack/QrCodeDialog.tsx

@@ -13,7 +13,8 @@ import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
@@ -165,7 +166,7 @@ export function QrCodeDialog({
                 ) : (
                   <View
                     style={[a.w_full, a.gap_md, isWeb && [a.flex_row_reverse]]}>
-                    <Button
+                    <BottomSheetButton
                       label={_(msg`Copy QR code`)}
                       variant="solid"
                       color="secondary"
@@ -174,8 +175,8 @@ export function QrCodeDialog({
                       <ButtonText>
                         {isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
                       </ButtonText>
-                    </Button>
+                    </BottomSheetButton>
-                    <Button
+                    <BottomSheetButton
                       label={_(msg`Save QR code`)}
                       variant="solid"
                       color="secondary"
@@ -184,7 +185,7 @@ export function QrCodeDialog({
                       <ButtonText>
                         <Trans>Save</Trans>
                       </ButtonText>
-                    </Button>
+                    </BottomSheetButton>
                   </View>
                 )}
               </>

src/components/StarterPack/ShareDialog.tsx

@@ -15,7 +15,8 @@ import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import {DialogControlProps} from '#/components/Dialog'
 import * as Dialog from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
@@ -119,7 +120,7 @@ function ShareDialogInner({
                 a.gap_md,
                 isWeb && [a.gap_sm, a.flex_row_reverse, {marginLeft: 'auto'}],
               ]}>
-              <Button
+              <BottomSheetButton
                 label={isWeb ? _(msg`Copy link`) : _(msg`Share link`)}
                 variant="solid"
                 color="secondary"
@@ -129,8 +130,8 @@ function ShareDialogInner({
                 <ButtonText>
                   {isWeb ? <Trans>Copy Link</Trans> : <Trans>Share link</Trans>}
                 </ButtonText>
-              </Button>
+              </BottomSheetButton>
-              <Button
+              <BottomSheetButton
                 label={_(msg`Share QR code`)}
                 variant="solid"
                 color="secondary"
@@ -144,9 +145,9 @@ function ShareDialogInner({
                 <ButtonText>
                   <Trans>Share QR code</Trans>
                 </ButtonText>
-              </Button>
+              </BottomSheetButton>
               {isNative && (
-                <Button
+                <BottomSheetButton
                   label={_(msg`Save image`)}
                   variant="ghost"
                   color="secondary"
@@ -156,7 +157,7 @@ function ShareDialogInner({
                   <ButtonText>
                     <Trans>Save image</Trans>
                   </ButtonText>
-                </Button>
+                </BottomSheetButton>
               )}
             </View>
           </View>

src/components/StarterPack/Wizard/WizardEditListDialog.tsx

@@ -12,7 +12,8 @@ import {useSession} from '#/state/session'
 import {ListMethods} from '#/view/com/util/List'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, native, useTheme, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {
   WizardFeedCard,
@@ -111,7 +112,7 @@ export function WizardEditListDialog({
             </Text>
             <View style={{width: 60}}>
               {isWeb && (
-                <Button
+                <BottomSheetButton
                   label={_(msg`Close`)}
                   variant="ghost"
                   color="primary"
@@ -120,7 +121,7 @@ export function WizardEditListDialog({
                   <ButtonText>
                     <Trans>Close</Trans>
                   </ButtonText>
-                </Button>
+                </BottomSheetButton>
               )}
             </View>
           </View>

src/components/TagMenu/index.tsx

@@ -13,7 +13,8 @@ import {
   useUpsertMutedWordsMutation,
 } from '#/state/queries/preferences'
 import {atoms as a, native, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
@@ -211,7 +212,7 @@ export function TagMenu({
                   <>
                     <Divider />
 
-                    <Button
+                    <BottomSheetButton
                       label={
                         isMuted
                           ? _(msg`Unmute all ${displayTag} posts`)
@@ -265,12 +266,12 @@ export function TagMenu({
                           <Trans>posts</Trans>
                         </Text>
                       </View>
-                    </Button>
+                    </BottomSheetButton>
                   </>
                 ) : null}
               </View>
 
-              <Button
+              <BottomSheetButton
                 label={_(msg`Close this dialog`)}
                 size="small"
                 variant="ghost"
@@ -279,7 +280,7 @@ export function TagMenu({
                 <ButtonText>
                   <Trans>Cancel</Trans>
                 </ButtonText>
-              </Button>
+              </BottomSheetButton>
             </>
           )}
         </Dialog.Inner>

src/components/WhoCanReply.tsx

@@ -17,7 +17,7 @@ import {
   threadgateViewToAllowUISetting,
 } from '#/state/queries/threadgate'
 import {atoms as a, useTheme} from '#/alf'
-import {Button} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
 import {
@@ -82,7 +82,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
 
   return (
     <>
-      <Button
+      <BottomSheetButton
         label={
           isThreadAuthor ? _(msg`Edit who can reply`) : _(msg`Who can reply`)
         }
@@ -98,7 +98,8 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
             })
           : {})}
         hitSlop={HITSLOP_10}>
-        {({hovered}) => (
+        {/* @TODO DIALOG REFACTOR hovered */}
+        {({pressed}) => (
           <View style={[a.flex_row, a.align_center, a.gap_xs, style]}>
             <Icon
               color={t.palette.contrast_400}
@@ -110,7 +111,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
                 a.text_sm,
                 a.leading_tight,
                 t.atoms.text_contrast_medium,
-                hovered && a.underline,
+                pressed && a.underline,
               ]}>
               {description}
             </Text>
@@ -120,7 +121,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
             )}
           </View>
         )}
-      </Button>
+      </BottomSheetButton>
 
       {isThreadAuthor ? (
         <PostInteractionSettingsDialog

src/components/dialogs/BirthDateSettings.tsx

@@ -14,9 +14,10 @@ import {
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import {DateInput} from '#/view/com/util/forms/DateInput'
 import {atoms as a, useTheme} from '#/alf'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
-import {Button, ButtonIcon, ButtonText} from '../Button'
+import {ButtonIcon, ButtonText} from '../Button'
 import {Text} from '../Typography'
 
 export function BirthDateSettingsDialog({
@@ -113,7 +114,7 @@ function BirthdayInner({
       ) : undefined}
 
       <View style={isWeb && [a.flex_row, a.justify_end]}>
-        <Button
+        <BottomSheetButton
           label={hasChanged ? _(msg`Save birthday`) : _(msg`Done`)}
           size="large"
           onPress={onSave}
@@ -123,7 +124,7 @@ function BirthdayInner({
             {hasChanged ? <Trans>Save</Trans> : <Trans>Done</Trans>}
           </ButtonText>
           {isPending && <ButtonIcon icon={Loader} />}
-        </Button>
+        </BottomSheetButton>
       </View>
     </View>
   )

src/components/dialogs/Embed.tsx

@@ -8,12 +8,13 @@ import {EMBED_SCRIPT} from '#/lib/constants'
 import {niceDate} from '#/lib/strings/time'
 import {toShareUrl} from '#/lib/strings/url-helpers'
 import {atoms as a, useTheme} from '#/alf'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {CodeBrackets_Stroke2_Corner0_Rounded as CodeBrackets} from '#/components/icons/CodeBrackets'
 import {Text} from '#/components/Typography'
-import {Button, ButtonIcon, ButtonText} from '../Button'
+import {ButtonIcon, ButtonText} from '../Button'
 
 type EmbedDialogProps = {
   control: Dialog.DialogControlProps
@@ -117,7 +118,7 @@ function EmbedDialogInner({
             />
           </TextField.Root>
         </View>
-        <Button
+        <BottomSheetButton
           label={_(msg`Copy code`)}
           color="primary"
           variant="solid"
@@ -140,7 +141,7 @@ function EmbedDialogInner({
               <Trans>Copy code</Trans>
             </ButtonText>
           )}
-        </Button>
+        </BottomSheetButton>
       </View>
       <Dialog.Close />
     </Dialog.Inner>

src/components/dialogs/EmbedConsent.tsx

@@ -10,8 +10,9 @@ import {
 } from '#/lib/strings/embed-player'
 import {useSetExternalEmbedPref} from '#/state/preferences'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
-import {Button, ButtonText} from '../Button'
+import {ButtonText} from '../Button'
 import {Text} from '../Typography'
 
 export function EmbedConsentDialog({
@@ -75,7 +76,7 @@ export function EmbedConsentDialog({
           </View>
         </View>
         <View style={a.gap_md}>
-          <Button
+          <BottomSheetButton
             style={gtMobile && a.flex_1}
             label={_(msg`Enable external media`)}
             onPress={onShowAllPress}
@@ -86,8 +87,8 @@ export function EmbedConsentDialog({
             <ButtonText>
               <Trans>Enable external media</Trans>
             </ButtonText>
-          </Button>
+          </BottomSheetButton>
-          <Button
+          <BottomSheetButton
             style={gtMobile && a.flex_1}
             label={_(msg`Enable this source only`)}
             onPress={onShowPress}
@@ -98,8 +99,8 @@ export function EmbedConsentDialog({
             <ButtonText>
               <Trans>Enable {externalEmbedLabels[source]} only</Trans>
             </ButtonText>
-          </Button>
+          </BottomSheetButton>
-          <Button
+          <BottomSheetButton
             label={_(msg`No thanks`)}
             onAccessibilityEscape={control.close}
             onPress={onHidePress}
@@ -109,7 +110,7 @@ export function EmbedConsentDialog({
             <ButtonText>
               <Trans>No thanks</Trans>
             </ButtonText>
-          </Button>
+          </BottomSheetButton>
         </View>
         <Dialog.Close />
       </Dialog.ScrollableInner>

src/components/dialogs/GifSelect.tsx

@@ -20,12 +20,13 @@ import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {ListMethods} from '#/view/com/util/List'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
 import {ArrowLeft_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
-import {Button, ButtonIcon, ButtonText} from '../Button'
+import {ButtonIcon, ButtonText} from '../Button'
 import {ListFooter, ListMaybePlaceholder} from '../Lists'
 import {GifPreview} from './GifSelect.shared'
 
@@ -148,7 +149,7 @@ function GifList({
         />
 
         {!gtMobile && isWeb && (
-          <Button
+          <BottomSheetButton
             size="small"
             variant="ghost"
             color="secondary"
@@ -156,7 +157,7 @@ function GifList({
             onPress={() => control.close()}
             label={_(msg`Close GIF dialog`)}>
             <ButtonIcon icon={Arrow} size="md" />
-          </Button>
+          </BottomSheetButton>
         )}
 
         <TextField.Root>
@@ -256,7 +257,7 @@ function DialogError({details}: {details?: string}) {
         )}
         details={details}
       />
-      <Button
+      <BottomSheetButton
         label={_(msg`Close dialog`)}
         onPress={() => control.close()}
         color="primary"
@@ -265,7 +266,7 @@ function DialogError({details}: {details?: string}) {
         <ButtonText>
           <Trans>Close</Trans>
         </ButtonText>
-      </Button>
+      </BottomSheetButton>
     </Dialog.ScrollableInner>
   )
 }

src/components/dialogs/MutedWords.tsx

@@ -19,7 +19,8 @@ import {
   ViewStyleProp,
   web,
 } from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {Divider} from '#/components/Divider'
@@ -315,7 +316,7 @@ function MutedWordsInner() {
           </View>
 
           <View style={[a.pt_xs]}>
-            <Button
+            <BottomSheetButton
               disabled={isPending || !field}
               label={_(msg`Add mute word for configured settings`)}
               size="large"
@@ -327,7 +328,7 @@ function MutedWordsInner() {
                 <Trans>Add</Trans>
               </ButtonText>
               <ButtonIcon icon={isPending ? Loader : Plus} position="right" />
-            </Button>
+            </BottomSheetButton>
           </View>
 
           {error && (
@@ -518,7 +519,7 @@ function MutedWordRow({
           )}
         </View>
 
-        <Button
+        <BottomSheetButton
           label={_(msg`Remove mute word from your list`)}
           size="tiny"
           shape="round"
@@ -527,7 +528,7 @@ function MutedWordRow({
           onPress={() => control.open()}
           style={[a.ml_sm]}>
           <ButtonIcon icon={isPending ? Loader : X} />
-        </Button>
+        </BottomSheetButton>
       </View>
     </>
   )

src/components/dialogs/PostInteractionSettingsDialog.tsx

@@ -30,7 +30,8 @@ import {
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import * as Toggle from '#/components/forms/Toggle'
@@ -432,7 +433,7 @@ export function PostInteractionSettingsForm({
         </View>
       </View>
 
-      <Button
+      <BottomSheetButton
         label={_(msg`Save`)}
         onPress={onSave}
         onAccessibilityEscape={control.close}
@@ -442,7 +443,7 @@ export function PostInteractionSettingsForm({
         style={a.mt_xl}>
         <ButtonText>{_(msg`Save`)}</ButtonText>
         {isSaving && <ButtonIcon icon={Loader} position="right" />}
-      </Button>
+      </BottomSheetButton>
     </View>
   )
 }
@@ -462,7 +463,7 @@ function Selectable({
 }) {
   const t = useTheme()
   return (
-    <Button
+    <BottomSheetButton
       disabled={disabled}
       onPress={onPress}
       label={label}
@@ -472,7 +473,8 @@ function Selectable({
         checked: isSelected,
       }}
       style={a.flex_1}>
-      {({hovered, focused}) => (
+      {/* @TODO DIALOG REFACTOR hovered focused */}
+      {({pressed}) => (
         <View
           style={[
             a.flex_1,
@@ -483,7 +485,7 @@ function Selectable({
             a.p_md,
             {height: 40}, // for consistency with checkmark icon visible or not
             t.atoms.bg_contrast_50,
-            (hovered || focused) && t.atoms.bg_contrast_100,
+            pressed && t.atoms.bg_contrast_100,
             isSelected && {
               backgroundColor: t.palette.primary_100,
             },
@@ -497,7 +499,7 @@ function Selectable({
           )}
         </View>
       )}
-    </Button>
+    </BottomSheetButton>
   )
 }
 

src/components/dialogs/Signin.tsx

@@ -9,7 +9,8 @@ import {useCloseAllActiveElements} from '#/state/util'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {Text} from '#/components/Typography'
@@ -77,7 +78,7 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
         </Text>
 
         <View style={[a.flex_col, a.gap_md]}>
-          <Button
+          <BottomSheetButton
             variant="solid"
             color="primary"
             size="large"
@@ -86,9 +87,9 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
             <ButtonText>
               <Trans>Create an account</Trans>
             </ButtonText>
-          </Button>
+          </BottomSheetButton>
 
-          <Button
+          <BottomSheetButton
             variant="solid"
             color="secondary"
             size="large"
@@ -97,7 +98,7 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
             <ButtonText>
               <Trans>Sign in</Trans>
             </ButtonText>
-          </Button>
+          </BottomSheetButton>
         </View>
 
         {isNative && <View style={{height: 10}} />}

src/components/dms/MessagesNUX.tsx

@@ -9,7 +9,8 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as Toggle from '#/components/forms/Toggle'
 import {Message_Stroke2_Corner0_Rounded} from '#/components/icons/Message'
@@ -156,7 +157,7 @@ function DialogInner({
             </Toggle.Group>
           </View>
         </View>
-        <Button
+        <BottomSheetButton
           label={_(msg`Start chatting`)}
           accessibilityHint={_(msg`Close modal`)}
           size="large"
@@ -166,7 +167,7 @@ function DialogInner({
           <ButtonText>
             <Trans>Get started</Trans>
           </ButtonText>
-        </Button>
+        </BottomSheetButton>
       </View>
       <Dialog.Close />
     </Dialog.ScrollableInner>

src/components/dms/dialogs/SearchablePeopleList.tsx

@@ -21,7 +21,7 @@ import {useSession} from '#/state/session'
 import {ListMethods} from '#/view/com/util/List'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, native, useTheme, web} from '#/alf'
-import {Button} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import {canBeMessaged} from '#/components/dms/util'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -254,7 +254,7 @@ export function SearchablePeopleList({
             a.justify_center,
             {height: 32},
           ]}>
-          <Button
+          <BottomSheetButton
             label={_(msg`Close`)}
             size="small"
             shape="round"
@@ -264,6 +264,7 @@ export function SearchablePeopleList({
               a.absolute,
               a.z_20,
               native({
+                top: 2,
                 left: -7,
               }),
               web({
@@ -276,7 +277,7 @@ export function SearchablePeopleList({
             ) : (
               <ChevronLeft size="md" fill={t.palette.contrast_500} />
             )}
-          </Button>
+          </BottomSheetButton>
           <Text
             style={[
               a.z_10,
@@ -363,11 +364,11 @@ function ProfileCard({
   }, [onPress, profile.did])
 
   return (
-    <Button
+    <BottomSheetButton
       disabled={!enabled}
       label={_(msg`Start chat with ${displayName}`)}
       onPress={handleOnPress}>
-      {({hovered, pressed, focused}) => (
+      {({pressed}) => (
         <View
           style={[
             a.flex_1,
@@ -376,12 +377,11 @@ function ProfileCard({
             a.gap_md,
             a.align_center,
             a.flex_row,
+            // @TODO DIALOG REFACTOR focused hovered
             !enabled
               ? {opacity: 0.5}
-              : pressed || focused
+              : pressed
               ? t.atoms.bg_contrast_25
-              : hovered
-              ? t.atoms.bg_contrast_50
               : t.atoms.bg,
           ]}>
           <UserAvatar
@@ -404,7 +404,7 @@ function ProfileCard({
           </View>
         </View>
       )}
-    </Button>
+    </BottomSheetButton>
   )
 }
 

src/components/forms/DateField/index.tsx

@@ -5,7 +5,8 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DateFieldProps} from '#/components/forms/DateField/types'
 import {toSimpleDateString} from '#/components/forms/DateField/utils'
@@ -72,7 +73,7 @@ export function DateField({
                 accessibilityHint={accessibilityHint}
               />
             </View>
-            <Button
+            <BottomSheetButton
               label={_(msg`Done`)}
               onPress={() => control.close()}
               size="large"
@@ -81,7 +82,7 @@ export function DateField({
               <ButtonText>
                 <Trans>Done</Trans>
               </ButtonText>
-            </Button>
+            </BottomSheetButton>
           </View>
         </Dialog.Inner>
       </Dialog.Outer>

src/components/intents/VerifyEmailIntentDialog.tsx

@@ -5,7 +5,8 @@ import {useLingui} from '@lingui/react'
 
 import {useAgent, useSession} from '#/state/session'
 import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
 import {useIntentDialogs} from '#/components/intents/IntentDialogs'
@@ -106,7 +107,7 @@ function Inner({control}: {control: DialogControlProps}) {
         )}
         {status !== 'loading' ? (
           <View style={[a.w_full, a.flex_row, a.gap_sm, {marginLeft: 'auto'}]}>
-            <Button
+            <BottomSheetButton
               label={_(msg`Close`)}
               onPress={() => control.close()}
               variant="solid"
@@ -116,9 +117,9 @@ function Inner({control}: {control: DialogControlProps}) {
               <ButtonText>
                 <Trans>Close</Trans>
               </ButtonText>
-            </Button>
+            </BottomSheetButton>
             {status === 'failure' ? (
-              <Button
+              <BottomSheetButton
                 label={_(msg`Resend Verification Email`)}
                 onPress={onPressResendEmail}
                 variant="solid"
@@ -129,7 +130,7 @@ function Inner({control}: {control: DialogControlProps}) {
                   <Trans>Resend Email</Trans>
                 </ButtonText>
                 {sending ? <Loader size="sm" style={{color: 'white'}} /> : null}
-              </Button>
+              </BottomSheetButton>
             ) : null}
           </View>
         ) : null}

src/components/moderation/LabelsOnMeDialog.tsx

@@ -13,7 +13,8 @@ import {logger} from '#/logger'
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
@@ -139,7 +140,7 @@ function Label({
         </View>
         {!isSelfLabel && (
           <View>
-            <Button
+            <BottomSheetButton
               variant="solid"
               color="secondary"
               size="small"
@@ -148,7 +149,7 @@ function Label({
               <ButtonText>
                 <Trans>Appeal</Trans>
               </ButtonText>
-            </Button>
+            </BottomSheetButton>
           </View>
         )}
       </View>
@@ -275,7 +276,7 @@ function AppealForm({
             ? [a.flex_row, a.justify_between]
             : [{flexDirection: 'column-reverse'}, a.gap_sm]
         }>
-        <Button
+        <BottomSheetButton
           testID="backBtn"
           variant="solid"
           color="secondary"
@@ -283,8 +284,8 @@ function AppealForm({
           onPress={onPressBack}
           label={_(msg`Back`)}>
           <ButtonText>{_(msg`Back`)}</ButtonText>
-        </Button>
+        </BottomSheetButton>
-        <Button
+        <BottomSheetButton
           testID="submitBtn"
           variant="solid"
           color="primary"
@@ -293,7 +294,7 @@ function AppealForm({
           label={_(msg`Submit`)}>
           <ButtonText>{_(msg`Submit`)}</ButtonText>
           {isPending && <ButtonIcon icon={Loader} />}
-        </Button>
+        </BottomSheetButton>
       </View>
     </>
   )

src/screens/Onboarding/StepProfile/index.tsx

@@ -30,6 +30,7 @@ import {
   PlaceholderCanvasRef,
 } from '#/screens/Onboarding/StepProfile/PlaceholderCanvas'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {IconCircle} from '#/components/IconCircle'
@@ -311,7 +312,7 @@ export function StepProfile() {
             />
           </View>
           <View style={[a.pt_4xl]}>
-            <Button
+            <BottomSheetButton
               variant="solid"
               color="primary"
               size="large"
@@ -320,7 +321,7 @@ export function StepProfile() {
               <ButtonText>
                 <Trans>Done</Trans>
               </ButtonText>
-            </Button>
+            </BottomSheetButton>
           </View>
         </Dialog.Inner>
       </Dialog.Outer>

src/view/com/auth/server-input/index.tsx

@@ -6,7 +6,8 @@ import {useLingui} from '@lingui/react'
 import {BSKY_SERVICE} from '#/lib/constants'
 import * as persisted from '#/state/persisted'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import * as ToggleButton from '#/components/forms/ToggleButton'
@@ -124,7 +125,7 @@ export function ServerInputDialog({
               {pdsAddressHistory.length > 0 && (
                 <View style={[a.flex_row, a.flex_wrap, a.mt_xs]}>
                   {pdsAddressHistory.map(uri => (
-                    <Button
+                    <BottomSheetButton
                       key={uri}
                       variant="ghost"
                       color="primary"
@@ -132,7 +133,7 @@ export function ServerInputDialog({
                       style={[a.px_sm, a.py_xs, a.rounded_sm, a.gap_sm]}
                       onPress={() => setCustomAddress(uri)}>
                       <ButtonText>{uri}</ButtonText>
-                    </Button>
+                    </BottomSheetButton>
                   ))}
                 </View>
               )}
@@ -160,7 +161,7 @@ export function ServerInputDialog({
           </View>
 
           <View style={gtMobile && [a.flex_row, a.justify_end]}>
-            <Button
+            <BottomSheetButton
               testID="doneBtn"
               variant="outline"
               color="primary"
@@ -168,7 +169,7 @@ export function ServerInputDialog({
               onPress={() => control.close()}
               label={_(msg`Done`)}>
               <ButtonText>{_(msg`Done`)}</ButtonText>
-            </Button>
+            </BottomSheetButton>
           </View>
         </View>
       </Dialog.ScrollableInner>

src/view/com/composer/GifAltText.tsx

@@ -14,7 +14,8 @@ import {
 import {enforceLen} from '#/lib/strings/helpers'
 import {Gif} from '#/state/queries/tenor'
 import {atoms as a, native, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
@@ -154,7 +155,7 @@ function AltTextInner({
               />
             </TextField.Root>
           </View>
-          <Button
+          <BottomSheetButton
             label={_(msg`Save`)}
             size="large"
             color="primary"
@@ -163,7 +164,7 @@ function AltTextInner({
             <ButtonText>
               <Trans>Save</Trans>
             </ButtonText>
-          </Button>
+          </BottomSheetButton>
         </View>
         {/* below the text input to force tab order */}
         <View>

src/view/com/composer/photos/EditImageDialog.web.tsx

@@ -12,7 +12,8 @@ import {
   manipulateImage,
 } from '#/state/gallery'
 import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
 import {EditImageDialogProps} from './EditImageDialog'
@@ -71,7 +72,7 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
       </View>
 
       <View style={[a.mt_md, a.gap_md]}>
-        <Button
+        <BottomSheetButton
           disabled={!isNew}
           label={_(msg`Save`)}
           size="large"
@@ -81,7 +82,7 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
           <ButtonText>
             <Trans>Save</Trans>
           </ButtonText>
-        </Button>
+        </BottomSheetButton>
       </View>
     </Dialog.Inner>
   )

src/view/com/composer/photos/ImageAltTextDialog.tsx

@@ -8,7 +8,8 @@ import {MAX_ALT_TEXT} from '#/lib/constants'
 import {isWeb} from '#/platform/detection'
 import {ComposerImage} from '#/state/gallery'
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Text} from '#/components/Typography'
@@ -102,7 +103,7 @@ const ImageAltTextInner = ({
             />
           </TextField.Root>
         </View>
-        <Button
+        <BottomSheetButton
           label={_(msg`Save`)}
           disabled={altText.length > MAX_ALT_TEXT || altText === image.alt}
           size="large"
@@ -112,7 +113,7 @@ const ImageAltTextInner = ({
           <ButtonText>
             <Trans>Save</Trans>
           </ButtonText>
-        </Button>
+        </BottomSheetButton>
       </View>
     </Dialog.ScrollableInner>
   )

src/view/com/composer/videos/SubtitleDialog.tsx

@@ -10,6 +10,7 @@ import {LANGUAGES} from '#/locale/languages'
 import {isWeb} from '#/platform/detection'
 import {useLanguagePrefs} from '#/state/preferences'
 import {atoms as a, useTheme, web} from '#/alf'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
@@ -164,7 +165,7 @@ function SubtitleDialogInner({
         )}
 
         <View style={web([a.flex_row, a.justify_end])}>
-          <Button
+          <BottomSheetButton
             label={_(msg`Done`)}
             size={isWeb ? 'small' : 'large'}
             color="primary"
@@ -177,7 +178,7 @@ function SubtitleDialogInner({
             <ButtonText>
               <Trans>Done</Trans>
             </ButtonText>
-          </Button>
+          </BottomSheetButton>
         </View>
       </View>
       <Dialog.Close />
@@ -257,7 +258,7 @@ function SubtitleFileRow({
         </View>
       </View>
 
-      <Button
+      <BottomSheetButton
         label={_(msg`Remove subtitle file`)}
         size="tiny"
         shape="round"
@@ -268,7 +269,7 @@ function SubtitleFileRow({
         }
         style={[a.ml_sm]}>
         <ButtonIcon icon={X} />
-      </Button>
+      </BottomSheetButton>
     </View>
   )
 }

src/view/com/util/post-ctrls/RepostButton.tsx

@@ -7,6 +7,7 @@ import {POST_CTRL_HITSLOP} from '#/lib/constants'
 import {useHaptics} from '#/lib/haptics'
 import {useRequireAuth} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
@@ -92,7 +93,7 @@ let RepostButton = ({
         <Dialog.Inner label={_(msg`Repost or quote post`)}>
           <View style={a.gap_xl}>
             <View style={a.gap_xs}>
-              <Button
+              <BottomSheetButton
                 style={[a.justify_start, a.px_md]}
                 label={
                   isReposted
@@ -115,8 +116,8 @@ let RepostButton = ({
                     ? _(msg`Remove repost`)
                     : _(msg({message: `Repost`, context: 'action'}))}
                 </Text>
-              </Button>
+              </BottomSheetButton>
-              <Button
+              <BottomSheetButton
                 disabled={embeddingDisabled}
                 testID="quoteBtn"
                 style={[a.justify_start, a.px_md]}
@@ -152,9 +153,9 @@ let RepostButton = ({
                     ? _(msg`Quote posts disabled`)
                     : _(msg`Quote post`)}
                 </Text>
-              </Button>
+              </BottomSheetButton>
             </View>
-            <Button
+            <BottomSheetButton
               label={_(msg`Cancel quote post`)}
               onAccessibilityEscape={close}
               onPress={close}
@@ -162,7 +163,7 @@ let RepostButton = ({
               variant="solid"
               color="primary">
               <ButtonText>{_(msg`Cancel`)}</ButtonText>
-            </Button>
+            </BottomSheetButton>
           </View>
         </Dialog.Inner>
       </Dialog.Outer>

src/view/screens/Settings/DisableEmail2FADialog.tsx

@@ -9,7 +9,8 @@ import {useAgent, useSession} from '#/state/session'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock'
@@ -108,7 +109,7 @@ export function DisableEmail2FADialog({
 
           {stage === Stages.Email ? (
             <View style={gtMobile && [a.flex_row, a.justify_end, a.gap_md]}>
-              <Button
+              <BottomSheetButton
                 testID="sendEmailButton"
                 variant="solid"
                 color="primary"
@@ -120,8 +121,8 @@ export function DisableEmail2FADialog({
                   <Trans>Send verification email</Trans>
                 </ButtonText>
                 {isProcessing && <ButtonIcon icon={Loader} />}
-              </Button>
+              </BottomSheetButton>
-              <Button
+              <BottomSheetButton
                 testID="haveCodeButton"
                 variant="ghost"
                 color="primary"
@@ -132,7 +133,7 @@ export function DisableEmail2FADialog({
                 <ButtonText>
                   <Trans>I have a code</Trans>
                 </ButtonText>
-              </Button>
+              </BottomSheetButton>
             </View>
           ) : stage === Stages.ConfirmCode ? (
             <View>
@@ -157,7 +158,7 @@ export function DisableEmail2FADialog({
                 </TextField.Root>
               </View>
               <View style={gtMobile && [a.flex_row, a.justify_end]}>
-                <Button
+                <BottomSheetButton
                   testID="resendCodeBtn"
                   variant="ghost"
                   color="primary"
@@ -168,8 +169,8 @@ export function DisableEmail2FADialog({
                   <ButtonText>
                     <Trans>Resend email</Trans>
                   </ButtonText>
-                </Button>
+                </BottomSheetButton>
-                <Button
+                <BottomSheetButton
                   testID="confirmBtn"
                   variant="solid"
                   color="primary"
@@ -181,7 +182,7 @@ export function DisableEmail2FADialog({
                     <Trans>Confirm</Trans>
                   </ButtonText>
                   {isProcessing && <ButtonIcon icon={Loader} />}
-                </Button>
+                </BottomSheetButton>
               </View>
             </View>
           ) : undefined}

src/view/screens/Settings/ExportCarDialog.tsx

@@ -8,7 +8,8 @@ import {logger} from '#/logger'
 import {useAgent} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
@@ -68,7 +69,7 @@ export function ExportCarDialog({
             </Trans>
           </Text>
 
-          <Button
+          <BottomSheetButton
             variant="solid"
             color="primary"
             size="large"
@@ -79,7 +80,7 @@ export function ExportCarDialog({
               <Trans>Download CAR file</Trans>
             </ButtonText>
             {loading && <ButtonIcon icon={Loader} />}
-          </Button>
+          </BottomSheetButton>
 
           <Text
             style={[