From 550b46a1b5fefb0a30ba9149c3c3fac0f72eeccf Mon Sep 17 00:00:00 2001
From: anmolsinghbhatia <asb.dev.1001@gmail.com>
Date: Mon, 31 Aug 2026 14:10:18 +0530
Subject: [PATCH] fix: address Button migration review on web call sites

Use IconButton for icon-only controls and AnchorButton for link-styled
actions. Add accessible names on render anchors, un-nest link+button
pairs, restore compact header labels, and pass through empty-state
variant/icon props.
---
 .../[workspaceSlug]/(projects)/header.tsx     | 12 ++++++-
 .../(projects)/profile/[userId]/header.tsx    | 12 ++++---
 .../[projectId]/cycles/(list)/header.tsx      | 33 ++++++++++++++-----
 .../[projectId]/modules/(list)/header.tsx     | 33 ++++++++++++++-----
 apps/web/app/(all)/create-workspace/page.tsx  |  7 +++-
 .../account/auth-forms/forgot-password.tsx    |  6 ++--
 .../workspace-active-cycles-upgrade.tsx       |  4 ++-
 .../components/common/new-empty-state.tsx     |  1 +
 .../empty-state/detailed-empty-state-root.tsx |  8 ++---
 .../components/exporter/single-export.tsx     | 18 ++++++++--
 .../global/product-updates/footer.tsx         |  4 ++-
 .../inbox/content/inbox-issue-header.tsx      | 27 ++++++++++-----
 .../components/instance/not-ready-view.tsx    | 13 ++++++--
 .../issues/bulk-operations/upgrade-banner.tsx |  9 ++++-
 .../filters/header/helpers/dropdown.tsx       | 30 ++++++++++++-----
 .../license/modal/card/talk-to-sales.tsx      |  2 +-
 .../components/onboarding/invitations.tsx     |  2 +-
 .../components/onboarding/steps/role/root.tsx |  2 +-
 apps/web/core/components/project/card.tsx     | 24 +++++++-------
 .../web-hooks/generated-hook-details.tsx      |  2 +-
 20 files changed, 174 insertions(+), 75 deletions(-)

diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
index 572ebe6d2e..be884294e2 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
@@ -9,6 +9,7 @@ import { Shapes } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@makeplane/propel/components/button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
 import { HomeIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -37,7 +38,7 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
           </div>
         </Header.LeftItem>
         <Header.RightItem>
-          <span className="my-auto mb-0">
+          <span className="my-auto mb-0 hidden md:inline-flex">
             <Button
               variant="secondary"
               size="md"
@@ -47,6 +48,15 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
               label={t("home.manage_widgets")}
             />
           </span>
+          <span className="my-auto mb-0 md:hidden">
+            <IconButton
+              variant="secondary"
+              size="md"
+              aria-label={t("home.manage_widgets")}
+              icon={<Shapes />}
+              onClick={() => toggleWidgetSettings(true)}
+            />
+          </span>
         </Header.RightItem>
       </Header>
     </>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
index 6233e21921..f66a423eef 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
@@ -19,7 +19,7 @@ import { ProfileIssuesFilter } from "@/components/profile/profile-issues-filter"
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
-import { Button } from "@makeplane/propel/elements/button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
 
 type TUserProfileHeader = {
   userProjectsData: IUserProfileProjectSegregation | undefined;
@@ -96,9 +96,13 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
             ))}
           </CustomMenu>
           <div className="shrink-0 md:hidden">
-            <Button variant="ghost" size="md" stretch="auto" onClick={() => toggleProfileSidebar()}>
-              <PanelRight className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />
-            </Button>
+            <IconButton
+              variant="ghost"
+              size="md"
+              aria-label="Toggle profile sidebar"
+              icon={<PanelRight className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />}
+              onClick={() => toggleProfileSidebar()}
+            />
           </div>
         </div>
       </Header.RightItem>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
