feat(Button): leftIcon & rightIcon props

src/app/(marketing)/create-profile/(onboarding)/_components/PromptReferrer.tsx

@@ -94,9 +94,9 @@ export const PromptReferrer: CreateProfileStep = ({ dispatchAction, data }) => {
               finalReferrer?.username !== form.watch("username")
             }
             isLoading={referrer.isLoading}
+            rightIcon={<ArrowRight weight="bold" />}
           >
             Continue
-            <ArrowRight weight="bold" />
           </Button>
         </form>
       </FormProvider>

src/app/(marketing)/create-profile/(onboarding)/_components/PurchasePass.tsx

@@ -15,7 +15,7 @@
 
   const { title, pricingShort } = data.chosenSubscription
 
   useEffect(() => {
     if (didUserPurchase) dispatchAction({ action: "next" })
   }, [didUserPurchase])
 
@@ -24,12 +24,12 @@
       <div className="mt-8 mb-4 px-8">
         <Button
           onClick={() => dispatchAction({ action: "previous" })}
-          className="h-auto p-0"
+          className="h-auto p-0 font-bold font-display"
           size="lg"
           variant="unstyled"
+          leftIcon={<ArrowLeft weight="bold" />}
         >
-          <ArrowLeft weight="bold" />
-          <span className="font-bold font-display">Purchase Pass</span>
+          Purchase Pass
         </Button>
       </div>
       <article className="flex flex-col items-center pb-6 text-center">
@@ -83,9 +83,13 @@
                 <div>Total</div>
                 <div>---</div>
               </div>
-              <Button colorScheme="info" className="w-full" disabled>
+              <Button
+                colorScheme="info"
+                className="w-full"
+                disabled
+                rightIcon={<Info weight="bold" />}
+              >
                 Allow Guild to use your ETH
-                <Info />
               </Button>
               <Button variant="subtle" className="w-full" disabled>
                 Purchase

src/app/(marketing)/create-profile/(onboarding)/_components/StartProfile.tsx

@@ -122,9 +122,9 @@ export const StartProfile: CreateProfileStep = ({ data: chainData }) => {
                 variant="ghost"
                 size="lg"
                 onClick={() => setMethod(CreateMethod.FromBlank)}
+                rightIcon={<ArrowRight weight="bold" />}
               >
                 I don't have a Farcaster profile
-                <ArrowRight weight="bold" />
               </Button>
             </>
           ) : (

src/app/(marketing)/create-profile/page.tsx

@@ -58,13 +58,13 @@
           size="lg"
           className="w-full"
           isLoading={isClient && isWeb3Connected === null}
+          leftIcon={<SignIn weight="bold" />}
         >
-          <SignIn weight="bold" />
-          <span>Sign in</span>
+          Sign in
         </Button>
       </div>
     </div>
   )
 }
 
 export default Page

src/app/(marketing)/profile/[username]/not-found.tsx

@@ -13,8 +13,7 @@
 
       <div className="flex flex-col gap-4 sm:flex-row">
         <a href="/explorer">
-          <Button colorScheme="primary" size="lg">
-            <House weight="bold" />
+          <Button colorScheme="primary" size="lg" leftIcon={<House weight="bold" />}>
             Go to home page
           </Button>
         </a>
@@ -23,4 +22,4 @@
   )
 }
 
 export default NotFound

src/app/(marketing)/profile/_components/EditContributions.tsx

