revert all the button import changes

src/components/AccountList.tsx

@@ -7,9 +7,9 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {type SessionAccount, useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
+import {Button} from './Button'
 import {Text} from './Typography'
 
 export function AccountList({
@@ -51,19 +51,19 @@ export function AccountList({
           <View style={[{borderBottomWidth: 1}, t.atoms.border_contrast_low]} />
         </React.Fragment>
       ))}
-      <BottomSheetButton
+      <Button
         testID="chooseAddAccountBtn"
         style={[a.flex_1]}
         onPress={pendingDid ? undefined : onPressAddAccount}
         label={_(msg`Login to account that is not listed`)}>
-        {({pressed}) => (
+        {({hovered, pressed}) => (
           <View
             style={[
               a.flex_1,
               a.flex_row,
               a.align_center,
               {height: 48},
-              pressed && t.atoms.bg_contrast_25,
+              (hovered || pressed) && t.atoms.bg_contrast_25,
             ]}>
             <Text
               style={[
@@ -78,7 +78,7 @@ export function AccountList({
             <Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
           </View>
         )}
-      </BottomSheetButton>
+      </Button>
     </View>
   )
 }
@@ -103,7 +103,7 @@ function AccountItem({
   }, [account, onSelect])
 
   return (
-    <BottomSheetButton
+    <Button
       testID={`chooseAccountBtn-${account.handle}`}
       key={account.did}
       style={[a.flex_1]}
@@ -113,14 +113,14 @@ function AccountItem({
           ? _(msg`Continue as ${account.handle} (currently signed in)`)
           : _(msg`Sign in as ${account.handle}`)
       }>
-      {({pressed}) => (
+      {({hovered, pressed}) => (
         <View
           style={[
             a.flex_1,
             a.flex_row,
             a.align_center,
             {height: 48},
-            (pressed || isPendingAccount) && t.atoms.bg_contrast_25,
+            (hovered || pressed || isPendingAccount) && t.atoms.bg_contrast_25,
           ]}>
           <View style={a.p_md}>
             <UserAvatar avatar={profile?.avatar} size={24} />
@@ -143,6 +143,6 @@ function AccountItem({
           )}
         </View>
       )}
-    </BottomSheetButton>
+    </Button>
   )
 }

src/components/FeedCard.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import {GestureResponderEvent, View} from 'react-native'
-import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
 import {
   AppBskyActorDefs,
   AppBskyFeedDefs,
@@ -14,7 +13,6 @@ import {useQueryClient} from '@tanstack/react-query'
 
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
 import {precacheFeedFromGeneratorView} from '#/state/queries/feed'
 import {
   useAddSavedFeedsMutation,
@@ -256,13 +254,9 @@ function SaveButtonInner({
   const isPending = isAddSavedFeedPending || isRemovePending
 
   const toggleSave = React.useCallback(
-    async (e: GestureResponderEvent | PressableEvent) => {
+    async (e: GestureResponderEvent) => {
-      // WEB ONLY - this is okay. See `BottomSheetPressable.web.tsx`
-      if (isWeb) {
-        e = e as GestureResponderEvent
       e.preventDefault()
       e.stopPropagation()
-      }
 
       try {
         if (savedFeedConfig) {

src/components/NewskieDialog.tsx

@@ -12,7 +12,6 @@ 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'
@@ -142,7 +141,7 @@ export function NewskieDialog({
             ) : null}
 
             {isNative && (
-              <BottomSheetButton
+              <Button
                 label={_(msg`Close`)}
                 variant="solid"
                 color="secondary"
@@ -152,7 +151,7 @@ export function NewskieDialog({
                 <ButtonText>
                   <Trans>Close</Trans>
                 </ButtonText>
-              </BottomSheetButton>
+              </Button>
             )}
           </View>
 

src/components/ReportDialog/SelectReportOptionView.tsx

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

src/components/ReportDialog/SubmitView.tsx

@@ -10,8 +10,7 @@ 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 {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-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'
@@ -101,7 +100,7 @@ export function SubmitView({
 
   return (
     <View style={[a.gap_2xl]}>
-      <BottomSheetButton
+      <Button
         size="small"
         variant="solid"
         color="secondary"
@@ -109,7 +108,7 @@ export function SubmitView({
         label={_(msg`Go back to previous step`)}
         onPress={goBack}>
         <ButtonIcon icon={ChevronLeft} />
-      </BottomSheetButton>
+      </Button>
 
       <View
         style={[
@@ -212,7 +211,7 @@ export function SubmitView({
             </Text>
           ))}
 
-        <BottomSheetButton
+        <Button
           testID="sendReportBtn"
           size="large"
           variant="solid"
@@ -224,7 +223,7 @@ export function SubmitView({
             <Trans>Send report</Trans>
           </ButtonText>
           {submitting && <ButtonIcon icon={Loader} />}
-        </BottomSheetButton>
+        </Button>
       </View>
     </View>
   )

src/components/StarterPack/QrCodeDialog.tsx

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

src/components/StarterPack/ShareDialog.tsx

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

src/components/StarterPack/Wizard/WizardEditListDialog.tsx

@@ -12,8 +12,7 @@ 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 {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {
   WizardFeedCard,
@@ -112,7 +111,7 @@ export function WizardEditListDialog({
             </Text>
             <View style={{width: 60}}>
               {isWeb && (
-                <BottomSheetButton
+                <Button
                   label={_(msg`Close`)}
                   variant="ghost"
                   color="primary"
@@ -121,7 +120,7 @@ export function WizardEditListDialog({
                   <ButtonText>
                     <Trans>Close</Trans>
                   </ButtonText>
-                </BottomSheetButton>
+                </Button>
               )}
             </View>
           </View>

src/components/StarterPack/Wizard/WizardListCard.tsx

@@ -19,8 +19,7 @@ import {useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Toggle from '#/components/forms/Toggle'
 import {Checkbox} from '#/components/forms/Toggle'
 import {Text} from '#/components/Typography'
@@ -99,7 +98,7 @@ function WizardListCard({
       {btnType === 'checkbox' ? (
         <Checkbox />
       ) : !disabled ? (
-        <BottomSheetButton
+        <Button
           label={_(msg`Remove`)}
           variant="solid"
           color="secondary"
@@ -109,7 +108,7 @@ function WizardListCard({
           <ButtonText>
             <Trans>Remove</Trans>
           </ButtonText>
-        </BottomSheetButton>
+        </Button>
       ) : null}
     </Toggle.Item>
   )

src/components/TagMenu/index.tsx

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

src/components/WhoCanReply.tsx

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

src/components/dialogs/BirthDateSettings.tsx

@@ -14,10 +14,9 @@ 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 {ButtonIcon, ButtonText} from '../Button'
+import {Button, ButtonIcon, ButtonText} from '../Button'
 import {Text} from '../Typography'
 
 export function BirthDateSettingsDialog({
@@ -114,7 +113,7 @@ function BirthdayInner({
       ) : undefined}
 
       <View style={isWeb && [a.flex_row, a.justify_end]}>
-        <BottomSheetButton
+        <Button
           label={hasChanged ? _(msg`Save birthday`) : _(msg`Done`)}
           size="large"
           onPress={onSave}
@@ -124,7 +123,7 @@ function BirthdayInner({
             {hasChanged ? <Trans>Save</Trans> : <Trans>Done</Trans>}
           </ButtonText>
           {isPending && <ButtonIcon icon={Loader} />}
-        </BottomSheetButton>
+        </Button>
       </View>
     </View>
   )

src/components/dialogs/Embed.tsx

@@ -8,13 +8,12 @@ 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 {ButtonIcon, ButtonText} from '../Button'
+import {Button, ButtonIcon, ButtonText} from '../Button'
 
 type EmbedDialogProps = {
   control: Dialog.DialogControlProps
@@ -118,7 +117,7 @@ function EmbedDialogInner({
             />
           </TextField.Root>
         </View>
-        <BottomSheetButton
+        <Button
           label={_(msg`Copy code`)}
           color="primary"
           variant="solid"
@@ -141,7 +140,7 @@ function EmbedDialogInner({
               <Trans>Copy code</Trans>
             </ButtonText>
           )}
-        </BottomSheetButton>
+        </Button>
       </View>
       <Dialog.Close />
     </Dialog.Inner>

src/components/dialogs/EmbedConsent.tsx

@@ -10,9 +10,8 @@ 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 {ButtonText} from '../Button'
+import {Button, ButtonText} from '../Button'
 import {Text} from '../Typography'
 
 export function EmbedConsentDialog({
@@ -76,30 +75,33 @@ export function EmbedConsentDialog({
           </View>
         </View>
         <View style={a.gap_md}>
-          <BottomSheetButton
+          <Button
             style={gtMobile && a.flex_1}
             label={_(msg`Enable external media`)}
             onPress={onShowAllPress}
+            onAccessibilityEscape={control.close}
             color="primary"
             size="large"
             variant="solid">
             <ButtonText>
               <Trans>Enable external media</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
-          <BottomSheetButton
+          <Button
             style={gtMobile && a.flex_1}
             label={_(msg`Enable this source only`)}
             onPress={onShowPress}
+            onAccessibilityEscape={control.close}
             color="secondary"
             size="large"
             variant="solid">
             <ButtonText>
               <Trans>Enable {externalEmbedLabels[source]} only</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
-          <BottomSheetButton
+          <Button
             label={_(msg`No thanks`)}
+            onAccessibilityEscape={control.close}
             onPress={onHidePress}
             color="secondary"
             size="large"
@@ -107,7 +109,7 @@ export function EmbedConsentDialog({
             <ButtonText>
               <Trans>No thanks</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
         </View>
         <Dialog.Close />
       </Dialog.ScrollableInner>

src/components/dialogs/GifSelect.tsx

@@ -20,13 +20,12 @@ 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 {ButtonIcon, ButtonText} from '../Button'
+import {Button, ButtonIcon, ButtonText} from '../Button'
 import {ListFooter, ListMaybePlaceholder} from '../Lists'
 import {GifPreview} from './GifSelect.shared'
 
@@ -149,7 +148,7 @@ function GifList({
         />
 
         {!gtMobile && isWeb && (
-          <BottomSheetButton
+          <Button
             size="small"
             variant="ghost"
             color="secondary"
@@ -157,7 +156,7 @@ function GifList({
             onPress={() => control.close()}
             label={_(msg`Close GIF dialog`)}>
             <ButtonIcon icon={Arrow} size="md" />
-          </BottomSheetButton>
+          </Button>
         )}
 
         <TextField.Root>
@@ -257,7 +256,7 @@ function DialogError({details}: {details?: string}) {
         )}
         details={details}
       />
-      <BottomSheetButton
+      <Button
         label={_(msg`Close dialog`)}
         onPress={() => control.close()}
         color="primary"
@@ -266,7 +265,7 @@ function DialogError({details}: {details?: string}) {
         <ButtonText>
           <Trans>Close</Trans>
         </ButtonText>
-      </BottomSheetButton>
+      </Button>
     </Dialog.ScrollableInner>
   )
 }

src/components/dialogs/MutedWords.tsx

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

src/components/dialogs/PostInteractionSettingsDialog.tsx

@@ -30,8 +30,7 @@ import {
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import * as Toggle from '#/components/forms/Toggle'
@@ -230,6 +229,7 @@ export function PostInteractionSettingsForm({
 }: PostInteractionSettingsFormProps) {
   const t = useTheme()
   const {_} = useLingui()
+  const control = Dialog.useDialogContext()
   const {data: lists} = useMyListsQuery('curate')
   const [quotesEnabled, setQuotesEnabled] = React.useState(
     !(
@@ -432,16 +432,17 @@ export function PostInteractionSettingsForm({
         </View>
       </View>
 
-      <BottomSheetButton
+      <Button
         label={_(msg`Save`)}
         onPress={onSave}
+        onAccessibilityEscape={control.close}
         color="primary"
         size="large"
         variant="solid"
         style={a.mt_xl}>
         <ButtonText>{_(msg`Save`)}</ButtonText>
         {isSaving && <ButtonIcon icon={Loader} position="right" />}
-      </BottomSheetButton>
+      </Button>
     </View>
   )
 }
@@ -461,7 +462,7 @@ function Selectable({
 }) {
   const t = useTheme()
   return (
-    <BottomSheetButton
+    <Button
       disabled={disabled}
       onPress={onPress}
       label={label}
@@ -471,8 +472,7 @@ function Selectable({
         checked: isSelected,
       }}
       style={a.flex_1}>
-      {/* @TODO DIALOG REFACTOR hovered focused */}
+      {({hovered, focused}) => (
-      {({pressed}) => (
         <View
           style={[
             a.flex_1,
@@ -483,7 +483,7 @@ function Selectable({
             a.p_md,
             {height: 40}, // for consistency with checkmark icon visible or not
             t.atoms.bg_contrast_50,
-            pressed && t.atoms.bg_contrast_100,
+            (hovered || focused) && t.atoms.bg_contrast_100,
             isSelected && {
               backgroundColor: t.palette.primary_100,
             },
@@ -497,7 +497,7 @@ function Selectable({
           )}
         </View>
       )}
-    </BottomSheetButton>
+    </Button>
   )
 }
 

src/components/dialogs/Signin.tsx

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

src/components/dms/MessagesNUX.tsx

@@ -9,8 +9,7 @@ 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 {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-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'
@@ -157,7 +156,7 @@ function DialogInner({
             </Toggle.Group>
           </View>
         </View>
-        <BottomSheetButton
+        <Button
           label={_(msg`Start chatting`)}
           accessibilityHint={_(msg`Close modal`)}
           size="large"
@@ -167,7 +166,7 @@ function DialogInner({
           <ButtonText>
             <Trans>Get started</Trans>
           </ButtonText>
-        </BottomSheetButton>
+        </Button>
       </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 {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button} from '#/components/Button'
 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},
           ]}>
-          <BottomSheetButton
+          <Button
             label={_(msg`Close`)}
             size="small"
             shape="round"
@@ -264,7 +264,6 @@ export function SearchablePeopleList({
               a.absolute,
               a.z_20,
               native({
-                top: 2,
                 left: -7,
               }),
               web({
@@ -277,7 +276,7 @@ export function SearchablePeopleList({
             ) : (
               <ChevronLeft size="md" fill={t.palette.contrast_500} />
             )}
-          </BottomSheetButton>
+          </Button>
           <Text
             style={[
               a.z_10,
@@ -364,11 +363,11 @@ function ProfileCard({
   }, [onPress, profile.did])
 
   return (
-    <BottomSheetButton
+    <Button
       disabled={!enabled}
       label={_(msg`Start chat with ${displayName}`)}
       onPress={handleOnPress}>
-      {({pressed}) => (
+      {({hovered, pressed, focused}) => (
         <View
           style={[
             a.flex_1,
@@ -377,11 +376,12 @@ function ProfileCard({
             a.gap_md,
             a.align_center,
             a.flex_row,
-            // @TODO DIALOG REFACTOR focused hovered
             !enabled
               ? {opacity: 0.5}
-              : pressed
+              : pressed || focused
               ? t.atoms.bg_contrast_25
+              : hovered
+              ? t.atoms.bg_contrast_50
               : t.atoms.bg,
           ]}>
           <UserAvatar
@@ -404,7 +404,7 @@ function ProfileCard({
           </View>
         </View>
       )}
-    </BottomSheetButton>
+    </Button>
   )
 }
 

src/components/forms/DateField/index.tsx

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

src/components/intents/VerifyEmailIntentDialog.tsx

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

src/screens/Onboarding/StepProfile/index.tsx

@@ -30,7 +30,6 @@ 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'
@@ -312,7 +311,7 @@ export function StepProfile() {
             />
           </View>
           <View style={[a.pt_4xl]}>
-            <BottomSheetButton
+            <Button
               variant="solid"
               color="primary"
               size="large"
@@ -321,7 +320,7 @@ export function StepProfile() {
               <ButtonText>
                 <Trans>Done</Trans>
               </ButtonText>
-            </BottomSheetButton>
+            </Button>
           </View>
         </Dialog.Inner>
       </Dialog.Outer>

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

@@ -6,8 +6,7 @@ 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 {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-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'
@@ -125,7 +124,7 @@ export function ServerInputDialog({
               {pdsAddressHistory.length > 0 && (
                 <View style={[a.flex_row, a.flex_wrap, a.mt_xs]}>
                   {pdsAddressHistory.map(uri => (
-                    <BottomSheetButton
+                    <Button
                       key={uri}
                       variant="ghost"
                       color="primary"
@@ -133,7 +132,7 @@ export function ServerInputDialog({
                       style={[a.px_sm, a.py_xs, a.rounded_sm, a.gap_sm]}
                       onPress={() => setCustomAddress(uri)}>
                       <ButtonText>{uri}</ButtonText>
-                    </BottomSheetButton>
+                    </Button>
                   ))}
                 </View>
               )}
@@ -161,7 +160,7 @@ export function ServerInputDialog({
           </View>
 
           <View style={gtMobile && [a.flex_row, a.justify_end]}>
-            <BottomSheetButton
+            <Button
               testID="doneBtn"
               variant="outline"
               color="primary"
@@ -169,7 +168,7 @@ export function ServerInputDialog({
               onPress={() => control.close()}
               label={_(msg`Done`)}>
               <ButtonText>{_(msg`Done`)}</ButtonText>
-            </BottomSheetButton>
+            </Button>
           </View>
         </View>
       </Dialog.ScrollableInner>

src/view/com/composer/GifAltText.tsx

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

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

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

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

@@ -8,8 +8,7 @@ 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 {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Text} from '#/components/Typography'
@@ -103,7 +102,7 @@ const ImageAltTextInner = ({
             />
           </TextField.Root>
         </View>
-        <BottomSheetButton
+        <Button
           label={_(msg`Save`)}
           disabled={altText.length > MAX_ALT_TEXT || altText === image.alt}
           size="large"
@@ -113,7 +112,7 @@ const ImageAltTextInner = ({
           <ButtonText>
             <Trans>Save</Trans>
           </ButtonText>
-        </BottomSheetButton>
+        </Button>
       </View>
     </Dialog.ScrollableInner>
   )

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

@@ -10,7 +10,6 @@ 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'
@@ -165,7 +164,7 @@ function SubtitleDialogInner({
         )}
 
         <View style={web([a.flex_row, a.justify_end])}>
-          <BottomSheetButton
+          <Button
             label={_(msg`Done`)}
             size={isWeb ? 'small' : 'large'}
             color="primary"
@@ -178,7 +177,7 @@ function SubtitleDialogInner({
             <ButtonText>
               <Trans>Done</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
         </View>
       </View>
       <Dialog.Close />
@@ -258,7 +257,7 @@ function SubtitleFileRow({
         </View>
       </View>
 
-      <BottomSheetButton
+      <Button
         label={_(msg`Remove subtitle file`)}
         size="tiny"
         shape="round"
@@ -269,7 +268,7 @@ function SubtitleFileRow({
         }
         style={[a.ml_sm]}>
         <ButtonIcon icon={X} />
-      </BottomSheetButton>
+      </Button>
     </View>
   )
 }

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

@@ -7,7 +7,6 @@ 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'
@@ -93,7 +92,7 @@ let RepostButton = ({
         <Dialog.Inner label={_(msg`Repost or quote post`)}>
           <View style={a.gap_xl}>
             <View style={a.gap_xs}>
-              <BottomSheetButton
+              <Button
                 style={[a.justify_start, a.px_md]}
                 label={
                   isReposted
@@ -116,8 +115,8 @@ let RepostButton = ({
                     ? _(msg`Remove repost`)
                     : _(msg({message: `Repost`, context: 'action'}))}
                 </Text>
-              </BottomSheetButton>
+              </Button>
-              <BottomSheetButton
+              <Button
                 disabled={embeddingDisabled}
                 testID="quoteBtn"
                 style={[a.justify_start, a.px_md]}
@@ -153,9 +152,9 @@ let RepostButton = ({
                     ? _(msg`Quote posts disabled`)
                     : _(msg`Quote post`)}
                 </Text>
-              </BottomSheetButton>
+              </Button>
             </View>
-            <BottomSheetButton
+            <Button
               label={_(msg`Cancel quote post`)}
               onAccessibilityEscape={close}
               onPress={close}
@@ -163,7 +162,7 @@ let RepostButton = ({
               variant="solid"
               color="primary">
               <ButtonText>{_(msg`Cancel`)}</ButtonText>
-            </BottomSheetButton>
+            </Button>
           </View>
         </Dialog.Inner>
       </Dialog.Outer>

src/view/screens/Settings/DisableEmail2FADialog.tsx

@@ -9,8 +9,7 @@ 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 {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-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'
@@ -109,7 +108,7 @@ export function DisableEmail2FADialog({
 
           {stage === Stages.Email ? (
             <View style={gtMobile && [a.flex_row, a.justify_end, a.gap_md]}>
-              <BottomSheetButton
+              <Button
                 testID="sendEmailButton"
                 variant="solid"
                 color="primary"
@@ -121,8 +120,8 @@ export function DisableEmail2FADialog({
                   <Trans>Send verification email</Trans>
                 </ButtonText>
                 {isProcessing && <ButtonIcon icon={Loader} />}
-              </BottomSheetButton>
+              </Button>
-              <BottomSheetButton
+              <Button
                 testID="haveCodeButton"
                 variant="ghost"
                 color="primary"
@@ -133,7 +132,7 @@ export function DisableEmail2FADialog({
                 <ButtonText>
                   <Trans>I have a code</Trans>
                 </ButtonText>
-              </BottomSheetButton>
+              </Button>
             </View>
           ) : stage === Stages.ConfirmCode ? (
             <View>
@@ -158,7 +157,7 @@ export function DisableEmail2FADialog({
                 </TextField.Root>
               </View>
               <View style={gtMobile && [a.flex_row, a.justify_end]}>
-                <BottomSheetButton
+                <Button
                   testID="resendCodeBtn"
                   variant="ghost"
                   color="primary"
@@ -169,8 +168,8 @@ export function DisableEmail2FADialog({
                   <ButtonText>
                     <Trans>Resend email</Trans>
                   </ButtonText>
-                </BottomSheetButton>
+                </Button>
-                <BottomSheetButton
+                <Button
                   testID="confirmBtn"
                   variant="solid"
                   color="primary"
@@ -182,7 +181,7 @@ export function DisableEmail2FADialog({
                     <Trans>Confirm</Trans>
                   </ButtonText>
                   {isProcessing && <ButtonIcon icon={Loader} />}
-                </BottomSheetButton>
+                </Button>
               </View>
             </View>
           ) : undefined}

src/view/screens/Settings/ExportCarDialog.tsx

@@ -8,8 +8,7 @@ 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 {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
@@ -69,7 +68,7 @@ export function ExportCarDialog({
             </Trans>
           </Text>
 
-          <BottomSheetButton
+          <Button
             variant="solid"
             color="primary"
             size="large"
@@ -80,7 +79,7 @@ export function ExportCarDialog({
               <Trans>Download CAR file</Trans>
             </ButtonText>
             {loading && <ButtonIcon icon={Loader} />}
-          </BottomSheetButton>
+          </Button>
 
           <Text
             style={[