add button showcases

toolkit/chakra/button.tsx

-/* eslint-disable no-restricted-imports */
 import type { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 import {
   AbsoluteCenter,
@@ -14,14 +13,14 @@ interface ButtonLoadingProps {
 }
 
 export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {
-  active?: boolean;
+  expanded?: boolean;
   selected?: boolean;
   highlighted?: boolean;
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(props, ref) {
-    const { loading, disabled, loadingText, children, active, selected, highlighted, ...rest } = props;
+    const { loading, disabled, loadingText, children, expanded, selected, highlighted, ...rest } = props;
 
     const content = (() => {
       if (loading && !loadingText) {
@@ -49,7 +48,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <ChakraButton
-        { ...(active ? { 'data-active': true } : {}) }
+        { ...(expanded ? { 'data-expanded': true } : {}) }
         { ...(selected ? { 'data-selected': true } : {}) }
         { ...(highlighted ? { 'data-highlighted': true } : {}) }
         { ...(loading ? { 'data-loading': true } : {}) }

toolkit/chakra/close-button.tsx

@@ -5,8 +5,8 @@ import { LuX } from 'react-icons/lu';
 
 import { recipe as closeButtonRecipe } from '../theme/recipes/close-button.recipe';
 
-export interface CloseButtonProps extends Omit<ButtonProps, 'visual' | 'size'> {
-  visual?: 'plain';
+export interface CloseButtonProps extends Omit<ButtonProps, 'variant' | 'size'> {
+  variant?: 'plain';
   size?: 'md';
 }
 

toolkit/chakra/icon-button.tsx

@@ -19,7 +19,7 @@ export const IconButton = React.forwardRef<HTMLDivElement, IconButtonProps>(
           minW="auto"
           flexShrink="0"
           { ...rest }
-          visual={ props.visual ?? 'plain' }
+          variant={ props.variant ?? 'plain' }
         />
       </Skeleton>
     );

toolkit/theme/recipes/button.recipe.ts

@@ -17,14 +17,14 @@ export const recipe = defineRecipe({
     },
   },
   variants: {
-    visual: {
+    variant: {
       solid: {
         bg: 'blue.600',
         color: 'white',
         _hover: {
           bg: 'blue.400',
         },
-        _active: { bg: 'blue.400' },
+        _expanded: { bg: 'blue.400' },
         _loading: {
           '& .chakra-spinner': {
             borderColor: 'white',
@@ -57,7 +57,7 @@ export const recipe = defineRecipe({
           borderColor: 'blue.400',
         },
         // When the dropdown is open, the button should be active
-        _active: {
+        _expanded: {
           bg: 'transparent',
           color: 'blue.400',
           borderColor: 'blue.400',
@@ -111,6 +111,13 @@ export const recipe = defineRecipe({
       hero: {
         bg: 'button.hero.bg',
         color: 'button.hero.fg',
+        _loading: {
+          '& .chakra-spinner': {
+            borderColor: 'white',
+            borderBottomColor: 'spinner.track',
+            borderInlineStartColor: 'spinner.track',
+          },
+        },
         _hover: {
           bg: 'button.hero.bg.hover',
           color: 'button.hero.fg.hover',
@@ -141,7 +148,7 @@ export const recipe = defineRecipe({
         h: 'auto',
         _hover: {
           bg: 'transparent',
-          color: 'link.primary.hovered',
+          color: 'link.primary.hover',
         },
       },
     },
@@ -154,6 +161,6 @@ export const recipe = defineRecipe({
   },
   defaultVariants: {
     size: 'md',
-    visual: 'solid',
+    variant: 'solid',
   },
 });

ui/home/HeroBanner.tsx

@@ -10,7 +10,8 @@ import SearchBar from 'ui/snippets/searchBar/SearchBar';
 import UserProfileDesktop from 'ui/snippets/user/profile/UserProfileDesktop';
 import UserWalletDesktop from 'ui/snippets/user/wallet/UserWalletDesktop';
 
-const BACKGROUND_DEFAULT = 'radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)';
+export const BACKGROUND_DEFAULT =
+  'radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)';
 const TEXT_COLOR_DEFAULT = 'white';
 const BORDER_DEFAULT = 'none';
 
@@ -75,10 +76,10 @@ const HeroBanner = () => {
           </Heading>
           { config.UI.navigation.layout === 'vertical' && (
             <Box display={{ base: 'none', lg: 'flex' }} gap={ 2 }>
-              { config.features.rewards.isEnabled && <RewardsButton visual="hero"/> }
+              { config.features.rewards.isEnabled && <RewardsButton variant="hero"/> }
               {
-                (config.features.account.isEnabled && <UserProfileDesktop buttonVisual="hero"/>) ||
-                (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonVisual="hero"/>)
+                (config.features.account.isEnabled && <UserProfileDesktop buttonVariant="hero"/>) ||
+                (config.features.blockchainInteraction.isEnabled && <UserWalletDesktop buttonVariant="hero"/>)
               }
             </Box>
           ) }

ui/pages/Chakra.tsx

@@ -24,6 +24,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import AlertsShowcase from 'ui/showcases/Alerts';
 import BadgesShowcase from 'ui/showcases/Badges';
+import ButtonShowcase from 'ui/showcases/Button';
 
 const TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
 
@@ -50,30 +51,15 @@ const ChakraShowcases = () => {
         <TabsList>
           <TabsTrigger value="alerts">Alerts</TabsTrigger>
           <TabsTrigger value="badges">Badges</TabsTrigger>
+          <TabsTrigger value="buttons">Buttons</TabsTrigger>
           <TabsTrigger value="unsorted">Unsorted</TabsTrigger>
         </TabsList>
         <AlertsShowcase/>
         <BadgesShowcase/>
+        <ButtonShowcase/>
 
         <TabsContent value="unsorted">
           <VStack align="flex-start" gap={ 6 }>
-            <section>
-              <Heading textStyle="heading.md" mb={ 2 }>Buttons</Heading>
-              <HStack gap={ 4 } flexWrap="wrap">
-                <Button>Solid</Button>
-                <Button visual="outline">Outline</Button>
-                <Button visual="dropdown">Dropdown</Button>
-                <Button visual="dropdown" selected>Dropdown selected</Button>
-                <Button visual="header">Header</Button>
-                <Button visual="header" selected>Header selected</Button>
-                <Button visual="header" selected highlighted>Header highlighted</Button>
-                <Button visual="link">Link</Button>
-                <Button loading loadingText="Solid">Solid</Button>
-                <Button loading loadingText="Outline" visual="outline">Outline</Button>
-                <Button loading>Loading</Button>
-              </HStack>
-            </section>
-
             <section>
               <Heading textStyle="heading.md" mb={ 2 }>Inputs</Heading>
               <Heading textStyle="heading.sm" mb={ 2 }>Regular</Heading>

ui/rewards/RewardsButton.tsx

@@ -13,10 +13,10 @@ import LinkInternal from 'ui/shared/links/LinkInternal';
 
 type Props = {
   size?: ButtonProps['size'];
-  visual?: ButtonProps['visual'];
+  variant?: ButtonProps['variant'];
 };
 
-const RewardsButton = ({ visual = 'header', size }: Props) => {
+const RewardsButton = ({ variant = 'header', size }: Props) => {
   const { isInitialized, apiToken, openLoginModal, dailyRewardQuery, balancesQuery } = useRewardsContext();
   const isMobile = useIsMobile();
   const isLoading = !isInitialized || dailyRewardQuery.isLoading || balancesQuery.isLoading;
@@ -32,7 +32,7 @@ const RewardsButton = ({ visual = 'header', size }: Props) => {
       disabled={ isMobile || isLoading || Boolean(apiToken) }
     >
       <Button
-        visual={ visual }
+        variant={ variant }
         selected={ !isLoading && Boolean(apiToken) }
         flexShrink={ 0 }
         as={ apiToken ? LinkInternal : 'button' }
@@ -49,7 +49,7 @@ const RewardsButton = ({ visual = 'header', size }: Props) => {
       >
         <IconSvg
           name={ dailyRewardQuery.data?.available ? 'merits_with_dot_slim' : 'merits_slim' }
-          boxSize={ visual === 'hero' ? 6 : 5 }
+          boxSize={ variant === 'hero' ? 6 : 5 }
           flexShrink={ 0 }
         />
         <chakra.span

ui/rewards/login/steps/LoginStepContent.tsx

@@ -153,7 +153,7 @@ const LoginStepContent = ({ goNext, closeModal, openAuthModal }: Props) => {
         </Alert>
       ) }
       <Button
-        visual="solid"
+        variant="solid"
         w="full"
         whiteSpace="normal"
         mb={ 4 }

ui/shared/NetworkAddToWallet.tsx

@@ -46,7 +46,7 @@ const NetworkAddToWallet = () => {
   }
 
   return (
-    <Button visual="outline" size="sm" onClick={ handleClick }>
+    <Button variant="outline" size="sm" onClick={ handleClick }>
       <IconSvg name={ WALLETS_INFO[wallet].icon } boxSize={ 5 }/>
       Add { config.chain.name }
     </Button>

ui/showcases/Button.tsx

+import React from 'react';
+
+import { Button } from 'toolkit/chakra/button';
+import { Checkbox } from 'toolkit/chakra/checkbox';
+import { PopoverContent, PopoverRoot, PopoverTrigger, PopoverBody } from 'toolkit/chakra/popover';
+import { BACKGROUND_DEFAULT } from 'ui/home/HeroBanner';
+
+import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
+
+const ButtonShowcase = () => {
+  return (
+    <Container value="buttons">
+      <Section>
+        <SectionHeader>Size</SectionHeader>
+        <SamplesStack>
+          <Sample label="size: xs">
+            <Button size="xs">Content</Button>
+          </Sample>
+          <Sample label="size: sm">
+            <Button size="sm">Content</Button>
+          </Sample>
+          <Sample label="size: md">
+            <Button size="md">Content</Button>
+          </Sample>
+          <Sample label="size: lg">
+            <Button size="lg">Content</Button>
+          </Sample>
+        </SamplesStack>
+      </Section>
+
+      <Section>
+        <SectionHeader>Variants</SectionHeader>
+        <SamplesStack>
+
+          <Sample label="variant: solid">
+            <Button variant="solid">Default</Button>
+            <Button variant="solid" data-hover>Hovered</Button>
+            <Button variant="solid" disabled>Disabled</Button>
+          </Sample>
+
+          <Sample label="variant: outline">
+            <Button variant="outline">Default</Button>
+            <Button variant="outline" data-hover>Hovered</Button>
+            <Button variant="outline" disabled>Disabled</Button>
+          </Sample>
+
+          <Sample label="variant: link">
+            <Button variant="link">Default</Button>
+            <Button variant="link" data-hover>Hovered</Button>
+            <Button variant="link" disabled>Disabled</Button>
+          </Sample>
+
+          <Sample label="variant: dropdown">
+            <PopoverRoot>
+              <PopoverTrigger>
+                <Button variant="dropdown">Default</Button>
+              </PopoverTrigger>
+              <PopoverContent>
+                <PopoverBody>
+                  Popover content
+                </PopoverBody>
+              </PopoverContent>
+            </PopoverRoot>
+            <PopoverRoot>
+              <PopoverTrigger>
+                <Button variant="dropdown" data-hover>Hovered</Button>
+              </PopoverTrigger>
+              <PopoverContent>
+                <PopoverBody>
+                  Popover content
+                </PopoverBody>
+              </PopoverContent>
+            </PopoverRoot>
+            <PopoverRoot>
+              <PopoverTrigger>
+                <Button variant="dropdown" expanded>Expended</Button>
+              </PopoverTrigger>
+              <PopoverContent>
+                <PopoverBody>
+                  Popover content
+                </PopoverBody>
+              </PopoverContent>
+            </PopoverRoot>
+            <PopoverRoot>
+              <PopoverTrigger>
+                <Button variant="dropdown" selected>Selected</Button>
+              </PopoverTrigger>
+              <PopoverContent>
+                <PopoverBody display="flex" flexDirection="column" gap={ 2 }>
+                  <Checkbox defaultChecked>First option</Checkbox>
+                  <Checkbox>Second option</Checkbox>
+                </PopoverBody>
+              </PopoverContent>
+            </PopoverRoot>
+            <Button variant="dropdown" disabled>Disabled</Button>
+          </Sample>
+
+          <Sample label="variant: header">
+            <Button variant="header">Default</Button>
+            <Button variant="header" data-hover>Hovered</Button>
+            <Button variant="header" loading loadingText="Loading">Loading</Button>
+            <PopoverRoot>
+              <PopoverTrigger>
+                <Button variant="header" selected>Selected</Button>
+              </PopoverTrigger>
+              <PopoverContent>
+                <PopoverBody>
+                  User profile menu content
+                </PopoverBody>
+              </PopoverContent>
+            </PopoverRoot>
+            <PopoverRoot>
+              <PopoverTrigger>
+                <Button variant="header" selected expanded>Selected & expended</Button>
+              </PopoverTrigger>
+              <PopoverContent>
+                <PopoverBody>
+                  User profile menu content
+                </PopoverBody>
+              </PopoverContent>
+            </PopoverRoot>
+            <PopoverRoot>
+              <PopoverTrigger>
+                <Button variant="header" selected highlighted>Selected & highlighted</Button>
+              </PopoverTrigger>
+              <PopoverContent>
+                <PopoverBody>
+                  User profile menu content
+                </PopoverBody>
+              </PopoverContent>
+            </PopoverRoot>
+          </Sample>
+
+          <Sample label="variant: hero" p={ 6 } background={ BACKGROUND_DEFAULT }>
+            <Button variant="hero">Default</Button>
+            <Button variant="hero" data-hover>Hovered</Button>
+            <Button variant="hero" loading loadingText="Loading">Loading</Button>
+            <PopoverRoot>
+              <PopoverTrigger>
+                <Button variant="hero" selected>Selected</Button>
+              </PopoverTrigger>
+              <PopoverContent>
+                <PopoverBody>
+                  User profile menu content
+                </PopoverBody>
+              </PopoverContent>
+            </PopoverRoot>
+            <PopoverRoot>
+              <PopoverTrigger>
+                <Button variant="hero" selected expanded>Selected & expended</Button>
+              </PopoverTrigger>
+              <PopoverContent>
+                <PopoverBody>
+                  User profile menu content
+                </PopoverBody>
+              </PopoverContent>
+            </PopoverRoot>
+          </Sample>
+
+          <Sample label="variant: plain">
+            <Button variant="plain">Default</Button>
+            <Button variant="plain" data-hover>Hovered</Button>
+            <Button variant="plain" disabled>Disabled</Button>
+          </Sample>
+        </SamplesStack>
+      </Section>
+
+      <Section>
+        <SectionHeader>Loading</SectionHeader>
+        <SamplesStack>
+          <Sample label="loading: true, loadingText: 'Loading'">
+            <Button loading loadingText="Loading">Content</Button>
+          </Sample>
+          <Sample label="loading: true, loadingText: undefined">
+            <Button loading>Content</Button>
+          </Sample>
+        </SamplesStack>
+      </Section>
+    </Container>
+  );
+};
+
+export default React.memo(ButtonShowcase);

ui/showcases/parts.tsx

-import type { TabsContentProps } from '@chakra-ui/react';
+import type { StackProps, TabsContentProps } from '@chakra-ui/react';
 import { Code, Grid, HStack } from '@chakra-ui/react';
 import React from 'react';
 
@@ -20,9 +20,9 @@ export const SamplesStack = ({ children }: { children: React.ReactNode }) => (
     { children }
   </Grid>
 );
-export const Sample = ({ children, label }: { children: React.ReactNode; label: string }) => (
+export const Sample = ({ children, label, ...props }: { children: React.ReactNode; label: string } & StackProps) => (
   <>
     <Code w="fit-content">{ label }</Code>
-    <HStack gap={ 3 } whiteSpace="pre-wrap" flexWrap="wrap">{ children }</HStack>
+    <HStack gap={ 3 } whiteSpace="pre-wrap" flexWrap="wrap" { ...props }>{ children }</HStack>
   </>
 );

ui/snippets/auth/screens/AuthModalScreenOtpCode.tsx

@@ -110,7 +110,7 @@ const AuthModalScreenOtpCode = ({ email, onSuccess, isAuth }: Props) => {
         <AuthModalFieldOtpCode isDisabled={ isCodeSending }/>
         <ReCaptcha ref={ recaptcha.ref }/>
         <Button
-          visual="link"
+          variant="link"
           columnGap={ 2 }
           mt={ 3 }
           disabled={ isCodeSending }

ui/snippets/auth/screens/AuthModalScreenSelectMethod.tsx

-import { Button, VStack } from '@chakra-ui/react';
+import { VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Screen } from '../types';
 
 import * as mixpanel from 'lib/mixpanel';
+import { Button } from 'toolkit/chakra/button';
 
 interface Props {
   onSelectMethod: (screen: Screen) => void;
@@ -29,8 +30,8 @@ const AuthModalScreenSelectMethod = ({ onSelectMethod }: Props) => {
 
   return (
     <VStack gap={ 3 } mt={ 4 } align="stretch">
-      <Button visual="outline" onClick={ handleConnectWalletClick }>Continue with Web3 wallet</Button>
-      <Button visual="outline" onClick={ handleEmailClick }>Continue with email</Button>
+      <Button variant="outline" onClick={ handleConnectWalletClick }>Continue with Web3 wallet</Button>
+      <Button variant="outline" onClick={ handleEmailClick }>Continue with email</Button>
     </VStack>
   );
 };

ui/snippets/auth/screens/AuthModalScreenSuccessEmail.tsx

-import { chakra, Box, Text, Button } from '@chakra-ui/react';
+import { chakra, Box, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Screen } from '../types';
 import type { UserInfo } from 'types/api/account';
 
 import config from 'configs/app';
+import { Button } from 'toolkit/chakra/button';
 
 interface Props {
   email: string;
@@ -29,7 +30,7 @@ const AuthModalScreenSuccessEmail = ({ email, onConnectWallet, onClose, isAuth,
         </Text>
         <Button
           mt={ 6 }
-          visual="outline"
+          variant="outline"
           onClick={ onClose }
         >
           Got it!
@@ -51,7 +52,7 @@ const AuthModalScreenSuccessEmail = ({ email, onConnectWallet, onClose, isAuth,
         </>
       ) : (
         <Button
-          visual="outline"
+          variant="outline"
           mt={ 6 }
           onClick={ onClose }
         >

ui/snippets/auth/screens/AuthModalScreenSuccessWallet.tsx

-import { chakra, Box, Text, Button, Flex } from '@chakra-ui/react';
+import { chakra, Box, Text, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Screen } from '../types';
@@ -7,6 +7,7 @@ import type { UserInfo } from 'types/api/account';
 import config from 'configs/app';
 import { apos } from 'lib/html-entities';
 import shortenString from 'lib/shortenString';
+import { Button } from 'toolkit/chakra/button';
 
 interface Props {
   address: string;
@@ -31,7 +32,7 @@ const AuthModalScreenSuccessWallet = ({ address, onAddEmail, onClose, isAuth, pr
         </Text>
         <Button
           mt={ 6 }
-          visual="outline"
+          variant="outline"
           onClick={ onClose }
         >
           Got it!
@@ -55,13 +56,13 @@ const AuthModalScreenSuccessWallet = ({ address, onAddEmail, onClose, isAuth, pr
           </Text>
           <Flex mt={ 6 } gap={ 2 }>
             <Button onClick={ handleAddEmailClick }>Add email</Button>
-            <Button visual="link" onClick={ onClose }>I{ apos }ll do it later</Button>
+            <Button variant="link" onClick={ onClose }>I{ apos }ll do it later</Button>
           </Flex>
         </>
       ) : (
         <Button
           mt={ 6 }
-          visual="outline"
+          variant="outline"
           onClick={ onClose }
         >
           Got it!

ui/snippets/networkMenu/NetworkMenuButton.tsx

@@ -14,7 +14,6 @@ const NetworkMenuButton = ({ isActive, onClick, className, ...rest }: Props, ref
   return (
     <IconButton
       className={ className }
-      visual="plain"
       display="inline-flex"
       alignItems="center"
       ref={ ref }

ui/snippets/topBar/DeFiDropdown.tsx

@@ -31,7 +31,7 @@ const DeFiDropdown = () => {
   }
 
   const buttonStyles = {
-    visual: 'solid' as const,
+    variant: 'solid' as const,
     borderRadius: 'sm',
     textStyle: 'xs',
     height: 5,
@@ -50,7 +50,7 @@ const DeFiDropdown = () => {
       <PopoverTrigger>
         <Button
           onClick={ onToggle }
-          active={ open }
+          expanded={ open }
           { ...buttonStyles }
         >
           <chakra.span display={{ base: 'none', lg: 'inline' }} whiteSpace="pre-wrap">

ui/snippets/topBar/NetworkMenu.tsx

@@ -18,7 +18,6 @@ const NetworkMenu = () => {
     >
       <PopoverTrigger>
         <IconButton
-          visual="plain"
           color="link.primary"
           _hover={{ color: 'link.primary.hover' }}
           aria-label="Network menu"

ui/snippets/topBar/settings/Settings.tsx

@@ -21,7 +21,6 @@ const Settings = () => {
     >
       <PopoverTrigger>
         <IconButton
-          visual="plain"
           color="link.primary"
           _hover={{ color: 'link.primary.hover' }}
           borderRadius="sm"

ui/snippets/user/profile/UserProfileButton.tsx

@@ -19,12 +19,12 @@ import { getUserHandle } from './utils';
 interface Props {
   profileQuery: UseQueryResult<UserInfo, unknown>;
   size?: ButtonProps['size'];
-  visual?: ButtonProps['visual'];
+  variant?: ButtonProps['variant'];
   onClick: () => void;
   isPending?: boolean;
 }
 
-const UserProfileButton = ({ profileQuery, size, visual, onClick, isPending }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   const [ isFetched, setIsFetched ] = useState(false);
   const isMobile = useIsMobile();
 
@@ -78,7 +78,7 @@ const UserProfileButton = ({ profileQuery, size, visual, onClick, isPending }: P
       <Button
         ref={ ref }
         size={ size }
-        visual={ visual }
+        variant={ variant }
         onClick={ onClick }
         onFocus={ handleFocus }
         selected={ dataExists }

ui/snippets/user/profile/UserProfileDesktop.tsx

@@ -17,14 +17,14 @@ import UserProfileContent from './UserProfileContent';
 
 interface Props {
   buttonSize?: ButtonProps['size'];
-  buttonVisual?: ButtonProps['visual'];
+  buttonVariant?: ButtonProps['variant'];
 }
 
 const initialScreen = {
   type: config.features.blockchainInteraction.isEnabled ? 'select_method' as const : 'email' as const,
 };
 
-const UserProfileDesktop = ({ buttonSize, buttonVisual = 'header' }: Props) => {
+const UserProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
   const [ authInitialScreen, setAuthInitialScreen ] = React.useState<Screen>(initialScreen);
   const router = useRouter();
 
@@ -78,7 +78,7 @@ const UserProfileDesktop = ({ buttonSize, buttonVisual = 'header' }: Props) => {
           <UserProfileButton
             profileQuery={ profileQuery }
             size={ buttonSize }
-            visual={ buttonVisual }
+            variant={ buttonVariant }
             onClick={ handleProfileButtonClick }
           />
         </PopoverTrigger>

ui/snippets/user/profile/UserProfileMobile.tsx

@@ -75,7 +75,7 @@ const UserProfileMobile = () => {
         <DrawerTrigger>
           <UserProfileButton
             profileQuery={ profileQuery }
-            visual="header"
+            variant="header"
             onClick={ handleProfileButtonClick }
           />
         </DrawerTrigger>

ui/snippets/user/wallet/UserWalletButton.tsx

@@ -11,14 +11,14 @@ import UserIdenticon from '../UserIdenticon';
 
 interface Props {
   size?: ButtonProps['size'];
-  visual?: ButtonProps['visual'];
+  variant?: ButtonProps['variant'];
   isPending?: boolean;
   isAutoConnectDisabled?: boolean;
   address?: string;
   domain?: string;
 }
 
-const UserWalletButton = ({ size, visual, isPending, isAutoConnectDisabled, address, domain }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const UserWalletButton = ({ size, variant, isPending, isAutoConnectDisabled, address, domain }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
 
   const isMobile = useIsMobile();
 
@@ -46,7 +46,7 @@ const UserWalletButton = ({ size, visual, isPending, isAutoConnectDisabled, addr
       <Button
         ref={ ref }
         size={ size }
-        visual={ visual }
+        variant={ variant }
         selected={ Boolean(address) }
         highlighted={ isAutoConnectDisabled }
         textStyle="sm"

ui/snippets/user/wallet/UserWalletDesktop.tsx

@@ -12,10 +12,10 @@ import UserWalletMenuContent from './UserWalletMenuContent';
 
 interface Props {
   buttonSize?: ButtonProps['size'];
-  buttonVisual?: ButtonProps['visual'];
+  buttonVariant?: ButtonProps['variant'];
 }
 
-const UserWalletDesktop = ({ buttonSize, buttonVisual = 'header' }: Props) => {
+const UserWalletDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
   const walletMenu = useDisclosure();
 
   const web3Wallet = useWeb3Wallet({ source: 'Header' });
@@ -54,7 +54,7 @@ const UserWalletDesktop = ({ buttonSize, buttonVisual = 'header' }: Props) => {
       <PopoverTrigger>
         <UserWalletButton
           size={ buttonSize }
-          visual={ buttonVisual }
+          variant={ buttonVariant }
           address={ web3AccountWithDomain.address }
           domain={ web3AccountWithDomain.domain }
           isPending={ isPending }

ui/snippets/user/wallet/UserWalletMobile.tsx

@@ -51,7 +51,7 @@ const UserWalletMobile = () => {
       <DrawerBackdrop/>
       <DrawerTrigger>
         <UserWalletButton
-          visual="header"
+          variant="header"
           address={ web3AccountWithDomain.address }
           domain={ web3AccountWithDomain.domain }
           isPending={ isPending }