@@ -12,6 +12,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/Dialog"
+import { IconButton } from "@/components/ui/IconButton"
 import { Label } from "@/components/ui/Label"
 import {
   Select,
@@ -54,15 +55,14 @@ const EditContributionCard = ({
   return (
     <CardWithGuildLabel guild={guild}>
       <div className="relative flex flex-col gap-2 p-6">
-        <Button
-          size="icon"
+        <IconButton
+          aria-label="Remove contribution"
+          icon={<X weight="bold" />}
           variant="ghost"
           onClick={deleteContribution.onSubmit}
           isLoading={deleteContribution.isLoading}
-          className="absolute top-2 right-2 size-7"
-        >
-          <X />
-        </Button>
+          className="absolute top-2 right-2 size-7 rounded-full"
+        />
         <Label className="font-extrabold text-muted-foreground text-xs uppercase">
           TOP ROLE
         </Label>
@@ -104,9 +104,13 @@ export const EditContributions = () => {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="solid" size="icon-sm" className="rounded-full">
-          <PencilSimple weight="bold" />
-        </Button>
+        <IconButton
+          aria-label="Edit contribution"
+          icon={<PencilSimple weight="bold" />}
+          variant="solid"
+          size="sm"
+          className="rounded-full"
+        />
       </DialogTrigger>
       <DialogContent size="lg" className="bg-background">
         <DialogHeader>

src/app/(marketing)/profile/_components/EditProfile/EditProfileBanner.tsx

@@ -1,5 +1,5 @@
-import { Button } from "@/components/ui/Button"
 import { FormField, FormItem } from "@/components/ui/Form"
+import { IconButton } from "@/components/ui/IconButton"
 import { Separator } from "@/components/ui/Separator"
 import { Eyedropper, Image as ImageIcon } from "@phosphor-icons/react"
 import { Uploader } from "hooks/usePinata/usePinata"
@@ -39,24 +39,21 @@ export const EditProfileBanner = ({
           <div className="relative flex items-center gap-3">
             <ProfileBackgroundImageUploader
               uploader={backgroundUploader}
-              size="icon"
               variant="ghost"
+              icon={<ImageIcon weight="bold" />}
               tooltipLabel={isImage ? "Change image" : "Upload image"}
               className="text-white"
-            >
-              <ImageIcon weight="bold" size={24} />
-            </ProfileBackgroundImageUploader>
+            />
 
             <Separator orientation="vertical" className="h-6 w-0.5 bg-white/50" />
             <ProfileColorPicker>
-              <Button
+              <IconButton
+                aria-label="Pick color"
                 type="button"
-                size="icon"
+                icon={<Eyedropper weight="bold" />}
                 variant="ghost"
                 className="text-white"
-              >
-                <Eyedropper weight="bold" size={24} />
-              </Button>
+              />
             </ProfileColorPicker>
           </div>
         </FormItem>

src/app/(marketing)/profile/_components/EditProfile/EditProfileDropdown.tsx

@@ -1,11 +1,11 @@
-import { Button } from "@/components/ui/Button"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/DropdownMenu"
+import { IconButton } from "@/components/ui/IconButton"
 import { uploadImageUrlToPinata } from "@/lib/uploadImageUrlToPinata"
 import {
   ArrowsClockwise,
@@ -33,31 +33,37 @@ export const EditProfileDropdown: FunctionComponent<{ uploader: Uploader }> = ({
         className="-bottom-2 absolute right-0 translate-y-full"
         asChild
       >
-        <Button variant="ghost" size="icon-sm">
-          <DotsThreeVertical weight="bold" />
-        </Button>
+        <IconButton
+          aria-label="Open menu"
+          icon={<DotsThreeVertical weight="bold" />}
+          variant="ghost"
+          size="sm"
+        />
       </DropdownMenuTrigger>
       <DropdownMenuContent className="p-0">
         {farcasterProfile && (
-          <DropdownMenuItem
-            className="flex gap-2 px-4 py-6 font-semibold"
-            onClick={() => {
-              if (farcasterProfile.username) {
-                setValue("name", farcasterProfile.username, {
-                  shouldValidate: true,
+          <>
+            <DropdownMenuItem
+              className="flex gap-2 px-4 py-6 font-semibold"
+              onClick={() => {
+                if (farcasterProfile.username) {
+                  setValue("name", farcasterProfile.username, {
+                    shouldValidate: true,
+                  })
+                }
+                if (!farcasterProfile.avatar) return
+                uploadImageUrlToPinata({
+                  onUpload: uploader.onUpload,
+                  image: new URL(farcasterProfile.avatar),
                 })
-              }
-              if (!farcasterProfile.avatar) return
-              uploadImageUrlToPinata({
-                onUpload: uploader.onUpload,
-                image: new URL(farcasterProfile.avatar),
-              })
-            }}
-          >
-            <ArrowsClockwise weight="bold" /> Fill data by Farcaster
-          </DropdownMenuItem>
+              }}
+            >
+              <ArrowsClockwise weight="bold" /> Fill data by Farcaster
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
         )}
-        <DropdownMenuSeparator />
+
         <DropdownMenuItem
           onClick={(e) => {
             // keep dropdown open to show loading state

src/app/(marketing)/profile/_components/EditProfile/ProfileBackgroundImageUploader.tsx

@@ -1,6 +1,8 @@
-import { ButtonProps, buttonVariants } from "@/components/ui/Button"
+import { buttonVariants } from "@/components/ui/Button"
+import { IconButtonProps } from "@/components/ui/IconButton"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
 import { useToast } from "@/components/ui/hooks/useToast"
+import { cn } from "@/lib/utils"
 import { UploadSimple } from "@phosphor-icons/react"
 import Button from "components/common/Button"
 import useDropzone from "hooks/useDropzone"
@@ -10,12 +12,13 @@ import { PropsWithChildren, useState } from "react"
 type Props = {
   uploader: Uploader
   tooltipLabel: string
-} & ButtonProps
+} & Omit<IconButtonProps, "size" | "rightIcon" | "aria-label">
 
 export const ProfileBackgroundImageUploader = ({
   uploader: { isUploading, onUpload },
   children,
   tooltipLabel,
+  icon,
   ...buttonProps
 }: PropsWithChildren<Props>): JSX.Element => {
   const [progress, setProgress] = useState<number>(0)
@@ -45,17 +48,25 @@ export const ProfileBackgroundImageUploader = ({
 
   if (isUploading)
     return (
-      <Button {...buttonProps} isDisabled>
+      <Button {...buttonProps} leftIcon={icon} isDisabled>
         {(progress * 100).toFixed(0)}%
       </Button>
     )
 
   return (
     <Tooltip>
       <TooltipTrigger>
-        <div {...getRootProps()} className={buttonVariants(buttonProps as any)}>
+        <div
+          {...getRootProps()}
+          className={cn(
+            buttonVariants({
+              ...buttonProps,
+              className: [...(buttonProps.className ?? ""), "size-10"],
+            })
+          )}
+        >
           <input {...getInputProps()} hidden />
-          {isDragActive ? <UploadSimple weight="bold" size={24} /> : children}
+          {isDragActive ? <UploadSimple weight="bold" /> : icon}
         </div>
       </TooltipTrigger>
       <TooltipContent side="bottom">{tooltipLabel}</TooltipContent>

src/app/(marketing)/profile/_components/ProfileHero.tsx

@@ -7,7 +7,7 @@ import { ProfileAvatar } from "@/components/ProfileAvatar"
 import { Avatar } from "@/components/ui/Avatar"
 import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
-import { Pencil } from "@phosphor-icons/react"
+import { PencilSimple } from "@phosphor-icons/react/dist/ssr"
 import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard"
 import { useExperienceProgression } from "../_hooks/useExperienceProgression"
 import { useProfile } from "../_hooks/useProfile"
@@ -34,9 +34,9 @@ export const ProfileHero = () => {
             <Card className="absolute top-3 right-0 rounded-xl md:top-8">
               <Button
                 variant="solid"
+                leftIcon={<PencilSimple weight="bold" />}
                 className="max-sm:h-8 max-sm:px-3 max-sm:text-sm"
               >
-                <Pencil weight="bold" />
                 Edit profile
               </Button>
             </Card>

src/app/(marketing)/profile/_components/RecentActivity/RecentActivityFallback.tsx

@@ -19,11 +19,11 @@ const RecentActivityFallback = () => {
         's activity
       </p>
       <Button
+        leftIcon={<SignIn weight="bold" />}
         onClick={() => setIsWalletSelectorModalOpen(true)}
         colorScheme="primary"
       >
-        <SignIn weight="bold" size={24} />
-        <span>Sign in</span>
+        Sign in
       </Button>
     </Card>
   )

src/app/create-guild/_components/CreateGuildButton.tsx

@@ -23,7 +23,7 @@ const CreateGuildButton = () => {
           <Button
             colorScheme="info"
             size="xl"
-            disabled={isWeb3Connected}
+            disabled={!!isWeb3Connected}
             onClick={() => setIsWalletSelectorModalOpen(true)}
             className="w-full"
           >

src/app/error.tsx

@@ -29,15 +29,17 @@ export default function Error({
 
       <div className="flex flex-col gap-4 sm:flex-row">
         <a href="/explorer">
-          <Button colorScheme="primary" size="lg">
-            <House weight="bold" />
+          <Button colorScheme="primary" size="lg" leftIcon={<House weight="bold" />}>
             Go to home page
           </Button>
         </a>
 
-        <Button size="lg" onClick={triggerChat}>
-          <ChatCircle weight="bold" />
-          <span>Contact support</span>
+        <Button
+          size="lg"
+          onClick={triggerChat}
+          leftIcon={<ChatCircle weight="bold" />}
+        >
+          Contact support
         </Button>
       </div>
     </div>

src/app/explorer/_components/YourGuilds.tsx

@@ -51,9 +51,9 @@ export const YourGuilds = () => {
           <Button
             onClick={() => setIsWalletSelectorModalOpen(true)}
             colorScheme="primary"
+            leftIcon={<SignIn weight="bold" />}
           >
-            <SignIn weight="bold" />
-            <span>Sign in</span>
+            Sign in
           </Button>
         )}
       </Card>

src/components/[guild]/AccessHub/components/CreatePageCard.tsx

@@ -21,9 +21,8 @@ const CreatePageCard = () => {
           </span>
         </div>
       </div>
-      <Button variant="outline" onClick={onOpen}>
-        <Plus weight="bold" />
-        <span>Create page</span>
+      <Button variant="outline" onClick={onOpen} leftIcon={<Plus weight="bold" />}>
+        Create page
       </Button>
       <CreateCampaignModal isOpen={isOpen} onClose={onClose} />
     </Card>

src/components/[guild]/Requirements/components/ConnectRequirementPlatformButton.tsx

@@ -105,9 +105,9 @@ const ConnectRequirementPlatformButton = ({
       isLoading={isLoading}
       loadingText={loadingText}
       className={cn(PLATFORM_COLORS[platform], className)}
+      leftIcon={!!IconComponent && <IconComponent />}
       {...props}
     >
-      {!!IconComponent && <IconComponent />}
       {`${isReconnection ? "Reconnect" : "Connect"} ${
         rewards[platform]?.name === "X" ? "" : rewards[platform]?.name
       }`}

src/solutions/components/ConnectPlatformFallback.tsx

@@ -38,8 +38,8 @@ export const ConnectPlatformFallback = ({ platform, children, ...rest }: Props)
         isLoading={isLoading}
         loadingText={loadingText}
         className={PLATFORM_COLORS[platform] ?? ""}
+        leftIcon={reward.icon && <reward.icon />}
       >
-        {reward.icon && <reward.icon />}
         Connect
       </Button>
     </Card>