index 83c4e05787..e12c08c539 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
@@ -60,15 +60,30 @@ export const CyclesListHeader = observer(function CyclesListHeader() {
       {canUserCreateCycle && currentProjectDetails ? (
         <Header.RightItem>
           <CyclesViewHeader projectId={currentProjectDetails.id} />
-          <Button
-            variant="primary"
-            size="md"
-            stretch="auto"
-            label={t("project_cycles.add_cycle")}
-            onClick={() => {
-              toggleCreateCycleModal(true);
-            }}
-          />
+          <>
+            <span className="block sm:hidden">
+              <Button
+                variant="primary"
+                size="md"
+                stretch="auto"
+                label={t("add")}
+                onClick={() => {
+                  toggleCreateCycleModal(true);
+                }}
+              />
+            </span>
+            <span className="hidden sm:block">
+              <Button
+                variant="primary"
+                size="md"
+                stretch="auto"
+                label={t("project_cycles.add_cycle")}
+                onClick={() => {
+                  toggleCreateCycleModal(true);
+                }}
+              />
+            </span>
+          </>
         </Header.RightItem>
       ) : (
         <></>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
index e694d35942..a9f4904b57 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
@@ -65,15 +65,30 @@ export const ModulesListHeader = observer(function ModulesListHeader() {
       <Header.RightItem>
         <ModuleViewHeader />
         {canUserCreateModule ? (
-          <Button
-            variant="primary"
-            size="md"
-            stretch="auto"
-            label={t("project_module.add_module")}
-            onClick={() => {
-              toggleCreateModuleModal(true);
-            }}
-          />
+          <>
+            <span className="block sm:hidden">
+              <Button
+                variant="primary"
+                size="md"
+                stretch="auto"
+                label={t("add")}
+                onClick={() => {
+                  toggleCreateModuleModal(true);
+                }}
+              />
+            </span>
+            <span className="hidden sm:block">
+              <Button
+                variant="primary"
+                size="md"
+                stretch="auto"
+                label={t("project_module.add_module")}
+                onClick={() => {
+                  toggleCreateModuleModal(true);
+                }}
+              />
+            </span>
+          </>
         ) : (
           <></>
         )}
diff --git a/apps/web/app/(all)/create-workspace/page.tsx b/apps/web/app/(all)/create-workspace/page.tsx
index c903e561fb..b0a7c9c97a 100644
--- a/apps/web/app/(all)/create-workspace/page.tsx
+++ b/apps/web/app/(all)/create-workspace/page.tsx
@@ -99,7 +99,12 @@ const CreateWorkspacePage = observer(function CreateWorkspacePage() {
                   stretch="auto"
                   label={t("workspace_creation.errors.creation_disabled.request_button")}
                   nativeButton={false}
-                  render={<a href={getMailtoHref()} />}
+                  render={
+                    <a
+                      href={getMailtoHref()}
+                      aria-label={t("workspace_creation.errors.creation_disabled.request_button")}
+                    />
+                  }
                 />
               </div>
             </div>
diff --git a/apps/web/core/components/account/auth-forms/forgot-password.tsx b/apps/web/core/components/account/auth-forms/forgot-password.tsx
index df8cb5730b..c35bf547c3 100644
--- a/apps/web/core/components/account/auth-forms/forgot-password.tsx
+++ b/apps/web/core/components/account/auth-forms/forgot-password.tsx
@@ -11,6 +11,7 @@ import { Controller, useForm } from "react-hook-form";
 // icons
 import { CircleCheck } from "lucide-react";
 // plane imports
+import { AnchorButton } from "@makeplane/propel/components/anchor-button";
 import { Button } from "@makeplane/propel/components/button";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
@@ -133,10 +134,9 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
           disabled={!isValid}
           loading={isSubmitting || resendTimerCode > 0}
         />
-        <Button
-          variant="ghost"
+        <AnchorButton
+          variant="primary"
           size="md"
-          stretch="full"
           label={t("auth.common.back_to_sign_in")}
           nativeButton={false}
           render={<Link href="/" />}
diff --git a/apps/web/core/components/active-cycles/workspace-active-cycles-upgrade.tsx b/apps/web/core/components/active-cycles/workspace-active-cycles-upgrade.tsx
index 4f3f9b230f..8c9c43b641 100644
--- a/apps/web/core/components/active-cycles/workspace-active-cycles-upgrade.tsx
+++ b/apps/web/core/components/active-cycles/workspace-active-cycles-upgrade.tsx
@@ -98,7 +98,9 @@ export const WorkspaceActiveCyclesUpgrade = observer(function WorkspaceActiveCyc
               label={t("upgrade")}
               icon={<ProIcon className="h-3.5 w-3.5 text-on-color" />}
               nativeButton={false}
-              render={<a href={MARKETING_PRICING_PAGE_LINK} target="_blank" rel="noreferrer" />}
+              render={
+                <a href={MARKETING_PRICING_PAGE_LINK} target="_blank" rel="noreferrer" aria-label={t("upgrade")} />
+              }
             />
           </div>
           <span className="absolute top-0 left-0">
diff --git a/apps/web/core/components/common/new-empty-state.tsx b/apps/web/core/components/common/new-empty-state.tsx
index 1baaac204f..9b0c63c754 100644
--- a/apps/web/core/components/common/new-empty-state.tsx
+++ b/apps/web/core/components/common/new-empty-state.tsx
@@ -57,6 +57,7 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
                   onClick={primaryButton.onClick}
                   disabled={disabled}
                   label={primaryButton.text}
+                  icon={primaryButton.icon}
                 />
                 <div
                   onMouseEnter={handleMouseEnter}
diff --git a/apps/web/core/components/empty-state/detailed-empty-state-root.tsx b/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
index 3e987ae1bf..03fe2aa48f 100644
--- a/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
+++ b/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
@@ -42,20 +42,20 @@ const sizeClasses = {
 function CustomButton({
   config,
   variant,
-  size,
 }: {
   config: ButtonConfig;
   variant: "primary" | "secondary";
   size: EmptyStateSize;
 }) {
+  const icon = config.prependIcon ?? config.appendIcon;
   return (
     <Button
-      variant="primary"
+      variant={variant}
       size="sm"
       stretch="auto"
       label={config.text}
-      icon={config.appendIcon}
-      iconPosition="end"
+      icon={icon}
+      iconPosition={config.prependIcon ? "start" : "end"}
       onClick={config.onClick}
       disabled={config.disabled}
     />
diff --git a/apps/web/core/components/exporter/single-export.tsx b/apps/web/core/components/exporter/single-export.tsx
index 9f67e196c7..23d1cfacaa 100644
--- a/apps/web/core/components/exporter/single-export.tsx
+++ b/apps/web/core/components/exporter/single-export.tsx
@@ -65,9 +65,21 @@ export function SingleExport({ service, refreshing }: Props) {
         <>
           {service.status == "completed" && (
             <div>
-              <a target="_blank" href={service?.url} rel="noopener noreferrer">
-                <Button variant="primary" size="sm" stretch="full" label={isLoading ? "Downloading..." : "Download"} />
-              </a>
+              <Button
+                variant="primary"
+                size="sm"
+                stretch="full"
+                label={isLoading ? "Downloading..." : "Download"}
+                nativeButton={false}
+                render={
+                  <a
+                    target="_blank"
+                    href={service?.url}
+                    rel="noopener noreferrer"
+                    aria-label={isLoading ? "Downloading..." : "Download"}
+                  />
+                }
+              />
             </div>
           )}
         </>
diff --git a/apps/web/core/components/global/product-updates/footer.tsx b/apps/web/core/components/global/product-updates/footer.tsx
index e2ae29b179..d5de2a3511 100644
--- a/apps/web/core/components/global/product-updates/footer.tsx
+++ b/apps/web/core/components/global/product-updates/footer.tsx
@@ -63,7 +63,9 @@ export function ProductUpdatesFooter() {
         label={t("powered_by_plane_pages")}
         icon={<PlaneLogo className="h-4 w-auto text-primary" />}
         nativeButton={false}
-        render={<a href="https://plane.so/pages" target="_blank" rel="noreferrer" />}
+        render={
+          <a href="https://plane.so/pages" target="_blank" rel="noreferrer" aria-label={t("powered_by_plane_pages")} />
+        }
       />
     </div>
   );
diff --git a/apps/web/core/components/inbox/content/inbox-issue-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
index 4e28160c4a..b94aaac78a 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -369,15 +369,24 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
                   icon={<LinkIcon className="h-2.5 w-2.5" />}
                   onClick={() => handleCopyIssueLink(workItemLink)}
                 />
-                <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
-                  <Button
-                    variant="secondary"
-                    size="md"
-                    stretch="auto"
-                    label={t("inbox_issue.actions.open")}
-                    icon={<NewTabIcon className="h-2.5 w-2.5" />}
-                  />
-                </ControlLink>
+                <Button
+                  variant="secondary"
+                  size="md"
+                  stretch="auto"
+                  label={t("inbox_issue.actions.open")}
+                  icon={<NewTabIcon className="h-2.5 w-2.5" />}
+                  nativeButton={false}
+                  render={
+                    <ControlLink
+                      href={workItemLink}
+                      onClick={() => router.push(workItemLink)}
+                      target="_self"
+                      aria-label={t("inbox_issue.actions.open")}
+                    >
+                      {""}
+                    </ControlLink>
+                  }
+                />
               </div>
             ) : (
               <>
diff --git a/apps/web/core/components/instance/not-ready-view.tsx b/apps/web/core/components/instance/not-ready-view.tsx
index 998055c52e..1ec0454fb6 100644
--- a/apps/web/core/components/instance/not-ready-view.tsx
+++ b/apps/web/core/components/instance/not-ready-view.tsx
@@ -45,9 +45,16 @@ export function InstanceNotReady() {
                 </p>
               </div>
             </div>
-            <a href={GOD_MODE_URL} className="w-72">
-              <Button variant="primary" size="lg" stretch="full" label="Get started" />
-            </a>
+            <span className="w-72">
+              <Button
+                variant="primary"
+                size="lg"
+                stretch="full"
+                label="Get started"
+                nativeButton={false}
+                render={<a href={GOD_MODE_URL} aria-label="Get started" />}
+              />
+            </span>
           </div>
         </div>
       </div>
diff --git a/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx b/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
index 2db6b84bec..5d58cb55e0 100644
--- a/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
+++ b/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
@@ -29,7 +29,14 @@ export function BulkOperationsUpgradeBanner(props: Props) {
             stretch="auto"
             label="Upgrade to One"
             nativeButton={false}
-            render={<a href={MARKETING_PLANE_ONE_PAGE_LINK} target="_blank" rel="noopener noreferrer" />}
+            render={
+              <a
+                href={MARKETING_PLANE_ONE_PAGE_LINK}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Upgrade to One"
+              />
+            }
           />
         </span>
       </div>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
index 6ecdfab98a..fc4e292cb5 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -11,6 +11,7 @@ import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
 // ui
 import { Button } from "@makeplane/propel/components/button";
+import { IconButton } from "@makeplane/propel/components/icon-button";
 
 type Props = {
   children: React.ReactNode;
@@ -46,7 +47,7 @@ export function FiltersDropdown(props: Props) {
 
   return (
     <Popover as="div">
-      {({ open }) => (
+      {() => (
         <>
           <Popover.Button as={React.Fragment}>
             {menuButton ? (
@@ -70,14 +71,25 @@ export function FiltersDropdown(props: Props) {
                   )}
                 </div>
                 <div className="flex @4xl:hidden">
-                  <Button
-                    variant="secondary"
-                    size="md"
-                    stretch="auto"
-                    label={typeof title === "string" ? title : "Filters"}
-                    disabled={disabled}
-                    tabIndex={tabIndex}
-                  />
+                  {miniIcon ? (
+                    <IconButton
+                      variant="secondary"
+                      size="md"
+                      aria-label={typeof title === "string" ? title : "Filters"}
+                      icon={miniIcon}
+                      disabled={disabled}
+                      tabIndex={tabIndex}
+                    />
+                  ) : (
+                    <Button
+                      variant="secondary"
+                      size="md"
+                      stretch="auto"
+                      label={typeof title === "string" ? title : "Filters"}
+                      disabled={disabled}
+                      tabIndex={tabIndex}
+                    />
+                  )}
                 </div>
               </div>
             )}
diff --git a/apps/web/core/components/license/modal/card/talk-to-sales.tsx b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
index 7869d7ddaa..79468a7738 100644
--- a/apps/web/core/components/license/modal/card/talk-to-sales.tsx
+++ b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
@@ -78,7 +78,7 @@ export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSa
               stretch="full"
               label="Talk to Sales"
               nativeButton={false}
-              render={<a href={href} target="_blank" rel="noreferrer" />}
+              render={<a href={href} target="_blank" rel="noreferrer" aria-label="Talk to Sales" />}
             />
           </span>
           {isTrialAllowed && !isSelfHosted && (
diff --git a/apps/web/core/components/onboarding/invitations.tsx b/apps/web/core/components/onboarding/invitations.tsx
index 70878a4056..9484cb71db 100644
--- a/apps/web/core/components/onboarding/invitations.tsx
+++ b/apps/web/core/components/onboarding/invitations.tsx
@@ -112,7 +112,7 @@ export function Invitations(props: Props) {
         <p className="mx-3 flex-shrink-0 text-center text-13 text-placeholder">or</p>
         <hr className="w-full border-strong" />
       </div>
-      <span className="w-full bg-surface-2 text-14">
+      <span className="flex w-full items-center bg-surface-2 text-14">
         <Button
           variant="ghost"
           size="lg"
diff --git a/apps/web/core/components/onboarding/steps/role/root.tsx b/apps/web/core/components/onboarding/steps/role/root.tsx
index 358217b378..1f40b32bb9 100644
--- a/apps/web/core/components/onboarding/steps/role/root.tsx
+++ b/apps/web/core/components/onboarding/steps/role/root.tsx
@@ -146,7 +146,7 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
       {/* Action Buttons */}
       <div className="space-y-3">
         <Button variant="primary" size="lg" stretch="full" label="Continue" type="submit" disabled={isButtonDisabled} />
-        <span className="w-full text-tertiary">
+        <span className="flex w-full [&_button]:text-tertiary">
           <Button variant="ghost" size="lg" stretch="full" label="Skip" onClick={handleSkip} />
         </span>
       </div>
diff --git a/apps/web/core/components/project/card.tsx b/apps/web/core/components/project/card.tsx
index 47ab8d1a6a..3ac0ae03a3 100644
--- a/apps/web/core/components/project/card.tsx
+++ b/apps/web/core/components/project/card.tsx
@@ -353,19 +353,17 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                   ))}
                 {!isMemberOfProject && (
                   <div className="flex items-center">
-                    <span className="!p-0 font-semibold">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        stretch="auto"
-                        label="Join"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setJoinProjectModal(true);
-                        }}
-                      />
-                    </span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      stretch="auto"
+                      label="Join"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setJoinProjectModal(true);
+                      }}
+                    />
                   </div>
                 )}
               </>
diff --git a/apps/web/core/components/web-hooks/generated-hook-details.tsx b/apps/web/core/components/web-hooks/generated-hook-details.tsx
index 795066bc4c..1a00c90fd2 100644
--- a/apps/web/core/components/web-hooks/generated-hook-details.tsx
+++ b/apps/web/core/components/web-hooks/generated-hook-details.tsx
@@ -10,7 +10,7 @@ import { useTranslation } from "@plane/i18n";
 import { Button } from "@makeplane/propel/components/button";
 import type { IWebhook } from "@plane/types";
 // types
-import { WebhookSecretKey } from "./form";
+import { WebhookSecretKey } from "./form/secret-key";
 
 type Props = {
   handleClose: () => void;