From 93282ad8f6c16739ad8eb53495ef25ab503c6ffc Mon Sep 17 00:00:00 2001
From: anmolsinghbhatia <asb.dev.1001@gmail.com>
Date: Fri, 28 Aug 2026 19:03:30 +0530
Subject: [PATCH 1/3] refactor: migrate web @plane/propel Button to
 @makeplane/propel

Replace in-repo Button and getButtonStyling in apps/web with
@makeplane/propel Button. Map sizes sm/base/lg/xl to xs/sm/md/lg,
error variants to danger, and link to ghost. Stretch is required.
Links use render; CustomMenu and dropdown chrome use the styled
element so we do not nest buttons.
---
 .../(projects)/drafts/header.tsx              | 21 ++---
 .../[workspaceSlug]/(projects)/header.tsx     | 21 ++---
 .../profile/[userId]/activity/page.tsx        | 12 ++-
 .../(projects)/profile/[userId]/header.tsx    | 15 +---
 .../(detail)/[archivedIssueId]/page.tsx       |  9 ++-
 .../[projectId]/cycles/(detail)/header.tsx    | 25 +++---
 .../[projectId]/cycles/(list)/header.tsx      | 11 ++-
 .../[projectId]/modules/(detail)/header.tsx   | 40 +++++-----
 .../[projectId]/modules/(list)/header.tsx     | 11 ++-
 .../pages/(detail)/[pageId]/page.tsx          | 21 ++---
 .../[projectId]/pages/(list)/header.tsx       | 13 ++-
 .../views/(detail)/[viewId]/header.tsx        | 10 +--
 .../[projectId]/views/(list)/header.tsx       | 12 ++-
 .../(projects)/stickies/header.tsx            | 10 +--
 .../(projects)/workspace-views/header.tsx     | 12 ++-
 .../settings/(workspace)/members/page.tsx     | 12 ++-
 .../settings/(workspace)/webhooks/page.tsx    | 12 ++-
 .../(settings)/settings/projects/page.tsx     | 22 ++++--
 apps/web/app/(all)/create-workspace/page.tsx  | 23 ++++--
 apps/web/app/(all)/invitations/page.tsx       | 25 +++---
 apps/web/app/error/dev.tsx                    | 12 +--
 apps/web/app/error/prod.tsx                   |  6 +-
 apps/web/app/not-found.tsx                    | 19 +++--
 .../components/account/auth-forms/email.tsx   | 14 +++-
 .../account/auth-forms/forgot-password.tsx    | 33 ++++----
 .../account/auth-forms/password.tsx           | 43 +++++-----
 .../account/auth-forms/reset-password.tsx     | 13 ++-
 .../account/auth-forms/set-password.tsx       | 13 ++-
 .../account/auth-forms/unique-code.tsx        | 21 +++--
 .../account/deactivate-account-modal.tsx      | 16 ++--
 .../workspace-active-cycles-upgrade.tsx       | 20 ++---
 .../analytics/insight-table/root.tsx          | 11 +--
 .../components/analytics/select/project.tsx   |  7 +-
 .../analytics/work-items/priority-chart.tsx   | 11 +--
 .../core/components/api-token/empty-state.tsx |  8 +-
 .../core/components/api-token/modal/form.tsx  | 23 +++---
 .../modal/generated-token-details.tsx         |  6 +-
 .../auth-screens/workspace/not-a-member.tsx   | 28 ++++---
 .../automation/select-month-modal.tsx         | 17 ++--
 .../core/components/common/empty-state.tsx    | 11 +--
 .../common/layout-error-boundary.tsx          |  6 +-
 .../components/common/new-empty-state.tsx     | 21 ++---
 .../core/description-versions/modal.tsx       | 21 +++--
 .../core/filters/date-filter-modal.tsx        | 14 ++--
 .../components/core/image-picker-popover.tsx  | 38 ++++++---
 .../core/modals/bulk-delete-issues-modal.tsx  | 17 ++--
 .../core/modals/change-email-modal.tsx        | 34 +++++---
 .../modals/existing-issues-list-modal.tsx     | 34 ++++----
 .../core/modals/gpt-assistant-popover.tsx     | 24 +++---
 .../core/modals/user-image-upload-modal.tsx   | 29 ++++---
 .../modals/workspace-image-upload-modal.tsx   | 30 ++++---
 .../core/theme/custom-theme-selector.tsx      | 13 ++-
 .../core/theme/download-config-button.tsx     | 13 ++-
 .../core/theme/import-config-button.tsx       | 13 ++-
 .../cycles/archived-cycles/modal.tsx          | 18 +++--
 apps/web/core/components/cycles/form.tsx      | 39 ++++++---
 .../components/cycles/transfer-issues.tsx     | 14 +++-
 .../web/core/components/dropdowns/buttons.tsx | 28 +++----
 apps/web/core/components/dropdowns/layout.tsx | 79 +++++++------------
 .../components/editor/lite-text/toolbar.tsx   | 24 +++---
 .../empty-state/comic-box-button.tsx          | 23 ++++--
 .../empty-state/detailed-empty-state-root.tsx | 16 ++--
 .../components/estimates/create/modal.tsx     | 24 ++++--
 .../components/estimates/delete/modal.tsx     | 24 ++++--
 .../estimates/points/create-root.tsx          | 13 ++-
 .../core/components/exporter/export-form.tsx  | 13 ++-
 .../core/components/exporter/export-modal.tsx | 24 +++---
 .../core/components/exporter/prev-exports.tsx | 37 +++++----
 .../components/exporter/single-export.tsx     |  6 +-
 .../global/product-updates/footer.tsx         | 25 +++---
 .../links/create-update-link-modal.tsx        | 18 +++--
 .../inbox/content/inbox-issue-header.tsx      | 42 +++++-----
 .../components/inbox/inbox-filter/root.tsx    |  7 +-
 .../inbox/inbox-filter/sorting/order-by.tsx   |  9 +--
 .../inbox/modals/create-modal/create-root.tsx | 18 ++---
 .../inbox/modals/snooze-issue-modal.tsx       |  9 ++-
 .../components/instance/not-ready-view.tsx    |  6 +-
 .../integration/single-integration-card.tsx   | 52 ++++++------
 .../components/issues/archive-issue-modal.tsx | 18 +++--
 .../issues/bulk-operations/upgrade-banner.tsx | 20 ++---
 .../issues/confirm-issue-discard.tsx          | 21 ++---
 apps/web/core/components/issues/filters.tsx   | 18 +++--
 apps/web/core/components/issues/header.tsx    | 11 ++-
 .../sub-issues/issues-list/root.tsx           | 12 ++-
 .../issue-detail-widgets/widget-button.tsx    |  9 +--
 .../issue-detail/label/label-list-item.tsx    | 17 ++--
 .../label/select/label-select.tsx             | 16 ++--
 .../links/create-update-link-modal.tsx        | 17 ++--
 .../issues/issue-detail/subscription.tsx      | 22 ++----
 .../filters/header/helpers/dropdown.tsx       | 36 ++++-----
 .../header/mobile-layout-selection.tsx        | 21 +++--
 .../components/issues/issue-modal/form.tsx    | 28 +++----
 .../labels/create-update-label-inline.tsx     | 13 ++-
 .../labels/project-setting-label-list.tsx     |  6 +-
 .../license/modal/card/checkout-button.tsx    | 37 +++++----
 .../license/modal/card/talk-to-sales.tsx      | 16 ++--
 .../modules/archived-modules/modal.tsx        | 18 +++--
 .../components/modules/dropdowns/order-by.tsx | 10 +--
 apps/web/core/components/modules/form.tsx     | 39 ++++++---
 .../modules/links/create-update-modal.tsx     | 17 ++--
 .../onboarding/create-workspace.tsx           | 34 ++++----
 .../components/onboarding/invitations.tsx     | 31 ++++----
 .../components/onboarding/invite-members.tsx  | 16 ++--
 .../components/onboarding/profile-setup.tsx   | 14 +++-
 .../onboarding/steps/profile/root.tsx         |  6 +-
 .../components/onboarding/steps/role/root.tsx | 12 ++-
 .../components/onboarding/steps/team/root.tsx | 16 ++--
 .../onboarding/steps/usecase/root.tsx         | 10 +--
 .../onboarding/steps/workspace/create.tsx     | 24 ++++--
 .../steps/workspace/join-invites.tsx          | 21 +++--
 .../onboarding/switch-account-modal.tsx       | 13 ++-
 .../core/components/onboarding/tour/root.tsx  | 36 ++++++---
 .../core/components/pages/list/order-by.tsx   |  6 +-
 .../pages/modals/export-page-modal.tsx        | 17 ++--
 .../components/pages/modals/page-form.tsx     | 21 +++--
 .../components/pages/version/main-content.tsx | 26 ++++--
 .../profile/activity/download-button.tsx      | 15 +++-
 .../project-states/create-update/form.tsx     | 25 ++++--
 .../project/archive-restore-modal.tsx         | 14 ++--
 apps/web/core/components/project/card.tsx     | 26 +++---
 .../project/confirm-project-member-remove.tsx | 20 +++--
 .../project/create/project-create-buttons.tsx | 25 ++++--
 .../project/delete-project-modal.tsx          | 18 +++--
 .../project/dropdowns/filters/member-list.tsx | 14 ++--
 .../components/project/dropdowns/order-by.tsx | 19 ++---
 .../core/components/project/empty-state.tsx   | 12 +--
 apps/web/core/components/project/form.tsx     | 14 +++-
 apps/web/core/components/project/header.tsx   | 12 ++-
 .../components/project/join-project-modal.tsx | 19 +++--
 .../project/leave-project-modal.tsx           | 17 ++--
 .../core/components/project/member-list.tsx   |  9 ++-
 .../components/project/multi-select-modal.tsx | 16 ++--
 .../project/project-feature-update.tsx        | 21 +++--
 .../project/publish-project/modal.tsx         | 38 +++++----
 .../project/send-project-invitation-modal.tsx | 23 +++---
 .../project/settings/control-section.tsx      | 22 ++++--
 .../projects/settings/intake/header.tsx       | 12 ++-
 .../rich-filters/add-filters/button.tsx       | 42 +++++++---
 .../components/rich-filters/filters-row.tsx   | 46 +++++++----
 .../profile/content/pages/api-tokens.tsx      | 12 ++-
 .../profile/content/pages/general/form.tsx    | 23 ++++--
 .../profile/content/pages/security.tsx        | 20 +++--
 .../core/components/sidebar/add-button.tsx    | 34 ++++----
 .../components/views/filters/order-by.tsx     | 24 +++---
 apps/web/core/components/views/form.tsx       | 39 ++++++---
 .../core/components/web-hooks/empty-state.tsx |  8 +-
 .../web-hooks/form/delete-section.tsx         |  6 +-
 .../core/components/web-hooks/form/form.tsx   | 28 ++++---
 .../components/web-hooks/form/secret-key.tsx  | 14 ++--
 .../web-hooks/generated-hook-details.tsx      |  6 +-
 .../options/snooze/modal.tsx                  | 17 ++--
 .../ConfirmWorkspaceMemberRemove.tsx          | 32 +++++---
 .../workspace/billing/comparison/base.tsx     | 12 +--
 .../billing/comparison/plan-detail.tsx        | 12 ++-
 .../confirm-workspace-member-remove.tsx       | 32 +++++---
 .../workspace/create-workspace-form.tsx       | 25 ++++--
 .../workspace/delete-workspace-form.tsx       | 18 +++--
 .../workspace/delete-workspace-section.tsx    | 12 ++-
 .../components/workspace/edition-badge.tsx    | 10 +--
 .../workspace/invite-modal/actions.tsx        | 30 ++++---
 .../workspace/settings/workspace-details.tsx  | 10 +--
 .../workspace/sidebar/quick-actions.tsx       |  8 +-
 .../core/components/workspace/views/form.tsx  | 31 +++++---
 .../layouts/auth-layout/workspace-wrapper.tsx | 62 ++++++++++-----
 164 files changed, 1884 insertions(+), 1389 deletions(-)

diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
index a063df5256f..880f6f21855 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { DraftIcon } from "@plane/propel/icons";
 import { EIssuesStoreType } from "@plane/types";
 import { Breadcrumbs, Header } from "@plane/ui";
@@ -66,15 +66,16 @@ export const WorkspaceDraftHeader = observer(function WorkspaceDraftHeader() {
 
         <Header.RightItem>
           {joinedProjectIds && joinedProjectIds.length > 0 && (
-            <Button
-              variant="primary"
-              size="lg"
-              className="items-center gap-1"
-              onClick={() => setIsDraftIssueModalOpen(true)}
-              disabled={!isAuthorizedUser}
-            >
-              {t("workspace_draft_issues.draft_an_issue")}
-            </Button>
+            <span className="items-center gap-1">
+              <Button
+                variant="primary"
+                size="md"
+                stretch="auto"
+                label={t("workspace_draft_issues.draft_an_issue")}
+                onClick={() => setIsDraftIssueModalOpen(true)}
+                disabled={!isAuthorizedUser}
+              />
+            </span>
           )}
         </Header.RightItem>
       </Header>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
index f15d7673882..572ebe6d2ee 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import { Shapes } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { HomeIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -37,15 +37,16 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
           </div>
         </Header.LeftItem>
         <Header.RightItem>
-          <Button
-            variant="secondary"
-            size="lg"
-            onClick={() => toggleWidgetSettings(true)}
-            className="my-auto mb-0"
-            prependIcon={<Shapes />}
-          >
-            <div className="hidden sm:hidden md:block">{t("home.manage_widgets")}</div>
-          </Button>
+          <span className="my-auto mb-0">
+            <Button
+              variant="secondary"
+              size="md"
+              stretch="auto"
+              onClick={() => toggleWidgetSettings(true)}
+              icon={<Shapes />}
+              label={t("home.manage_widgets")}
+            />
+          </span>
         </Header.RightItem>
       </Header>
     </>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
index 7bd93646c28..3696d7e49a3 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // components
 import { PageHead } from "@/components/core/page-title";
 import { DownloadActivityButton } from "@/components/profile/activity/download-button";
@@ -64,9 +64,13 @@ function ProfileActivityPage() {
           {activityPages}
           {pageCount < totalPages && resultsCount !== 0 && (
             <div className="flex w-full items-center justify-center text-11">
-              <Button variant="secondary" onClick={handleLoadMore}>
-                {t("common.load_more")}
-              </Button>
+              <Button
+                variant="secondary"
+                size="sm"
+                stretch="auto"
+                label={t("common.load_more")}
+                onClick={handleLoadMore}
+              />
             </div>
           )}
         </div>
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 296b780c91e..6233e21921c 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 "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 
 type TUserProfileHeader = {
   userProjectsData: IUserProfileProjectSegregation | undefined;
@@ -96,16 +96,9 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
             ))}
           </CustomMenu>
           <div className="shrink-0 md:hidden">
-            <Button
-              variant="ghost"
-              size="lg"
-              onClick={() => {
-                toggleProfileSidebar();
-              }}
-              appendIcon={
-                <PanelRight className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />
-              }
-            ></Button>
+            <Button variant="ghost" size="md" stretch="auto" onClick={() => toggleProfileSidebar()}>
+              <PanelRight className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />
+            </Button>
           </div>
         </div>
       </Header.RightItem>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
index 592bf09a50f..e918a60d40d 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
@@ -9,7 +9,7 @@ import { useRouter } from "next/navigation";
 import useSWR from "swr";
 // ui
 import { Banner } from "@plane/propel/banner";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ArchiveIcon } from "@plane/propel/icons";
 import { Loader } from "@plane/ui";
 // components
@@ -74,10 +74,11 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
             action={
               <Button
                 variant="secondary"
+                size="sm"
+                stretch="auto"
+                label="Go to archives"
                 onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/archives/issues/`)}
-              >
-                Go to archives
-              </Button>
+              />
             }
             className="border-b border-subtle"
           />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
index 8f4165010f4..fc50b7fda78 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@@ -8,7 +8,7 @@ import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { ChartNoAxesColumn, PanelRight, SlidersHorizontal } from "lucide-react";
+import { PanelRight, SlidersHorizontal } from "lucide-react";
 // plane imports
 import {
   EIssueFilterType,
@@ -18,7 +18,7 @@ import {
 } from "@plane/constants";
 import { usePlatformOS } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { IconButton } from "@plane/propel/icon-button";
 import { CycleIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -232,22 +232,23 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
 
             {canUserCreateIssue && (
               <>
-                <Button onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
-                  <span className="hidden @4xl:flex">Analytics</span>
-                  <span className="@4xl:hidden">
-                    <ChartNoAxesColumn className="size-3.5" />
-                  </span>
-                </Button>
+                <Button
+                  variant="secondary"
+                  size="md"
+                  stretch="auto"
+                  label="Analytics"
+                  onClick={() => setAnalyticsModal(true)}
+                />
                 {!isCompletedCycle && (
                   <Button
                     variant="primary"
-                    size="lg"
+                    size="md"
+                    stretch="auto"
+                    label={t("issue.add.label")}
                     onClick={() => {
                       toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
                     }}
-                  >
-                    {t("issue.add.label")}
-                  </Button>
+                  />
                 )}
               </>
             )}
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 5e757289535..83c4e057876 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
@@ -9,7 +9,7 @@ import { useParams } from "next/navigation";
 // ui
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CycleIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -62,14 +62,13 @@ export const CyclesListHeader = observer(function CyclesListHeader() {
           <CyclesViewHeader projectId={currentProjectDetails.id} />
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label={t("project_cycles.add_cycle")}
             onClick={() => {
               toggleCreateCycleModal(true);
             }}
-          >
-            <div className="block sm:hidden">{t("add")}</div>
-            <div className="hidden sm:block">{t("project_cycles.add_cycle")}</div>
-          </Button>
+          />
         </Header.RightItem>
       ) : (
         <></>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
index 13613d413bb..5193cd7f52f 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@@ -8,7 +8,7 @@ import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { ChartNoAxesColumn, PanelRight, SlidersHorizontal } from "lucide-react";
+import { PanelRight, SlidersHorizontal } from "lucide-react";
 // plane imports
 import {
   EIssueFilterType,
@@ -16,7 +16,7 @@ import {
   EUserPermissions,
   EUserPermissionsLevel,
 } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ModuleIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
@@ -227,22 +227,26 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
 
           {canUserCreateIssue ? (
             <>
-              <Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
-                <span className="hidden @4xl:flex">Analytics</span>
-                <span className="@4xl:hidden">
-                  <ChartNoAxesColumn className="size-3.5" />
-                </span>
-              </Button>
-              <Button
-                variant="primary"
-                size="lg"
-                className="hidden sm:flex"
-                onClick={() => {
-                  toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
-                }}
-              >
-                Add work item
-              </Button>
+              <span className="hidden md:block">
+                <Button
+                  variant="secondary"
+                  size="md"
+                  stretch="auto"
+                  label="Analytics"
+                  onClick={() => setAnalyticsModal(true)}
+                />
+              </span>
+              <span className="hidden sm:flex">
+                <Button
+                  variant="primary"
+                  size="md"
+                  stretch="auto"
+                  label="Add work item"
+                  onClick={() => {
+                    toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
+                  }}
+                />
+              </span>
             </>
           ) : (
             <></>
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 e5497ed82a5..e694d35942e 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
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ModuleIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -67,14 +67,13 @@ export const ModulesListHeader = observer(function ModulesListHeader() {
         {canUserCreateModule ? (
           <Button
             variant="primary"
+            size="md"
+            stretch="auto"
+            label={t("project_module.add_module")}
             onClick={() => {
               toggleCreateModuleModal(true);
             }}
-            size="lg"
-          >
-            <div className="block sm:hidden">{t("add")}</div>
-            <div className="hidden sm:block">{t("project_module.add_module")}</div>
-          </Button>
+          />
         ) : (
           <></>
         )}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
index fc1f76aa5d4..6ce20ef8688 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
@@ -9,12 +9,9 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import useSWR from "swr";
 // plane types
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { TSearchEntityRequestPayload, TWebhookConnectionQueryParams } from "@plane/types";
 import { EFileAssetType } from "@plane/types";
-// plane ui
-// plane utils
-import { cn } from "@plane/utils";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
 import { PageHead } from "@/components/core/page-title";
@@ -165,12 +162,16 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
         <p className="mt-3 text-center text-13 text-secondary">
           The page you are trying to access doesn{"'"}t exist or you don{"'"}t have permission to view it.
         </p>
-        <Link
-          href={`/${workspaceSlug}/projects/${projectId}/pages`}
-          className={cn(getButtonStyling("secondary", "base"), "mt-5")}
-        >
-          View other Pages
-        </Link>
+        <span className="mt-5">
+          <Button
+            variant="secondary"
+            size="sm"
+            stretch="auto"
+            label="View other Pages"
+            nativeButton={false}
+            render={<Link href={`/${workspaceSlug}/projects/${projectId}/pages`} />}
+          />
+        </span>
       </div>
     );
 
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
index a26a539dd64..a5b543260f5 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
@@ -10,7 +10,7 @@ import { useParams, useRouter, useSearchParams } from "next/navigation";
 // constants
 import { EPageAccess } from "@plane/constants";
 // plane types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PageIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TPage } from "@plane/types";
@@ -79,9 +79,14 @@ export const PagesListHeader = observer(function PagesListHeader() {
       </Header.LeftItem>
       {canCurrentUserCreatePage && (
         <Header.RightItem>
-          <Button variant="primary" size="lg" onClick={handleCreatePage} loading={isCreatingPage}>
-            {isCreatingPage ? "Adding" : "Add page"}
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isCreatingPage ? "Adding" : "Add page"}
+            onClick={handleCreatePage}
+            loading={isCreatingPage}
+          />
         </Header.RightItem>
       )}
     </Header>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
index fa32b71c6a1..eee93e62b0a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
@@ -15,7 +15,7 @@ import {
   EUserPermissions,
   EUserPermissionsLevel,
 } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { LockIcon, ViewsIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
@@ -198,13 +198,13 @@ export const ProjectViewIssuesHeader = observer(function ProjectViewIssuesHeader
         {canUserCreateIssue && (
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label="Add work item"
             onClick={() => {
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
             }}
-          >
-            Add work item
-          </Button>
+          />
         )}
         <div className="hidden md:block">
           <ViewQuickActions
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
index 97339cf30de..f0d0c416991 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ViewsIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -47,9 +47,13 @@ export const ProjectViewsHeader = observer(function ProjectViewsHeader() {
         <Header.RightItem>
           <ViewListHeader />
           <div>
-            <Button variant="primary" size="lg" onClick={() => toggleCreateViewModal(true)}>
-              Add view
-            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label="Add view"
+              onClick={() => toggleCreateViewModal(true)}
+            />
           </div>
         </Header.RightItem>
       </Header>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
index 7eab6a4a7fc..33ff36ea64b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { RecentStickyIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -45,15 +45,15 @@ export const WorkspaceStickyHeader = observer(function WorkspaceStickyHeader() {
           <StickySearch />
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label="Add sticky"
             onClick={() => {
               toggleShowNewSticky(true);
               stickyOperations.create();
             }}
             loading={creatingSticky}
-          >
-            Add sticky
-          </Button>
+          />
         </Header.RightItem>
       </Header>
     </>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
index f4fdddc4ed8..fe75d323985 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE, DEFAULT_GLOBAL_VIEWS_LIST } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ViewsIcon } from "@plane/propel/icons";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, ICustomSearchSelectOption } from "@plane/types";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
@@ -143,9 +143,13 @@ export const GlobalIssuesHeader = observer(function GlobalIssuesHeader() {
               />
             </FiltersDropdown>
           )}
-          <Button variant="primary" size="lg" onClick={() => setCreateViewModal(true)}>
-            {t("workspace_views.add_view")}
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={t("workspace_views.add_view")}
+            onClick={() => setCreateViewModal(true)}
+          />
           <div className="hidden md:block">
             {viewDetails && <WorkspaceViewQuickActions workspaceSlug={workspaceSlug?.toString()} view={viewDetails} />}
             {isDefaultView && defaultViewDetails && (
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
index 0c7ea4e12a8..4e3466a3d92 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // types
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { SearchIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspaceBulkInviteFormData } from "@plane/types";
@@ -136,9 +136,13 @@ const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsP
               memberType="workspace"
             />
             {canPerformWorkspaceAdminActions && (
-              <Button variant="primary" size="lg" onClick={() => setInviteModal(true)}>
-                {t("workspace_settings.settings.members.add_member")}
-              </Button>
+              <Button
+                variant="primary"
+                size="md"
+                stretch="auto"
+                label={t("workspace_settings.settings.members.add_member")}
+                onClick={() => setInviteModal(true)}
+              />
             )}
           </div>
         </div>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
index 099a0ee40aa..5a279c7411a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
@@ -10,7 +10,7 @@ import useSWR from "swr";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // components
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
@@ -78,9 +78,13 @@ function WebhooksListPage({ params }: Route.ComponentProps) {
           title={t("workspace_settings.settings.webhooks.title")}
           description={t("workspace_settings.settings.webhooks.description")}
           control={
-            <Button variant="primary" size="lg" onClick={() => setShowCreateWebhookModal(true)}>
-              {t("workspace_settings.settings.webhooks.add_webhook")}
-            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={t("workspace_settings.settings.webhooks.add_webhook")}
+              onClick={() => setShowCreateWebhookModal(true)}
+            />
           }
         />
         {Object.keys(webhooks).length > 0 ? (
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
index 1d381547d45..f6967c3785b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
@@ -8,8 +8,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTheme } from "next-themes";
 // plane imports
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { cn } from "@plane/utils";
+import { Button } from "@makeplane/propel/components/button";
 // assets
 import ProjectDarkEmptyState from "@/app/assets/empty-state/project-settings/no-projects-dark.png?url";
 import ProjectLightEmptyState from "@/app/assets/empty-state/project-settings/no-projects-light.png?url";
@@ -31,10 +30,21 @@ function ProjectSettingsPage() {
         need to get things done.
       </div>
       <div className="flex gap-2">
-        <Link href="https://plane.so/" target="_blank" className={cn(getButtonStyling("secondary", "base"))}>
-          Learn more about projects
-        </Link>
-        <Button onClick={() => toggleCreateProjectModal(true)}>Start your first project</Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          label="Learn more about projects"
+          nativeButton={false}
+          render={<Link href="https://plane.so/" target="_blank" />}
+        />
+        <Button
+          variant="primary"
+          size="sm"
+          stretch="auto"
+          label="Start your first project"
+          onClick={() => toggleCreateProjectModal(true)}
+        />
       </div>
     </div>
   );
diff --git a/apps/web/app/(all)/create-workspace/page.tsx b/apps/web/app/(all)/create-workspace/page.tsx
index 38087189cc3..c903e561fbf 100644
--- a/apps/web/app/(all)/create-workspace/page.tsx
+++ b/apps/web/app/(all)/create-workspace/page.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button, getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlaneLogo } from "@plane/propel/icons";
 import type { IWorkspace } from "@plane/types";
 // assets
@@ -86,12 +86,21 @@ const CreateWorkspacePage = observer(function CreateWorkspacePage() {
                 {t("workspace_creation.errors.creation_disabled.description")}
               </p>
               <div className="mt-6 flex gap-4">
-                <Button variant="primary" onClick={() => router.back()}>
-                  {t("common.go_back")}
-                </Button>
-                <a href={getMailtoHref()} className={getButtonStyling("secondary", "base")}>
-                  {t("workspace_creation.errors.creation_disabled.request_button")}
-                </a>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  stretch="auto"
+                  label={t("common.go_back")}
+                  onClick={() => router.back()}
+                />
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  stretch="auto"
+                  label={t("workspace_creation.errors.creation_disabled.request_button")}
+                  nativeButton={false}
+                  render={<a href={getMailtoHref()} />}
+                />
               </div>
             </div>
           ) : (
diff --git a/apps/web/app/(all)/invitations/page.tsx b/apps/web/app/(all)/invitations/page.tsx
index 0da54f0a888..cbeb829fc04 100644
--- a/apps/web/app/(all)/invitations/page.tsx
+++ b/apps/web/app/(all)/invitations/page.tsx
@@ -14,7 +14,7 @@ import { CheckCircle2 } from "lucide-react";
 import { ROLE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlaneLogo } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspaceMemberInvitation } from "@plane/types";
@@ -162,21 +162,22 @@ function UserInvitationsPage() {
                 <div className="flex items-center gap-3">
                   <Button
                     variant="primary"
+                    size="md"
+                    stretch="auto"
+                    label={t("accept_and_join")}
                     type="submit"
-                    size="lg"
                     onClick={submitInvitations}
                     disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
                     loading={isJoiningWorkspaces}
-                  >
-                    {t("accept_and_join")}
-                  </Button>
-                  <Link href={`/${redirectWorkspaceSlug}`}>
-                    <span>
-                      <Button variant="secondary" size="lg">
-                        {t("go_home")}
-                      </Button>
-                    </span>
-                  </Link>
+                  />
+                  <Button
+                    variant="secondary"
+                    size="md"
+                    stretch="auto"
+                    label={t("go_home")}
+                    nativeButton={false}
+                    render={<Link href={`/${redirectWorkspaceSlug}`} />}
+                  />
                 </div>
               </div>
             </div>
diff --git a/apps/web/app/error/dev.tsx b/apps/web/app/error/dev.tsx
index 0269dcbdcb1..60d2c180808 100644
--- a/apps/web/app/error/dev.tsx
+++ b/apps/web/app/error/dev.tsx
@@ -7,7 +7,7 @@
 // plane imports
 import { isRouteErrorResponse } from "react-router";
 import { Banner } from "@plane/propel/banner";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Card, ECardVariant } from "@plane/propel/card";
 import { InfoFillIcon } from "@plane/propel/icons";
 
@@ -19,14 +19,8 @@ interface ErrorActionsProps {
 function ErrorActions({ onGoHome, onReload }: ErrorActionsProps) {
   return (
     <div className="flex gap-3 pt-2">
-      <Button variant="primary" size="lg" onClick={onGoHome}>
-        Go to home
-      </Button>
-      {onReload && (
-        <Button variant="secondary" size="lg" onClick={onReload}>
-          Reload page
-        </Button>
-      )}
+      <Button variant="primary" size="md" stretch="auto" label="Go to home" onClick={onGoHome} />
+      {onReload && <Button variant="secondary" size="md" stretch="auto" label="Reload page" onClick={onReload} />}
     </div>
   );
 }
diff --git a/apps/web/app/error/prod.tsx b/apps/web/app/error/prod.tsx
index a8d61829e35..0b23507bb3a 100644
--- a/apps/web/app/error/prod.tsx
+++ b/apps/web/app/error/prod.tsx
@@ -6,7 +6,7 @@
 
 import { useTheme } from "next-themes";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // assets
 import maintenanceModeDarkModeImage from "@/app/assets/instance/maintenance-mode-dark.svg?url";
 import maintenanceModeLightModeImage from "@/app/assets/instance/maintenance-mode-light.svg?url";
@@ -80,9 +80,7 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
           </div>
 
           <div className="flex items-center justify-start gap-6">
-            <Button variant="primary" size="lg" onClick={onGoHome}>
-              Go to home
-            </Button>
+            <Button variant="primary" size="md" stretch="auto" label="Go to home" onClick={onGoHome} />
           </div>
         </div>
       </div>
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
index 13763951ce1..651982260f0 100644
--- a/apps/web/app/not-found.tsx
+++ b/apps/web/app/not-found.tsx
@@ -6,7 +6,7 @@
 
 import Link from "next/link";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // images
 import Image404 from "@/app/assets/404.svg?url";
 // types
@@ -32,13 +32,16 @@ function PageNotFound() {
               temporarily unavailable.
             </p>
           </div>
-          <Link href="/">
-            <span className="flex justify-center">
-              <Button variant="secondary" size="lg">
-                Go to Home
-              </Button>
-            </span>
-          </Link>
+          <span className="flex justify-center">
+            <Button
+              variant="secondary"
+              size="md"
+              stretch="auto"
+              label="Go to Home"
+              nativeButton={false}
+              render={<Link href="/" />}
+            />
+          </span>
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/account/auth-forms/email.tsx b/apps/web/core/components/account/auth-forms/email.tsx
index 7bf76ca0ef2..e6ec49981c5 100644
--- a/apps/web/core/components/account/auth-forms/email.tsx
+++ b/apps/web/core/components/account/auth-forms/email.tsx
@@ -13,7 +13,7 @@ import { CircleAlert, XCircle } from "lucide-react";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IEmailCheckData } from "@plane/types";
 import { Spinner } from "@plane/ui";
 import { checkEmailValidity } from "@plane/utils";
@@ -101,9 +101,15 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
           </p>
         )}
       </div>
-      <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-        {isSubmitting ? <Spinner height="20px" width="20px" /> : t("common.continue")}
-      </Button>
+      <Button
+        type="submit"
+        variant="primary"
+        size="lg"
+        disabled={isButtonDisabled}
+        stretch="full"
+        loading={isSubmitting}
+        label={t("common.continue")}
+      />
     </form>
   );
 });
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 8054944987f..df8cb5730b1 100644
--- a/apps/web/core/components/account/auth-forms/forgot-password.tsx
+++ b/apps/web/core/components/account/auth-forms/forgot-password.tsx
@@ -11,13 +11,12 @@ import { Controller, useForm } from "react-hook-form";
 // icons
 import { CircleCheck } from "lucide-react";
 // plane imports
+import { Button } from "@makeplane/propel/components/button";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@plane/i18n";
-import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-
-import { cn, checkEmailValidity } from "@plane/utils";
+import { checkEmailValidity } from "@plane/utils";
 // hooks
 import useTimer from "@/hooks/use-timer";
 // services
@@ -122,20 +121,26 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
           )}
         </div>
         <Button
-          type="submit"
           variant="primary"
-          className="w-full"
-          size="xl"
+          size="lg"
+          stretch="full"
+          label={
+            resendTimerCode > 0
+              ? t("auth.common.resend_in", { seconds: resendTimerCode })
+              : t("auth.forgot_password.send_reset_link")
+          }
+          type="submit"
           disabled={!isValid}
           loading={isSubmitting || resendTimerCode > 0}
-        >
-          {resendTimerCode > 0
-            ? t("auth.common.resend_in", { seconds: resendTimerCode })
-            : t("auth.forgot_password.send_reset_link")}
-        </Button>
-        <Link href="/" className={cn("w-full", getButtonStyling("link", "lg"))}>
-          {t("auth.common.back_to_sign_in")}
-        </Link>
+        />
+        <Button
+          variant="ghost"
+          size="md"
+          stretch="full"
+          label={t("auth.common.back_to_sign_in")}
+          nativeButton={false}
+          render={<Link href="/" />}
+        />
       </form>
     </FormContainer>
   );
diff --git a/apps/web/core/components/account/auth-forms/password.tsx b/apps/web/core/components/account/auth-forms/password.tsx
index c98ffff3410..4fe51acf812 100644
--- a/apps/web/core/components/account/auth-forms/password.tsx
+++ b/apps/web/core/components/account/auth-forms/password.tsx
@@ -13,7 +13,7 @@ import { Eye, EyeOff, Info, XCircle } from "lucide-react";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CloseIcon } from "@plane/propel/icons";
 import { PasswordStrengthIndicator, Spinner } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
@@ -280,31 +280,36 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
         <div className="space-y-2.5">
           {mode === EAuthModes.SIGN_IN ? (
             <>
-              <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-                {isSubmitting ? (
-                  <Spinner height="20px" width="20px" />
-                ) : isSMTPConfigured ? (
-                  t("common.continue")
-                ) : (
-                  t("common.go_to_workspace")
-                )}
-              </Button>
+              <Button
+                type="submit"
+                variant="primary"
+                size="lg"
+                stretch="full"
+                disabled={isButtonDisabled}
+                loading={isSubmitting}
+                label={isSMTPConfigured ? t("common.continue") : t("common.go_to_workspace")}
+              />
               {isSMTPConfigured && (
                 <Button
+                  variant="secondary"
+                  size="lg"
+                  stretch="full"
+                  label={t("auth.common.sign_in_with_unique_code")}
                   type="button"
                   onClick={redirectToUniqueCodeSignIn}
-                  variant="secondary"
-                  className="w-full"
-                  size="xl"
-                >
-                  {t("auth.common.sign_in_with_unique_code")}
-                </Button>
+                />
               )}
             </>
           ) : (
-            <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
-            </Button>
+            <Button
+              type="submit"
+              variant="primary"
+              size="lg"
+              disabled={isButtonDisabled}
+              stretch="full"
+              loading={isSubmitting}
+              label={"Create account"}
+            />
           )}
         </div>
       </form>
diff --git a/apps/web/core/components/account/auth-forms/reset-password.tsx b/apps/web/core/components/account/auth-forms/reset-password.tsx
index 1e8f1c92082..b308155dffd 100644
--- a/apps/web/core/components/account/auth-forms/reset-password.tsx
+++ b/apps/web/core/components/account/auth-forms/reset-password.tsx
@@ -10,10 +10,10 @@ import { useSearchParams } from "next/navigation";
 // icons
 import { Eye, EyeOff } from "lucide-react";
 // ui
+import { Button } from "@makeplane/propel/components/button";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
 import { PasswordStrengthIndicator } from "@plane/ui";
 // components
 import { getPasswordStrength } from "@plane/utils";
@@ -196,9 +196,14 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
               <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
             )}
         </div>
-        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-          {t("auth.common.password.submit")}
-        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          stretch="full"
+          label={t("auth.common.password.submit")}
+          type="submit"
+          disabled={isButtonDisabled}
+        />
       </form>
     </FormContainer>
   );
diff --git a/apps/web/core/components/account/auth-forms/set-password.tsx b/apps/web/core/components/account/auth-forms/set-password.tsx
index 4863a027185..606b2ae3757 100644
--- a/apps/web/core/components/account/auth-forms/set-password.tsx
+++ b/apps/web/core/components/account/auth-forms/set-password.tsx
@@ -14,7 +14,7 @@ import { Eye, EyeOff } from "lucide-react";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { PasswordStrengthIndicator } from "@plane/ui";
 // components
@@ -199,9 +199,14 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
               <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
             )}
         </div>
-        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-          {t("common.continue")}
-        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          stretch="full"
+          label={t("common.continue")}
+          type="submit"
+          disabled={isButtonDisabled}
+        />
       </form>
     </FormContainer>
   );
diff --git a/apps/web/core/components/account/auth-forms/unique-code.tsx b/apps/web/core/components/account/auth-forms/unique-code.tsx
index 832b98facd1..e355dca7bc8 100644
--- a/apps/web/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/web/core/components/account/auth-forms/unique-code.tsx
@@ -6,11 +6,10 @@
 
 import { useEffect, useState } from "react";
 import { CircleCheck, XCircle } from "lucide-react";
+import { Button } from "@makeplane/propel/components/button";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { API_BASE_URL } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { Spinner } from "@plane/ui";
 // constants
 // helpers
 import { EAuthModes } from "@/helpers/authentication.helper";
@@ -165,15 +164,15 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
       </div>
 
       <div className="space-y-2.5">
-        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-          {isRequestingNewCode ? (
-            t("auth.common.unique_code.sending_code")
-          ) : isSubmitting ? (
-            <Spinner height="20px" width="20px" />
-          ) : (
-            t("common.continue")
-          )}
-        </Button>
+        <Button
+          type="submit"
+          variant="primary"
+          size="lg"
+          stretch="full"
+          disabled={isButtonDisabled}
+          loading={isSubmitting}
+          label={isRequestingNewCode ? t("auth.common.unique_code.sending_code") : t("common.continue")}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/account/deactivate-account-modal.tsx b/apps/web/core/components/account/deactivate-account-modal.tsx
index f4dba2a81c7..4d3cdeb56e8 100644
--- a/apps/web/core/components/account/deactivate-account-modal.tsx
+++ b/apps/web/core/components/account/deactivate-account-modal.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TrashIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -81,12 +81,14 @@ export function DeactivateAccountModal(props: Props) {
         </div>
       </div>
       <div className="mb-2 flex items-center justify-end gap-2 p-4 sm:px-6">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          {t("cancel")}
-        </Button>
-        <Button variant="error-fill" size="lg" onClick={handleDeleteAccount}>
-          {isDeactivating ? t("deactivating") : t("confirm")}
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label={t("cancel")} onClick={handleClose} />
+        <Button
+          variant="danger"
+          size="md"
+          stretch="auto"
+          label={isDeactivating ? t("deactivating") : t("confirm")}
+          onClick={handleDeleteAccount}
+        />
       </div>
     </ModalCore>
   );
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 ff1ee254394..4f3f9b230f9 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
@@ -9,7 +9,7 @@ import { AlertOctagon, BarChart4, CircleDashed, Folder, Microscope } from "lucid
 // plane imports
 import { MARKETING_PRICING_PAGE_LINK } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { SearchIcon } from "@plane/propel/icons";
 import { ContentWrapper } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -91,15 +91,15 @@ export const WorkspaceActiveCyclesUpgrade = observer(function WorkspaceActiveCyc
             <p className="text-14 font-medium text-tertiary">{t("active_cycles_description")}</p>
           </div>
           <div className="flex items-center gap-3">
-            <a
-              className={`${getButtonStyling("primary", "base")} cursor-pointer`}
-              href={MARKETING_PRICING_PAGE_LINK}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <ProIcon className="h-3.5 w-3.5 text-on-color" />
-              {t("upgrade")}
-            </a>
+            <Button
+              variant="primary"
+              size="sm"
+              stretch="auto"
+              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" />}
+            />
           </div>
           <span className="absolute top-0 left-0">
             <img
diff --git a/apps/web/core/components/analytics/insight-table/root.tsx b/apps/web/core/components/analytics/insight-table/root.tsx
index 9607d6e9582..d343e468350 100644
--- a/apps/web/core/components/analytics/insight-table/root.tsx
+++ b/apps/web/core/components/analytics/insight-table/root.tsx
@@ -7,7 +7,7 @@
 import type { ColumnDef, Row, Table } from "@tanstack/react-table";
 import { Download } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { AnalyticsTableDataMap, TAnalyticsTabsBase } from "@plane/types";
 import { DataTable } from "./data-table";
 import { TableLoader } from "./loader";
@@ -39,11 +39,12 @@ export function InsightTable<T extends Exclude<TAnalyticsTabsBase, "overview">>(
         actions={(table: Table<AnalyticsTableDataMap[T]>) => (
           <Button
             variant="secondary"
-            prependIcon={<Download className="h-3.5 w-3.5" />}
+            size="sm"
+            stretch="auto"
+            icon={<Download className="h-3.5 w-3.5" />}
             onClick={() => onExport?.(table.getFilteredRowModel().rows)}
-          >
-            <div>{t("exporter.csv.short_description")}</div>
-          </Button>
+            label={t("exporter.csv.short_description")}
+          />
         )}
       />
     </div>
diff --git a/apps/web/core/components/analytics/select/project.tsx b/apps/web/core/components/analytics/select/project.tsx
index 7bdbbddb366..864637b034d 100644
--- a/apps/web/core/components/analytics/select/project.tsx
+++ b/apps/web/core/components/analytics/select/project.tsx
@@ -6,11 +6,10 @@
 
 import { observer } from "mobx-react";
 // plane package imports
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ChevronDownIcon, ProjectIcon } from "@plane/propel/icons";
 import { CustomSearchSelect } from "@plane/ui";
-import { cn } from "@plane/utils";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 
@@ -50,7 +49,7 @@ export const ProjectSelect = observer(function ProjectSelect(props: Props) {
       options={options}
       className="border-none p-0"
       customButton={
-        <div className={cn(getButtonStyling("secondary", "lg"), "gap-2")}>
+        <Button variant="secondary" size="md" stretch="auto" render={<div />}>
           <ProjectIcon className="h-4 w-4" />
           {value && value.length > 3
             ? `3+ projects`
@@ -61,7 +60,7 @@ export const ProjectSelect = observer(function ProjectSelect(props: Props) {
                   .join(", ")
               : "All projects"}
           <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-        </div>
+        </Button>
       }
       customButtonClassName="border-none p-0 bg-transparent hover:bg-transparent w-auto h-auto"
       multiple
diff --git a/apps/web/core/components/analytics/work-items/priority-chart.tsx b/apps/web/core/components/analytics/work-items/priority-chart.tsx
index 942285cab20..dbebdf158db 100644
--- a/apps/web/core/components/analytics/work-items/priority-chart.tsx
+++ b/apps/web/core/components/analytics/work-items/priority-chart.tsx
@@ -15,7 +15,7 @@ import { Download } from "lucide-react";
 import type { ChartXAxisDateGrouping } from "@plane/constants";
 import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, CHART_COLOR_PALETTES, EChartModels } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { BarChart } from "@plane/propel/charts/bar-chart";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { TBarItem, TChart, TChartDatum, ChartXAxisProperty, ChartYAxisMetric } from "@plane/types";
@@ -228,11 +228,12 @@ const PriorityChart = observer(function PriorityChart(props: Props) {
             actions={(table: Table<TChartDatum>) => (
               <Button
                 variant="secondary"
-                prependIcon={<Download className="h-3.5 w-3.5" />}
+                size="sm"
+                stretch="auto"
+                icon={<Download className="h-3.5 w-3.5" />}
                 onClick={() => exportCSV(table.getRowModel().rows, [...defaultColumns, ...columns], workspaceSlug)}
-              >
-                <div>{t("exporter.csv.short_description")}</div>
-              </Button>
+                label={t("exporter.csv.short_description")}
+              />
             )}
           />
         </>
diff --git a/apps/web/core/components/api-token/empty-state.tsx b/apps/web/core/components/api-token/empty-state.tsx
index 944d19e34be..c0f0f4c257b 100644
--- a/apps/web/core/components/api-token/empty-state.tsx
+++ b/apps/web/core/components/api-token/empty-state.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // assets
 import emptyApiTokens from "@/app/assets/empty-state/api-token.svg?url";
 
@@ -27,9 +27,9 @@ export function ApiTokenEmptyState(props: Props) {
         <p className="mb-7 text-tertiary sm:mb-8">
           Create API tokens for safe and easy data sharing with external apps, maintaining control and security.
         </p>
-        <Button className="flex items-center gap-1.5" onClick={onClick}>
-          Add token
-        </Button>
+        <span className="flex items-center gap-1.5">
+          <Button variant="primary" size="sm" stretch="auto" label="Add token" onClick={onClick} />
+        </span>
       </div>
     </div>
   );
diff --git a/apps/web/core/components/api-token/modal/form.tsx b/apps/web/core/components/api-token/modal/form.tsx
index 32c9456f67a..c69351cbc2f 100644
--- a/apps/web/core/components/api-token/modal/form.tsx
+++ b/apps/web/core/components/api-token/modal/form.tsx
@@ -12,7 +12,7 @@ import { Calendar } from "lucide-react";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IApiToken } from "@plane/types";
 // ui
@@ -257,14 +257,19 @@ export function CreateApiTokenForm(props: Props) {
           <span className="text-11">{t("workspace_settings.settings.api_tokens.never_expires")}</span>
         </div>
         <div className="flex items-center gap-2">
-          <Button variant="secondary" onClick={handleClose}>
-            {t("cancel")}
-          </Button>
-          <Button variant="primary" type="submit" loading={isSubmitting}>
-            {isSubmitting
-              ? t("workspace_settings.settings.api_tokens.generating")
-              : t("workspace_settings.settings.api_tokens.generate_token")}
-          </Button>
+          <Button variant="secondary" size="sm" stretch="auto" label={t("cancel")} onClick={handleClose} />
+          <Button
+            variant="primary"
+            size="sm"
+            stretch="auto"
+            label={
+              isSubmitting
+                ? t("workspace_settings.settings.api_tokens.generating")
+                : t("workspace_settings.settings.api_tokens.generate_token")
+            }
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       </div>
     </form>
diff --git a/apps/web/core/components/api-token/modal/generated-token-details.tsx b/apps/web/core/components/api-token/modal/generated-token-details.tsx
index aad163191f8..1c83ce161e0 100644
--- a/apps/web/core/components/api-token/modal/generated-token-details.tsx
+++ b/apps/web/core/components/api-token/modal/generated-token-details.tsx
@@ -5,7 +5,7 @@
  */
 
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CopyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -58,9 +58,7 @@ export function GeneratedTokenDetails(props: Props) {
             ? `Expires ${renderFormattedDate(tokenDetails.expired_at)} at ${renderFormattedTime(tokenDetails.expired_at)}`
             : "Never expires"}
         </p>
-        <Button variant="secondary" onClick={handleClose}>
-          {t("close")}
-        </Button>
+        <Button variant="secondary" size="sm" stretch="auto" label={t("close")} onClick={handleClose} />
       </div>
     </div>
   );
diff --git a/apps/web/core/components/auth-screens/workspace/not-a-member.tsx b/apps/web/core/components/auth-screens/workspace/not-a-member.tsx
index b38603006f4..8765e4bee73 100644
--- a/apps/web/core/components/auth-screens/workspace/not-a-member.tsx
+++ b/apps/web/core/components/auth-screens/workspace/not-a-member.tsx
@@ -6,7 +6,7 @@
 
 import Link from "next/link";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // layouts
 import DefaultLayout from "@/layouts/default-layout";
 
@@ -23,16 +23,22 @@ export function NotAWorkspaceMember() {
             </p>
           </div>
           <div className="flex items-center justify-center gap-2">
-            <Link href="/invitations">
-              <span>
-                <Button variant="secondary">Check pending invites</Button>
-              </span>
-            </Link>
-            <Link href="/create-workspace">
-              <span>
-                <Button variant="primary">Create new workspace</Button>
-              </span>
-            </Link>
+            <Button
+              variant="secondary"
+              size="sm"
+              stretch="auto"
+              label="Check pending invites"
+              nativeButton={false}
+              render={<Link href="/invitations" />}
+            />
+            <Button
+              variant="primary"
+              size="sm"
+              stretch="auto"
+              label="Create new workspace"
+              nativeButton={false}
+              render={<Link href="/create-workspace" />}
+            />
           </div>
         </div>
       </div>
diff --git a/apps/web/core/components/automation/select-month-modal.tsx b/apps/web/core/components/automation/select-month-modal.tsx
index b557934c49a..26e072863bb 100644
--- a/apps/web/core/components/automation/select-month-modal.tsx
+++ b/apps/web/core/components/automation/select-month-modal.tsx
@@ -7,9 +7,9 @@
 import { useParams } from "next/navigation";
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
+import { Button } from "@makeplane/propel/components/button";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
-import { Button } from "@plane/propel/button";
 import type { IProject } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -130,12 +130,15 @@ export function SelectMonthModal({ type, initialValues, isOpen, handleClose, han
           </div>
         </div>
         <div className="mt-5 flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-            {isSubmitting ? "Submitting..." : "Submit"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isSubmitting ? "Submitting..." : "Submit"}
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/common/empty-state.tsx b/apps/web/core/components/common/empty-state.tsx
index a5f469deb7d..39714252e82 100644
--- a/apps/web/core/components/common/empty-state.tsx
+++ b/apps/web/core/components/common/empty-state.tsx
@@ -7,7 +7,7 @@
 import React from "react";
 
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   title: string;
@@ -33,12 +33,13 @@ export function EmptyState({ title, description, image, primaryButton, secondary
           {primaryButton && (
             <Button
               variant="primary"
-              prependIcon={primaryButton.icon}
+              size="sm"
+              stretch="auto"
+              label={primaryButton.text}
+              icon={primaryButton.icon}
               onClick={primaryButton.onClick}
               disabled={disabled}
-            >
-              {primaryButton.text}
-            </Button>
+            />
           )}
           {secondaryButton}
         </div>
diff --git a/apps/web/core/components/common/layout-error-boundary.tsx b/apps/web/core/components/common/layout-error-boundary.tsx
index 74ef8f3fbb8..27e40fe99d6 100644
--- a/apps/web/core/components/common/layout-error-boundary.tsx
+++ b/apps/web/core/components/common/layout-error-boundary.tsx
@@ -8,7 +8,7 @@ import { Component, Fragment } from "react";
 import type { ErrorInfo, ReactNode } from "react";
 import { AlertTriangle } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   children: ReactNode;
@@ -26,9 +26,7 @@ function LayoutErrorFallback({ onRetry }: { onRetry: () => void }) {
     <div className="flex h-full w-full flex-col items-center justify-center gap-3 text-center">
       <AlertTriangle className="size-8 text-tertiary" />
       <p className="text-14 text-secondary">{t("something_went_wrong")}</p>
-      <Button variant="secondary" size="sm" onClick={onRetry}>
-        {t("common.retry")}
-      </Button>
+      <Button variant="secondary" size="xs" stretch="auto" label={t("common.retry")} onClick={onRetry} />
     </div>
   );
 }
diff --git a/apps/web/core/components/common/new-empty-state.tsx b/apps/web/core/components/common/new-empty-state.tsx
index 742ea3a6a88..1baaac204fb 100644
--- a/apps/web/core/components/common/new-empty-state.tsx
+++ b/apps/web/core/components/common/new-empty-state.tsx
@@ -7,7 +7,7 @@
 import React, { useState } from "react";
 
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   title: string;
@@ -49,14 +49,15 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
 
           <div className="relative flex items-start justify-center">
             {primaryButton && (
-              <Button
-                className={`relative m-3 max-w-min !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
-                size="xl"
-                variant="primary"
-                onClick={primaryButton.onClick}
-                disabled={disabled}
-              >
-                {primaryButton.text}
+              <span className={`relative m-3 max-w-min ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}>
+                <Button
+                  size="lg"
+                  stretch="auto"
+                  variant="primary"
+                  onClick={primaryButton.onClick}
+                  disabled={disabled}
+                  label={primaryButton.text}
+                />
                 <div
                   onMouseEnter={handleMouseEnter}
                   onMouseLeave={handleMouseLeave}
@@ -69,7 +70,7 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
                     comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
                   } h-1.5 w-1.5 rounded-full`}
                 />
-              </Button>
+              </span>
             )}
             {comicBox &&
               isHovered &&
diff --git a/apps/web/core/components/core/description-versions/modal.tsx b/apps/web/core/components/core/description-versions/modal.tsx
index 854b50922cf..aa8715f40c2 100644
--- a/apps/web/core/components/core/description-versions/modal.tsx
+++ b/apps/web/core/components/core/description-versions/modal.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CopyIcon, ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -160,20 +160,25 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
             <IconButton type="button" variant="ghost" size="base" onClick={handleCopyMarkdown} icon={CopyIcon} />
           </Tooltip>
           <div className="flex items-center gap-2">
-            <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={1}>
-              {t("common.cancel")}
-            </Button>
+            <Button
+              variant="secondary"
+              size="md"
+              stretch="auto"
+              label={t("common.cancel")}
+              onClick={handleClose}
+              tabIndex={1}
+            />
             {!isRestoreDisabled && (
               <Button
                 variant="primary"
-                size="lg"
+                size="md"
+                stretch="auto"
+                label={t("common.actions.restore")}
                 onClick={() => {
                   handleRestore(activeVersionDescription ?? "<p></p>");
                   handleClose();
                 }}
-              >
-                {t("common.actions.restore")}
-              </Button>
+              />
             )}
           </div>
         </div>
diff --git a/apps/web/core/components/core/filters/date-filter-modal.tsx b/apps/web/core/components/core/filters/date-filter-modal.tsx
index 0f1ac2c53c6..4f0a876370b 100644
--- a/apps/web/core/components/core/filters/date-filter-modal.tsx
+++ b/apps/web/core/components/core/filters/date-filter-modal.tsx
@@ -5,7 +5,7 @@
  */
 
 import { Controller, useForm } from "react-hook-form";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Calendar } from "@plane/propel/calendar";
 import { CloseIcon } from "@plane/propel/icons";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -120,18 +120,16 @@ export function DateFilterModal({ title, handleClose, isOpen, onSelect }: Props)
           </h6>
         )}
         <div className="flex justify-end gap-4">
-          <Button variant="secondary" size="lg" onClick={handleClose}>
-            Cancel
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label="Apply"
             type="button"
             onClick={handleSubmit(handleFormSubmit)}
             disabled={isInvalid}
-          >
-            Apply
-          </Button>
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index be049801d85..498b1e96b2d 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -17,7 +17,8 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { Tabs } from "@plane/propel/tabs";
-import { Button, getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
 import { Loader } from "@plane/ui";
@@ -193,9 +194,15 @@ function ImagePickerPopoverComponent<TFieldValues extends FieldValues = FieldVal
 
   return (
     <Popover className="relative z-19" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
-      <Popover.Button className={getButtonStyling("secondary", "sm")} onClick={handleOnClick} disabled={disabled}>
+      <ButtonElement
+        variant="secondary"
+        size="xs"
+        stretch="auto"
+        disabled={disabled}
+        render={<Popover.Button onClick={handleOnClick} disabled={disabled} />}
+      >
         {label}
-      </Popover.Button>
+      </ButtonElement>
 
       {isOpen && (
         <Popover.Panel
@@ -244,9 +251,13 @@ function ImagePickerPopoverComponent<TFieldValues extends FieldValues = FieldVal
                             </InputGroup>
                           )}
                         />
-                        <Button variant="primary" size="xl" onClick={() => setSearchParams(formData.search)}>
-                          Search
-                        </Button>
+                        <Button
+                          variant="primary"
+                          size="lg"
+                          stretch="auto"
+                          label="Search"
+                          onClick={() => setSearchParams(formData.search)}
+                        />
                       </div>
                       {unsplashImages ? (
                         unsplashImages.length > 0 ? (
@@ -352,22 +363,23 @@ function ImagePickerPopoverComponent<TFieldValues extends FieldValues = FieldVal
                     <div className="flex h-12 items-start justify-end gap-2">
                       <Button
                         variant="secondary"
+                        size="sm"
+                        stretch="auto"
+                        label="Cancel"
                         onClick={() => {
                           setIsOpen(false);
                           setImage(null);
                         }}
-                      >
-                        Cancel
-                      </Button>
+                      />
                       <Button
                         variant="primary"
-                        className="w-full"
+                        size="sm"
+                        stretch="full"
+                        label={isImageUploading ? "Uploading" : "Upload & Save"}
                         onClick={handleSubmit}
                         disabled={!image}
                         loading={isImageUploading}
-                      >
-                        {isImageUploading ? "Uploading" : "Upload & Save"}
-                      </Button>
+                      />
                     </div>
                   </div>
                 </Tabs.Content>
diff --git a/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx b/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
index 1d7b4099a06..66690ebd151 100644
--- a/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
@@ -13,7 +13,7 @@ import { useForm } from "react-hook-form";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { SearchIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ISearchIssueResponse, IUser } from "@plane/types";
@@ -199,12 +199,15 @@ export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(pro
 
         {issues.length > 0 && (
           <div className="flex items-center justify-end gap-2 p-3">
-            <Button variant="secondary" size="lg" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button variant="error-fill" size="lg" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
-              {isSubmitting ? "Deleting..." : "Delete selected work items"}
-            </Button>
+            <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+            <Button
+              variant="danger"
+              size="md"
+              stretch="auto"
+              label={isSubmitting ? "Deleting..." : "Delete selected work items"}
+              onClick={handleSubmit(handleDelete)}
+              loading={isSubmitting}
+            />
           </div>
         )}
       </form>
diff --git a/apps/web/core/components/core/modals/change-email-modal.tsx b/apps/web/core/components/core/modals/change-email-modal.tsx
index 73cd2e546d2..206e99af319 100644
--- a/apps/web/core/components/core/modals/change-email-modal.tsx
+++ b/apps/web/core/components/core/modals/change-email-modal.tsx
@@ -11,7 +11,7 @@ import { Controller, useForm } from "react-hook-form";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -205,16 +205,28 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
           </div>
         )}
         <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle py-4">
-          <Button type="button" variant="secondary" size="lg" onClick={handleClose}>
-            {changeEmailT("actions.cancel")}
-          </Button>
-          <Button type="submit" variant="primary" size="lg" disabled={isSubmitting}>
-            {isSubmitting
-              ? changeEmailT("states.sending")
-              : secondStep
-                ? changeEmailT("actions.confirm")
-                : changeEmailT("actions.continue")}
-          </Button>
+          <Button
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            label={changeEmailT("actions.cancel")}
+            type="button"
+            onClick={handleClose}
+          />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={
+              isSubmitting
+                ? changeEmailT("states.sending")
+                : secondStep
+                  ? changeEmailT("actions.confirm")
+                  : changeEmailT("actions.continue")
+            }
+            type="submit"
+            disabled={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
index 646ce6c359a..e6e06b87f05 100644
--- a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
+++ b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
@@ -10,7 +10,7 @@ import { Combobox } from "@headlessui/react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -313,27 +313,29 @@ export function ExistingIssuesListModal(props: Props) {
         </Combobox.Options>
       </Combobox>
       <div className="flex items-center justify-between p-3">
-        <Button
-          variant="link"
-          onClick={handleSelectIssues}
-          disabled={filteredIssues.length === 0}
-          className={filteredIssues.length === 0 ? "p-0" : ""}
-        >
-          {selectedIssues.length === issues.length ? t("issue.select.deselect_all") : t("issue.select.select_all")}
-        </Button>
+        <span className={filteredIssues.length === 0 ? "p-0" : ""}>
+          <Button
+            variant="ghost"
+            size="sm"
+            stretch="auto"
+            label={
+              selectedIssues.length === issues.length ? t("issue.select.deselect_all") : t("issue.select.select_all")
+            }
+            onClick={handleSelectIssues}
+            disabled={filteredIssues.length === 0}
+          />
+        </span>
         <div className="flex items-center justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={handleClose}>
-            {t("common.cancel")}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label={t("common.cancel")} onClick={handleClose} />
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label={isSubmitting ? t("common.adding") : t("issue.select.add_selected")}
             onClick={onSubmit}
             loading={isSubmitting}
             disabled={isSubmitting || selectedIssues.length === 0}
-          >
-            {isSubmitting ? t("common.adding") : t("issue.select.add_selected")}
-          </Button>
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
index cf087779d29..3fedd960a94 100644
--- a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
+++ b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
@@ -14,7 +14,7 @@ import { Popover, Transition } from "@headlessui/react";
 // plane imports
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import type { EditorRefApi } from "@plane/editor";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 
 // components
@@ -181,13 +181,14 @@ export function GptAssistantPopover(props: Props) {
   const responseActionButton = response !== "" && (
     <Button
       variant="primary"
+      size="sm"
+      stretch="auto"
+      label="Use this response"
       onClick={() => {
         onResponse(response);
         onClose();
       }}
-    >
-      Use this response
-    </Button>
+    />
   );
 
   const generateResponseButtonText = isSubmitting
@@ -290,12 +291,15 @@ export function GptAssistantPopover(props: Props) {
               </>
             )}
             <div className="flex items-center gap-2">
-              <Button variant="secondary" onClick={onClose}>
-                Close
-              </Button>
-              <Button variant="primary" onClick={handleSubmit(handleAIResponse)} loading={isSubmitting}>
-                {generateResponseButtonText}
-              </Button>
+              <Button variant="secondary" size="sm" stretch="auto" label="Close" onClick={onClose} />
+              <Button
+                variant="primary"
+                size="sm"
+                stretch="auto"
+                label={generateResponseButtonText}
+                onClick={handleSubmit(handleAIResponse)}
+                loading={isSubmitting}
+              />
             </div>
           </div>
         </Popover.Panel>
diff --git a/apps/web/core/components/core/modals/user-image-upload-modal.tsx b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
index ff688c7285e..b591c07ec99 100644
--- a/apps/web/core/components/core/modals/user-image-upload-modal.tsx
+++ b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { useDropzone } from "react-dropzone";
 // plane imports
 import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { UserCirclePropertyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
@@ -143,16 +143,25 @@ export const UserImageUploadModal = observer(function UserImageUploadModal(props
         </div>
         <p className="my-4 text-13 text-secondary">File formats supported- .jpeg, .jpg, .png, .webp</p>
         <div className="flex items-center justify-between">
-          <Button variant="error-fill" size="lg" onClick={handleImageRemove} disabled={!value}>
-            {isRemoving ? "Removing" : "Remove"}
-          </Button>
+          <Button
+            variant="danger"
+            size="md"
+            stretch="auto"
+            label={isRemoving ? "Removing" : "Remove"}
+            onClick={handleImageRemove}
+            disabled={!value}
+          />
           <div className="flex items-center gap-2">
-            <Button variant="secondary" size="lg" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button variant="primary" size="lg" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
-              {isImageUploading ? "Uploading" : "Upload & Save"}
-            </Button>
+            <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={isImageUploading ? "Uploading" : "Upload & Save"}
+              onClick={handleSubmit}
+              disabled={!image}
+              loading={isImageUploading}
+            />
           </div>
         </div>
       </div>
diff --git a/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
index c22ce52aad9..e491b784630 100644
--- a/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
+++ b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 import { useDropzone } from "react-dropzone";
 // plane imports
 import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { UserCirclePropertyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
@@ -156,16 +156,26 @@ export const WorkspaceImageUploadModal = observer(function WorkspaceImageUploadM
         </div>
         <p className="my-4 text-13 text-secondary">File formats supported- .jpeg, .jpg, .png, .webp</p>
         <div className="flex items-center justify-between">
-          <Button variant="error-fill" size="lg" onClick={handleImageRemove} disabled={!value} loading={isRemoving}>
-            {isRemoving ? "Removing" : "Remove"}
-          </Button>
+          <Button
+            variant="danger"
+            size="md"
+            stretch="auto"
+            label={isRemoving ? "Removing" : "Remove"}
+            onClick={handleImageRemove}
+            disabled={!value}
+            loading={isRemoving}
+          />
           <div className="flex items-center gap-2">
-            <Button variant="secondary" size="lg" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button variant="primary" size="lg" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
-              {isImageUploading ? "Uploading" : "Upload & Save"}
-            </Button>
+            <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={isImageUploading ? "Uploading" : "Upload & Save"}
+              onClick={handleSubmit}
+              disabled={!image}
+              loading={isImageUploading}
+            />
           </div>
         </div>
       </div>
diff --git a/apps/web/core/components/core/theme/custom-theme-selector.tsx b/apps/web/core/components/core/theme/custom-theme-selector.tsx
index 47307776d85..4dd76e93b41 100644
--- a/apps/web/core/components/core/theme/custom-theme-selector.tsx
+++ b/apps/web/core/components/core/theme/custom-theme-selector.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUserTheme } from "@plane/types";
 import { applyCustomTheme } from "@plane/utils";
@@ -116,9 +116,14 @@ export const CustomThemeSelector = observer(function CustomThemeSelector() {
       </div>
       <div className="mt-5 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         {/* Save Theme Button */}
-        <Button variant="primary" size="lg" type="submit" loading={isSubmitting || isLoadingPalette}>
-          {isSubmitting ? t("common.saving") : isLoadingPalette ? "Generating" : t("set_theme")}
-        </Button>
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          label={isSubmitting ? t("common.saving") : isLoadingPalette ? "Generating" : t("set_theme")}
+          type="submit"
+          loading={isSubmitting || isLoadingPalette}
+        />
         {/* Import/Export Section */}
         <CustomThemeDownloadConfigButton getValues={getValues} />
       </div>
diff --git a/apps/web/core/components/core/theme/download-config-button.tsx b/apps/web/core/components/core/theme/download-config-button.tsx
index c2ffc0bc3d8..47c2e2ff269 100644
--- a/apps/web/core/components/core/theme/download-config-button.tsx
+++ b/apps/web/core/components/core/theme/download-config-button.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import type { UseFormGetValues } from "react-hook-form";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { IUserTheme } from "@plane/types";
 
@@ -58,8 +58,13 @@ export const CustomThemeDownloadConfigButton = observer(function CustomThemeDown
   };
 
   return (
-    <Button variant="secondary" size="lg" type="button" onClick={handleDownloadConfig}>
-      Download config
-    </Button>
+    <Button
+      variant="secondary"
+      size="md"
+      stretch="auto"
+      label="Download config"
+      type="button"
+      onClick={handleDownloadConfig}
+    />
   );
 });
diff --git a/apps/web/core/components/core/theme/import-config-button.tsx b/apps/web/core/components/core/theme/import-config-button.tsx
index a4586163b4e..e2d6e828192 100644
--- a/apps/web/core/components/core/theme/import-config-button.tsx
+++ b/apps/web/core/components/core/theme/import-config-button.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import type { UseFormSetValue } from "react-hook-form";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import type { IUserTheme } from "@plane/types";
 
@@ -93,9 +93,14 @@ export const CustomThemeImportConfigButton = observer(function CustomThemeImport
   return (
     <>
       <input ref={fileInputRef} type="file" accept=".json" onChange={handleUploadConfig} className="hidden" />
-      <Button variant="secondary" size="lg" type="button" onClick={() => fileInputRef.current?.click()}>
-        Import config
-      </Button>
+      <Button
+        variant="secondary"
+        size="md"
+        stretch="auto"
+        label="Import config"
+        type="button"
+        onClick={() => fileInputRef.current?.click()}
+      />
     </>
   );
 });
diff --git a/apps/web/core/components/cycles/archived-cycles/modal.tsx b/apps/web/core/components/cycles/archived-cycles/modal.tsx
index e29c05fed9c..86aa946b30f 100644
--- a/apps/web/core/components/cycles/archived-cycles/modal.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/modal.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
@@ -69,12 +69,16 @@ export function ArchiveCycleModal(props: Props) {
           Are you sure you want to archive the cycle? All your archives can be restored later.
         </p>
         <div className="mt-3 flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="primary" size="lg" tabIndex={1} onClick={handleArchiveCycle} loading={isArchiving}>
-            {isArchiving ? "Archiving" : "Archive"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isArchiving ? "Archiving" : "Archive"}
+            tabIndex={1}
+            onClick={handleArchiveCycle}
+            loading={isArchiving}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/cycles/form.tsx b/apps/web/core/components/cycles/form.tsx
index ff2448c7cf1..fc901921936 100644
--- a/apps/web/core/components/cycles/form.tsx
+++ b/apps/web/core/components/cycles/form.tsx
@@ -12,7 +12,7 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { ETabIndices } from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { ICycle } from "@plane/types";
 // ui
 import { TextArea } from "@plane/ui";
@@ -189,18 +189,31 @@ export function CycleForm(props: Props) {
         </div>
       </div>
       <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-        <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
-          {t("common.cancel")}
-        </Button>
-        <Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
-          {data
-            ? isSubmitting
-              ? t("common.updating")
-              : t("project_cycles.update_cycle")
-            : isSubmitting
-              ? t("common.creating")
-              : t("project_cycles.create_cycle")}
-        </Button>
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          label={t("common.cancel")}
+          onClick={handleClose}
+          tabIndex={getIndex("cancel")}
+        />
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          label={
+            data
+              ? isSubmitting
+                ? t("common.updating")
+                : t("project_cycles.update_cycle")
+              : isSubmitting
+                ? t("common.creating")
+                : t("project_cycles.create_cycle")
+          }
+          type="submit"
+          loading={isSubmitting}
+          tabIndex={getIndex("submit")}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/cycles/transfer-issues.tsx b/apps/web/core/components/cycles/transfer-issues.tsx
index adbab83aa41..027d5bbe410 100644
--- a/apps/web/core/components/cycles/transfer-issues.tsx
+++ b/apps/web/core/components/cycles/transfer-issues.tsx
@@ -7,7 +7,7 @@
 import React from "react";
 import { AlertCircle } from "lucide-react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TransferIcon } from "@plane/propel/icons";
 
 type Props = {
@@ -27,9 +27,15 @@ export function TransferIssues(props: Props) {
 
       {canTransferIssues && (
         <div>
-          <Button variant="primary" size="lg" prependIcon={<TransferIcon />} onClick={handleClick} disabled={disabled}>
-            Transfer work items
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label="Transfer work items"
+            icon={<TransferIcon />}
+            onClick={handleClick}
+            disabled={disabled}
+          />
         </div>
       )}
     </div>
diff --git a/apps/web/core/components/dropdowns/buttons.tsx b/apps/web/core/components/dropdowns/buttons.tsx
index dbee6ab0b47..d8343a7beb0 100644
--- a/apps/web/core/components/dropdowns/buttons.tsx
+++ b/apps/web/core/components/dropdowns/buttons.tsx
@@ -6,7 +6,6 @@
 
 import React from "react";
 // helpers
-import { Button } from "@plane/propel/button";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // types
@@ -78,11 +77,10 @@ function BorderButton(props: ButtonProps) {
       isMobile={isMobile}
       renderByDefault={renderToolTipByDefault}
     >
-      <Button
-        variant="ghost"
-        size="sm"
+      <button
+        type="button"
         className={cn(
-          "flex h-full w-full items-center justify-start gap-1.5 border-[0.5px] border-strong",
+          "inline-flex h-5 w-full items-center justify-start gap-1.5 rounded-sm border-[0.5px] border-strong px-1.5 text-caption-md-medium",
           {
             "bg-layer-transparent-active": isActive,
           },
@@ -90,7 +88,7 @@ function BorderButton(props: ButtonProps) {
         )}
       >
         {children}
-      </Button>
+      </button>
     </Tooltip>
   );
 }
@@ -106,16 +104,15 @@ function BackgroundButton(props: ButtonProps) {
       isMobile={isMobile}
       renderByDefault={renderToolTipByDefault}
     >
-      <Button
-        variant="ghost"
-        size="sm"
+      <button
+        type="button"
         className={cn(
-          "flex h-full w-full items-center justify-between gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
+          "inline-flex h-5 w-full items-center justify-between gap-1.5 rounded-sm bg-layer-3 px-1.5 text-caption-md-medium hover:bg-layer-1-hover",
           className
         )}
       >
         {children}
-      </Button>
+      </button>
     </Tooltip>
   );
 }
@@ -131,11 +128,10 @@ function TransparentButton(props: ButtonProps) {
       isMobile={isMobile}
       renderByDefault={renderToolTipByDefault}
     >
-      <Button
-        variant="ghost"
-        size="sm"
+      <button
+        type="button"
         className={cn(
-          "flex h-full w-full items-center justify-between gap-1.5",
+          "inline-flex h-5 w-full items-center justify-between gap-1.5 rounded-sm px-1.5 text-caption-md-medium",
           {
             "bg-layer-transparent-active": isActive,
           },
@@ -143,7 +139,7 @@ function TransparentButton(props: ButtonProps) {
         )}
       >
         {children}
-      </Button>
+      </button>
     </Tooltip>
   );
 }
diff --git a/apps/web/core/components/dropdowns/layout.tsx b/apps/web/core/components/dropdowns/layout.tsx
index f48b0e95705..4eae331fd97 100644
--- a/apps/web/core/components/dropdowns/layout.tsx
+++ b/apps/web/core/components/dropdowns/layout.tsx
@@ -4,16 +4,15 @@
  * See the LICENSE file for details.
  */
 
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { ISSUE_LAYOUT_MAP } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { Button } from "@makeplane/propel/elements/button";
 import { CheckIcon } from "@plane/propel/icons";
 import { EIssueLayoutTypes } from "@plane/types";
-import { getButtonStyling } from "@plane/propel/button";
-import { Dropdown } from "@plane/ui";
-import { cn } from "@plane/utils";
+import { CustomMenu } from "@plane/ui";
 // components
 import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
 
@@ -25,59 +24,37 @@ type TLayoutDropDown = {
 
 export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDropDown) {
   const { onChange, value = EIssueLayoutTypes.LIST, disabledLayouts = [] } = props;
-  // plane i18n
   const { t } = useTranslation();
-  // derived values
   const availableLayouts = useMemo(
     () => Object.values(ISSUE_LAYOUT_MAP).filter((layout) => !disabledLayouts.includes(layout.key)),
     [disabledLayouts]
   );
-
-  const options = useMemo(
-    () =>
-      availableLayouts.map((issueLayout) => ({
-        data: issueLayout.key,
-        value: issueLayout.key,
-      })),
-    [availableLayouts]
-  );
-
-  const buttonContent = useCallback((isOpen: boolean, buttonValue: string | string[] | undefined) => {
-    const dropdownValue = ISSUE_LAYOUT_MAP[buttonValue as EIssueLayoutTypes];
-    return (
-      <div className="flex items-center gap-2 text-secondary">
-        <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3.5 text-secondary`} />
-        <span className="text-11 font-medium">{t(dropdownValue.i18n_label)}</span>
-      </div>
-    );
-  }, []);
-
-  const itemContent = useCallback((props: { value: string; selected: boolean }) => {
-    const dropdownValue = ISSUE_LAYOUT_MAP[props.value as EIssueLayoutTypes];
-
-    return (
-      <div className={cn("flex w-full items-center justify-between gap-2 text-secondary")}>
-        <div className="flex items-center gap-2">
-          <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3 text-secondary`} />
-          <span className="text-11 font-medium">{t(dropdownValue.i18n_label)}</span>
-        </div>
-        {props.selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
-      </div>
-    );
-  }, []);
-
-  const keyExtractor = useCallback((option: any) => option.value, []);
+  const selectedLayout = ISSUE_LAYOUT_MAP[value];
 
   return (
-    <Dropdown
-      onChange={onChange as (value: string) => void}
-      value={value?.toString()}
-      keyExtractor={keyExtractor}
-      options={options}
-      buttonContainerClassName={cn(getButtonStyling("secondary", "lg"))}
-      buttonContent={buttonContent}
-      renderItem={itemContent}
-      disableSearch
-    />
+    <CustomMenu
+      customButton={
+        <Button variant="secondary" size="md" stretch="auto" render={<div />}>
+          <IssueLayoutIcon layout={selectedLayout.key} strokeWidth={2} className="size-3.5 text-secondary" />
+          <span className="text-11 font-medium">{t(selectedLayout.i18n_label)}</span>
+        </Button>
+      }
+      placement="bottom-end"
+      closeOnSelect
+    >
+      {availableLayouts.map((issueLayout) => (
+        <CustomMenu.MenuItem
+          key={issueLayout.key}
+          className="flex items-center justify-between gap-2"
+          onClick={() => onChange(issueLayout.key)}
+        >
+          <div className="flex items-center gap-2">
+            <IssueLayoutIcon layout={issueLayout.key} strokeWidth={2} className="size-3 text-secondary" />
+            <span className="text-11 font-medium">{t(issueLayout.i18n_label)}</span>
+          </div>
+          {value === issueLayout.key && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
+        </CustomMenu.MenuItem>
+      ))}
+    </CustomMenu>
   );
 });
diff --git a/apps/web/core/components/editor/lite-text/toolbar.tsx b/apps/web/core/components/editor/lite-text/toolbar.tsx
index dc955cddedf..0420a4b7314 100644
--- a/apps/web/core/components/editor/lite-text/toolbar.tsx
+++ b/apps/web/core/components/editor/lite-text/toolbar.tsx
@@ -13,7 +13,7 @@ import type { EditorRefApi } from "@plane/editor";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { GlobeIcon, LockIcon } from "@plane/propel/icons";
 import type { ISvgIcons } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -177,16 +177,18 @@ export function IssueCommentToolbar(props: Props) {
         </div>
         {showSubmitButton && (
           <div className="sticky right-1">
-            <Button
-              type="submit"
-              variant="primary"
-              className="px-2.5 py-1.5 text-11"
-              onClick={handleSubmit}
-              disabled={isSubmitButtonDisabled}
-              loading={isSubmitting}
-            >
-              {t(submitButtonText)}
-            </Button>
+            <span className="px-2.5 py-1.5 text-11">
+              <Button
+                variant="primary"
+                size="sm"
+                stretch="auto"
+                label={t(submitButtonText)}
+                type="submit"
+                onClick={handleSubmit}
+                disabled={isSubmitButtonDisabled}
+                loading={isSubmitting}
+              />
+            </span>
           </div>
         )}
       </div>
diff --git a/apps/web/core/components/empty-state/comic-box-button.tsx b/apps/web/core/components/empty-state/comic-box-button.tsx
index 222e0531f84..7452aaa4422 100644
--- a/apps/web/core/components/empty-state/comic-box-button.tsx
+++ b/apps/web/core/components/empty-state/comic-box-button.tsx
@@ -9,7 +9,7 @@ import { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
 import { Popover } from "@headlessui/react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   label: string;
@@ -32,7 +32,7 @@ export function ComicBoxButton(props: Props) {
     setIsHovered(false);
   };
 
-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>();
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: "right-end",
@@ -49,18 +49,25 @@ export function ComicBoxButton(props: Props) {
   return (
     <Popover as="div" className="relative">
       <Popover.Button as={Fragment}>
-        <Button variant="primary" size="lg" ref={setReferenceElement} onClick={onClick} disabled={disabled}>
-          {icon}
-          <span className="leading-4">{label}</span>
+        <span className="relative inline-flex" ref={setReferenceElement}>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            onClick={onClick}
+            disabled={disabled}
+            icon={icon}
+            label={label}
+          />
           <span className="relative h-2 w-2">
             <div
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
-              className={`bg-blue-300 absolute right-0 z-10 h-2.5 w-2.5 animate-ping rounded-full`}
+              className="bg-blue-300 absolute right-0 z-10 h-2.5 w-2.5 animate-ping rounded-full"
             />
-            <div className={`bg-blue-400/40 absolute right-0 mt-0.5 mr-0.5 h-1.5 w-1.5 rounded-full`} />
+            <div className="bg-blue-400/40 absolute right-0 mt-0.5 mr-0.5 h-1.5 w-1.5 rounded-full" />
           </span>
-        </Button>
+        </span>
       </Popover.Button>
       {isHovered && (
         <Popover.Panel className="fixed z-10" static>
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 593e5adda74..3e987ae1bfe 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
@@ -7,7 +7,7 @@
 import React from "react";
 import { observer } from "mobx-react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // utils
 import { cn } from "@plane/utils";
 
@@ -50,15 +50,15 @@ function CustomButton({
 }) {
   return (
     <Button
-      variant={variant}
-      size={size}
+      variant="primary"
+      size="sm"
+      stretch="auto"
+      label={config.text}
+      icon={config.appendIcon}
+      iconPosition="end"
       onClick={config.onClick}
-      prependIcon={config.prependIcon}
-      appendIcon={config.appendIcon}
       disabled={config.disabled}
-    >
-      {config.text}
-    </Button>
+    />
   );
 }
 
diff --git a/apps/web/core/components/estimates/create/modal.tsx b/apps/web/core/components/estimates/create/modal.tsx
index 518f6665095..3fa1284fc20 100644
--- a/apps/web/core/components/estimates/create/modal.tsx
+++ b/apps/web/core/components/estimates/create/modal.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ChevronLeftIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IEstimateFormData, TEstimateSystemKeys, TEstimatePointsObject, TEstimateTypeError } from "@plane/types";
@@ -200,13 +200,23 @@ export const CreateEstimateModal = observer(function CreateEstimateModal(props:
         </div>
 
         <div className="relative flex items-center justify-end gap-3 border-t border-subtle px-5 pt-5">
-          <Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
-            {t("common.cancel")}
-          </Button>
+          <Button
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            label={t("common.cancel")}
+            onClick={handleClose}
+            disabled={buttonLoader}
+          />
           {estimatePoints && (
-            <Button variant="primary" size="lg" onClick={handleCreateEstimate} disabled={buttonLoader}>
-              {buttonLoader ? t("common.creating") : t("project_settings.estimates.create.label")}
-            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={buttonLoader ? t("common.creating") : t("project_settings.estimates.create.label")}
+              onClick={handleCreateEstimate}
+              disabled={buttonLoader}
+            />
           )}
         </div>
       </div>
diff --git a/apps/web/core/components/estimates/delete/modal.tsx b/apps/web/core/components/estimates/delete/modal.tsx
index e6b39fcdec2..99b0511f361 100644
--- a/apps/web/core/components/estimates/delete/modal.tsx
+++ b/apps/web/core/components/estimates/delete/modal.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
@@ -76,12 +76,22 @@ export const DeleteEstimateModal = observer(function DeleteEstimateModal(props:
         </div>
 
         <div className="relative flex items-center justify-end gap-3 border-t border-subtle px-5 pt-5">
-          <Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
-            Cancel
-          </Button>
-          <Button variant="error-fill" size="lg" onClick={handleDeleteEstimate} disabled={buttonLoader}>
-            {buttonLoader ? "Deleting" : "Delete Estimate"}
-          </Button>
+          <Button
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            label="Cancel"
+            onClick={handleClose}
+            disabled={buttonLoader}
+          />
+          <Button
+            variant="danger"
+            size="md"
+            stretch="auto"
+            label={buttonLoader ? "Deleting" : "Delete Estimate"}
+            onClick={handleDeleteEstimate}
+            disabled={buttonLoader}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/estimates/points/create-root.tsx b/apps/web/core/components/estimates/points/create-root.tsx
index ad3c57e9fd7..00927b2df05 100644
--- a/apps/web/core/components/estimates/points/create-root.tsx
+++ b/apps/web/core/components/estimates/points/create-root.tsx
@@ -9,7 +9,7 @@ import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { estimateCount } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlusIcon } from "@plane/propel/icons";
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeError } from "@plane/types";
 import { Sortable } from "@plane/ui";
@@ -171,9 +171,14 @@ export const EstimatePointCreateRoot = observer(function EstimatePointCreateRoot
           />
         ))}
       {estimatePoints && estimatePoints.length + (estimatePointCreate?.length || 0) <= estimateCount.max - 1 && (
-        <Button variant="link" prependIcon={<PlusIcon />} onClick={handleCreate}>
-          Add {estimateType}
-        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          stretch="auto"
+          icon={<PlusIcon />}
+          onClick={handleCreate}
+          label={`Add ${estimateType}`}
+        />
       )}
     </div>
   );
diff --git a/apps/web/core/components/exporter/export-form.tsx b/apps/web/core/components/exporter/export-form.tsx
index 8fde52e1bf0..df8d9c8636e 100644
--- a/apps/web/core/components/exporter/export-form.tsx
+++ b/apps/web/core/components/exporter/export-form.tsx
@@ -16,7 +16,7 @@ import {
   // ISSUE_DISPLAY_FILTERS_BY_PAGE,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 // import { Tooltip } from "@plane/propel/tooltip";
 // import { EIssuesStoreType } from "@plane/types";
@@ -208,9 +208,14 @@ export const ExportForm = observer(function ExportForm(props: Props) {
           }
         />
         <div className="px-4 py-3">
-          <Button variant="primary" size="lg" type="submit" loading={exportLoading}>
-            {exportLoading ? `${t("workspace_settings.settings.exports.exporting")}...` : t("export")}
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={exportLoading ? `${t("workspace_settings.settings.exports.exporting")}...` : t("export")}
+            type="submit"
+            loading={exportLoading}
+          />
         </div>
       </div>
       {/* Rich Filters */}
diff --git a/apps/web/core/components/exporter/export-modal.tsx b/apps/web/core/components/exporter/export-modal.tsx
index 7ca85bca085..2fbf2572b1d 100644
--- a/apps/web/core/components/exporter/export-modal.tsx
+++ b/apps/web/core/components/exporter/export-modal.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IImporterService } from "@plane/types";
 // ui
@@ -153,14 +153,20 @@ export const Exporter = observer(function Exporter(props: Props) {
           onCheckedChange={setMultiple}
         />
         <div className="flex justify-end gap-2">
-          <Button variant="secondary" onClick={handleClose}>
-            {t("cancel")}
-          </Button>
-          <Button variant="primary" onClick={ExportCSVToMail} disabled={exportLoading} loading={exportLoading}>
-            {exportLoading
-              ? `${t("workspace_settings.settings.exports.exporting")}...`
-              : t("workspace_settings.settings.exports.title")}
-          </Button>
+          <Button variant="secondary" size="sm" stretch="auto" label={t("cancel")} onClick={handleClose} />
+          <Button
+            variant="primary"
+            size="sm"
+            stretch="auto"
+            label={
+              exportLoading
+                ? `${t("workspace_settings.settings.exports.exporting")}...`
+                : t("workspace_settings.settings.exports.title")
+            }
+            onClick={ExportCSVToMail}
+            disabled={exportLoading}
+            loading={exportLoading}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/exporter/prev-exports.tsx b/apps/web/core/components/exporter/prev-exports.tsx
index f3ebedb41f0..53880b10ef3 100644
--- a/apps/web/core/components/exporter/prev-exports.tsx
+++ b/apps/web/core/components/exporter/prev-exports.tsx
@@ -10,7 +10,7 @@ import useSWR, { mutate } from "swr";
 import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { IExportData } from "@plane/types";
 import { Table } from "@plane/ui";
@@ -78,31 +78,38 @@ export const PrevExports = observer(function PrevExports(props: Props) {
       <div className="flex items-center justify-between border-b border-subtle pb-3.5">
         <div className="flex items-center gap-2">
           <h3 className="text-h6-medium text-primary">{t("workspace_settings.settings.exports.previous_exports")}</h3>
-          <Button variant="tertiary" className="shrink-0" onClick={handleRefresh}>
-            <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />
-            {refreshing ? t("refreshing") : t("refresh_status")}
-          </Button>
+          <span className="shrink-0">
+            <Button
+              variant="tertiary"
+              size="sm"
+              stretch="auto"
+              onClick={handleRefresh}
+              icon={<RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />}
+              label={refreshing ? t("refreshing") : t("refresh_status")}
+            />
+          </span>
         </div>
         {Array.isArray(exporterServices?.results) && exporterServices.results.length > 0 && (
           <div className="flex items-center gap-2 text-11">
             <Button
               variant="secondary"
-              size="sm"
+              size="xs"
+              stretch="auto"
+              label={t("prev")}
+              icon={<MoveLeft />}
               disabled={!exporterServices?.prev_page_results}
               onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
-              prependIcon={<MoveLeft />}
-            >
-              {t("prev")}
-            </Button>
+            />
             <Button
               variant="secondary"
-              size="sm"
+              size="xs"
+              stretch="auto"
+              label={t("next")}
+              icon={<MoveRight />}
+              iconPosition="end"
               disabled={!exporterServices?.next_page_results}
               onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
-              appendIcon={<MoveRight />}
-            >
-              {t("next")}
-            </Button>
+            />
           </div>
         )}
       </div>
diff --git a/apps/web/core/components/exporter/single-export.tsx b/apps/web/core/components/exporter/single-export.tsx
index 8bd05281e93..9f67e196c7e 100644
--- a/apps/web/core/components/exporter/single-export.tsx
+++ b/apps/web/core/components/exporter/single-export.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IExportData } from "@plane/types";
 // helpers
 import { getDate, renderFormattedDate } from "@plane/utils";
@@ -66,9 +66,7 @@ export function SingleExport({ service, refreshing }: Props) {
           {service.status == "completed" && (
             <div>
               <a target="_blank" href={service?.url} rel="noopener noreferrer">
-                <Button variant="primary" className="w-full">
-                  {isLoading ? "Downloading..." : "Download"}
-                </Button>
+                <Button variant="primary" size="sm" stretch="full" label={isLoading ? "Downloading..." : "Download"} />
               </a>
             </div>
           )}
diff --git a/apps/web/core/components/global/product-updates/footer.tsx b/apps/web/core/components/global/product-updates/footer.tsx
index 09965aac3e3..e2ae29b179f 100644
--- a/apps/web/core/components/global/product-updates/footer.tsx
+++ b/apps/web/core/components/global/product-updates/footer.tsx
@@ -6,10 +6,8 @@
 
 import { useTranslation } from "@plane/i18n";
 // ui
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlaneLogo } from "@plane/propel/icons";
-// helpers
-import { cn } from "@plane/utils";
 
 export function ProductUpdatesFooter() {
   const { t } = useTranslation();
@@ -58,18 +56,15 @@ export function ProductUpdatesFooter() {
           Forum
         </a>
       </div>
-      <a
-        href="https://plane.so/pages"
-        target="_blank"
-        className={cn(
-          getButtonStyling("secondary", "base"),
-          "flex items-center gap-1.5 text-center font-medium underline-offset-2 outline-none hover:underline"
-        )}
-        rel="noreferrer"
-      >
-        <PlaneLogo className="h-4 w-auto text-primary" />
-        {t("powered_by_plane_pages")}
-      </a>
+      <Button
+        variant="secondary"
+        size="sm"
+        stretch="auto"
+        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" />}
+      />
     </div>
   );
 }
diff --git a/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx b/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
index e79933fa7a5..664ecddac83 100644
--- a/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
+++ b/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
@@ -12,7 +12,7 @@ import { Controller, useForm } from "react-hook-form";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { TLinkEditableFields } from "@plane/types";
 import { ModalCore } from "@plane/ui";
 import type { TLinkOperations } from "./use-links";
@@ -134,13 +134,15 @@ export const LinkCreateUpdateModal = observer(function LinkCreateUpdateModal(pro
           </div>
         </div>
         <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            {t("Cancel")}
-          </Button>
-          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-            {preloadedData?.id ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}{" "}
-            {t("home.quick_links.title")}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label={t("Cancel")} onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={`${preloadedData?.id ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")} ${t("home.quick_links.title")}`}
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
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 5243521731e..4e28160c4a8 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -10,7 +10,7 @@ import { Clock, FileStack, MoreHorizontal, MoveRight } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button";
 import {
   LinkIcon,
@@ -328,7 +328,10 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
             {canMarkAsAccepted && (
               <Button
                 variant="secondary"
-                size="lg"
+                size="md"
+                stretch="auto"
+                icon={<CheckCircleFilledIcon className="size-4 shrink-0 text-success-secondary" />}
+                label={t("inbox_issue.actions.accept")}
                 onClick={() =>
                   handleActionWithPermission(
                     isProjectAdmin,
@@ -336,16 +339,16 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
                     t("inbox_issue.errors.accept_permission")
                   )
                 }
-              >
-                <CheckCircleFilledIcon className="size-4 shrink-0 text-success-secondary" />
-                {t("inbox_issue.actions.accept")}
-              </Button>
+              />
             )}
 
             {canMarkAsDeclined && (
               <Button
                 variant="secondary"
-                size="lg"
+                size="md"
+                stretch="auto"
+                icon={<CloseCircleFilledIcon className="size-4 shrink-0 text-danger-secondary" />}
+                label={t("inbox_issue.actions.decline")}
                 onClick={() =>
                   handleActionWithPermission(
                     isProjectAdmin,
@@ -353,26 +356,27 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
                     t("inbox_issue.errors.decline_permission")
                   )
                 }
-              >
-                <CloseCircleFilledIcon className="size-4 shrink-0 text-danger-secondary" />
-                {t("inbox_issue.actions.decline")}
-              </Button>
+              />
             )}
 
             {isAcceptedOrDeclined ? (
               <div className="flex items-center gap-2">
                 <Button
                   variant="secondary"
-                  size="lg"
-                  prependIcon={<LinkIcon className="h-2.5 w-2.5" />}
+                  size="md"
+                  stretch="auto"
+                  label={t("inbox_issue.actions.copy")}
+                  icon={<LinkIcon className="h-2.5 w-2.5" />}
                   onClick={() => handleCopyIssueLink(workItemLink)}
-                >
-                  {t("inbox_issue.actions.copy")}
-                </Button>
+                />
                 <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
-                  <Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />}>
-                    {t("inbox_issue.actions.open")}
-                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="md"
+                    stretch="auto"
+                    label={t("inbox_issue.actions.open")}
+                    icon={<NewTabIcon className="h-2.5 w-2.5" />}
+                  />
                 </ControlLink>
               </div>
             ) : (
diff --git a/apps/web/core/components/inbox/inbox-filter/root.tsx b/apps/web/core/components/inbox/inbox-filter/root.tsx
index 2413ccc382f..6a0909af7cb 100644
--- a/apps/web/core/components/inbox/inbox-filter/root.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/root.tsx
@@ -5,10 +5,9 @@
  */
 
 import { ListFilter } from "lucide-react";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 // plane imports
 import { ChevronDownIcon } from "@plane/propel/icons";
-import { cn } from "@plane/utils";
 // components
 import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
 // hooks
@@ -20,11 +19,11 @@ import { InboxIssueOrderByDropdown } from "./sorting/order-by";
 const smallButton = <ListFilter className="size-3" />;
 
 const largeButton = (
-  <div className={cn(getButtonStyling("secondary", "base"), "px-2 text-tertiary")}>
+  <Button variant="secondary" size="sm" stretch="auto" render={<div />}>
     <ListFilter className="size-3" />
     <span>Filters</span>
     <ChevronDownIcon className="size-3" strokeWidth={2} />
-  </div>
+  </Button>
 );
 export function FiltersRoot() {
   const windowSize = useSize();
diff --git a/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx b/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
index ad2e720c715..385a6473f53 100644
--- a/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
@@ -8,13 +8,10 @@ import { observer } from "mobx-react";
 import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
 import { INBOX_ISSUE_ORDER_BY_OPTIONS, INBOX_ISSUE_SORT_BY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { TInboxIssueSortingOrderByKeys, TInboxIssueSortingSortByKeys } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
-// constants
-// helpers
-import { cn } from "@plane/utils";
 // hooks
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 import useSize from "@/hooks/use-window-size";
@@ -33,7 +30,7 @@ export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDrop
       <ArrowDownWideNarrow className="size-3" />
     );
   const largeButton = (
-    <div className={cn(getButtonStyling("secondary", "base"), "px-2 text-tertiary")}>
+    <Button variant="secondary" size="sm" stretch="auto" render={<div />}>
       {inboxSorting?.sort_by === "asc" ? (
         <ArrowUpWideNarrow className="size-3" />
       ) : (
@@ -41,7 +38,7 @@ export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDrop
       )}
       {t(orderByDetails?.i18n_label || "inbox_issue.order_by.created_at")}
       <ChevronDownIcon className="size-3" strokeWidth={2} />
-    </div>
+    </Button>
   );
   return (
     <CustomMenu
diff --git a/apps/web/core/components/inbox/modals/create-modal/create-root.tsx b/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
index 8c130a579e4..276aab6a9cb 100644
--- a/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
@@ -13,7 +13,7 @@ import { observer } from "mobx-react";
 import { ETabIndices } from "@plane/constants";
 import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue } from "@plane/types";
 import { Switch } from "@makeplane/propel/components/switch";
@@ -218,7 +218,9 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
             <div className="flex items-center gap-3">
               <Button
                 variant="secondary"
-                size="lg"
+                size="md"
+                stretch="auto"
+                label={t("discard")}
                 type="button"
                 onClick={() => {
                   if (descriptionEditorRef.current?.isEditorReadyToDiscard()) {
@@ -232,20 +234,18 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
                   }
                 }}
                 tabIndex={getIndex("discard_button")}
-              >
-                {t("discard")}
-              </Button>
+              />
               <Button
                 variant="primary"
+                size="md"
+                stretch="auto"
+                label={formSubmitting ? t("creating") : t("create_work_item")}
                 ref={submitBtnRef}
                 type="submit"
                 loading={formSubmitting}
                 disabled={isTitleLengthMoreThan255Character}
                 tabIndex={getIndex("submit_button")}
-                size="lg"
-              >
-                {formSubmitting ? t("creating") : t("create_work_item")}
-              </Button>
+              />
             </div>
           </div>
         </form>
diff --git a/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx b/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
index 1ad83a6b0e5..700c517ca4d 100644
--- a/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
+++ b/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 // ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Calendar } from "@plane/propel/calendar";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 
@@ -52,13 +52,14 @@ export function InboxIssueSnoozeModal(props: InboxIssueSnoozeModalProps) {
         />
         <Button
           variant="primary"
+          size="sm"
+          stretch="auto"
+          label={t("inbox_issue.actions.snooze")}
           onClick={() => {
             handleClose();
             onConfirm(date);
           }}
-        >
-          {t("inbox_issue.actions.snooze")}
-        </Button>
+        />
       </div>
     </ModalCore>
   );
diff --git a/apps/web/core/components/instance/not-ready-view.tsx b/apps/web/core/components/instance/not-ready-view.tsx
index 850d0af2ebc..998055c52e4 100644
--- a/apps/web/core/components/instance/not-ready-view.tsx
+++ b/apps/web/core/components/instance/not-ready-view.tsx
@@ -11,7 +11,7 @@ import GradientLogo from "@/app/assets/auth/gradient-logo.webp?url";
 import GradientBgLogo from "@/app/assets/auth/gradient-bg-logo.webp?url";
 import DefaultLayout from "@/layouts/default-layout";
 import { PlaneLockup } from "@plane/propel/icons";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 export function InstanceNotReady() {
   return (
@@ -46,9 +46,7 @@ export function InstanceNotReady() {
               </div>
             </div>
             <a href={GOD_MODE_URL} className="w-72">
-              <Button variant="primary" className="w-full" size="xl">
-                Get started
-              </Button>
+              <Button variant="primary" size="lg" stretch="full" label="Get started" />
             </a>
           </div>
         </div>
diff --git a/apps/web/core/components/integration/single-integration-card.tsx b/apps/web/core/components/integration/single-integration-card.tsx
index 6f638012ba0..dabaaaf18c9 100644
--- a/apps/web/core/components/integration/single-integration-card.tsx
+++ b/apps/web/core/components/integration/single-integration-card.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
 import { CheckCircle } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
@@ -144,18 +144,20 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
             disabled={isUserAdmin}
             tooltipContent={!isUserAdmin ? "You don't have permission to perform this" : null}
           >
-            <Button
-              className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}
-              variant="error-fill"
-              onClick={() => {
-                if (!isUserAdmin) return;
-                handleRemoveIntegration();
-              }}
-              disabled={!isUserAdmin}
-              loading={deletingIntegration}
-            >
-              {deletingIntegration ? "Uninstalling..." : "Uninstall"}
-            </Button>
+            <span className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}>
+              <Button
+                variant="danger"
+                size="sm"
+                stretch="auto"
+                label={deletingIntegration ? "Uninstalling..." : "Uninstall"}
+                onClick={() => {
+                  if (!isUserAdmin) return;
+                  handleRemoveIntegration();
+                }}
+                disabled={!isUserAdmin}
+                loading={deletingIntegration}
+              />
+            </span>
           </Tooltip>
         ) : (
           <Tooltip
@@ -163,17 +165,19 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
             disabled={isUserAdmin}
             tooltipContent={!isUserAdmin ? "You don't have permission to perform this" : null}
           >
-            <Button
-              className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}
-              variant="primary"
-              onClick={() => {
-                if (!isUserAdmin) return;
-                startAuth();
-              }}
-              loading={isInstalling}
-            >
-              {isInstalling ? "Installing..." : "Install"}
-            </Button>
+            <span className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}>
+              <Button
+                variant="primary"
+                size="sm"
+                stretch="auto"
+                label={isInstalling ? "Installing..." : "Install"}
+                onClick={() => {
+                  if (!isUserAdmin) return;
+                  startAuth();
+                }}
+                loading={isInstalling}
+              />
+            </span>
           </Tooltip>
         )
       ) : (
diff --git a/apps/web/core/components/issues/archive-issue-modal.tsx b/apps/web/core/components/issues/archive-issue-modal.tsx
index ad487abca11..0c848a1d893 100644
--- a/apps/web/core/components/issues/archive-issue-modal.tsx
+++ b/apps/web/core/components/issues/archive-issue-modal.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TDeDupeIssue, TIssue } from "@plane/types";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -75,12 +75,16 @@ export function ArchiveIssueModal(props: Props) {
         </h3>
         <p className="mt-3 text-13 text-secondary">{t("issue.archive.confirm_message")}</p>
         <div className="mt-3 flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            {t("common.cancel")}
-          </Button>
-          <Button variant="primary" size="lg" tabIndex={1} onClick={handleArchiveIssue} loading={isArchiving}>
-            {isArchiving ? t("common.archiving") : t("common.archive")}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label={t("common.cancel")} onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isArchiving ? t("common.archiving") : t("common.archive")}
+            tabIndex={1}
+            onClick={handleArchiveIssue}
+            loading={isArchiving}
+          />
         </div>
       </div>
     </ModalCore>
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 bfd33369020..2db6b84bec8 100644
--- a/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
+++ b/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
@@ -5,7 +5,7 @@
  */
 
 import { MARKETING_PLANE_ONE_PAGE_LINK } from "@plane/constants";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -22,14 +22,16 @@ export function BulkOperationsUpgradeBanner(props: Props) {
           Change state, priority, and more for several work items at once. Save three minutes on an average per
           operation.
         </p>
-        <a
-          href={MARKETING_PLANE_ONE_PAGE_LINK}
-          target="_blank"
-          rel="noopener noreferrer"
-          className={cn(getButtonStyling("primary", "base"), "flex-shrink-0")}
-        >
-          Upgrade to One
-        </a>
+        <span className="flex-shrink-0">
+          <Button
+            variant="primary"
+            size="sm"
+            stretch="auto"
+            label="Upgrade to One"
+            nativeButton={false}
+            render={<a href={MARKETING_PLANE_ONE_PAGE_LINK} target="_blank" rel="noopener noreferrer" />}
+          />
+        </span>
       </div>
     </div>
   );
diff --git a/apps/web/core/components/issues/confirm-issue-discard.tsx b/apps/web/core/components/issues/confirm-issue-discard.tsx
index 9ba05b9afd8..9e9afbb2234 100644
--- a/apps/web/core/components/issues/confirm-issue-discard.tsx
+++ b/apps/web/core/components/issues/confirm-issue-discard.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 
 type Props = {
@@ -48,17 +48,18 @@ export function ConfirmIssueDiscard(props: Props) {
       </div>
       <div className="flex justify-between gap-2 p-4 sm:px-6">
         <div>
-          <Button variant="secondary" onClick={onDiscard}>
-            Discard
-          </Button>
+          <Button variant="secondary" size="sm" stretch="auto" label="Discard" onClick={onDiscard} />
         </div>
         <div className="flex items-center gap-2">
-          <Button variant="secondary" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="primary" onClick={handleDeletion} loading={isLoading}>
-            {isLoading ? "Saving" : "Save to Drafts"}
-          </Button>
+          <Button variant="secondary" size="sm" stretch="auto" label="Cancel" onClick={onClose} />
+          <Button
+            variant="primary"
+            size="sm"
+            stretch="auto"
+            label={isLoading ? "Saving" : "Save to Drafts"}
+            onClick={handleDeletion}
+            loading={isLoading}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/issues/filters.tsx b/apps/web/core/components/issues/filters.tsx
index cbd899e9f24..abee6c9a1a0 100644
--- a/apps/web/core/components/issues/filters.tsx
+++ b/apps/web/core/components/issues/filters.tsx
@@ -10,7 +10,7 @@ import { ChartNoAxesColumn, SlidersHorizontal } from "lucide-react";
 // plane imports
 import { EIssueFilterType, ISSUE_STORE_TO_FILTERS_MAP } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
 // hooks
@@ -126,12 +126,16 @@ export const HeaderFilters = observer(function HeaderFilters(props: Props) {
         />
       </FiltersDropdown>
       {canUserCreateIssue ? (
-        <Button className="hidden px-2 md:block" onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
-          <div className="hidden @4xl:flex">{t("common.analytics")}</div>
-          <div className="flex @4xl:hidden">
-            <ChartNoAxesColumn className="size-3.5" />
-          </div>
-        </Button>
+        <span className="hidden px-2 md:block">
+          <Button
+            onClick={() => setAnalyticsModal(true)}
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            icon={<ChartNoAxesColumn className="size-3.5" />}
+            label={t("common.analytics")}
+          />
+        </span>
       ) : (
         <></>
       )}
diff --git a/apps/web/core/components/issues/header.tsx b/apps/web/core/components/issues/header.tsx
index b032f11c115..6ae414f9bf3 100644
--- a/apps/web/core/components/issues/header.tsx
+++ b/apps/web/core/components/issues/header.tsx
@@ -11,7 +11,7 @@ import { Circle } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, SPACE_BASE_PATH, SPACE_BASE_URL } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { NewTabIcon, WorkItemsIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { EIssuesStoreType } from "@plane/types";
@@ -115,14 +115,13 @@ export const IssuesHeader = observer(function IssuesHeader() {
         {canUserCreateIssue && (
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
             onClick={() => {
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
             }}
-          >
-            <div className="block sm:hidden">{t("issue.label", { count: 1 })}</div>
-            <div className="hidden sm:block">{t("issue.add.label")}</div>
-          </Button>
+            label={t("issue.add.label")}
+          />
         )}
       </Header.RightItem>
     </Header>
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx
index ef808a1fe7c..c48c0192662 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { ListFilter } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { GroupByColumnTypes, TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
 import { EIssueServiceType, EIssuesStoreType } from "@plane/types";
 // hooks
@@ -102,9 +102,13 @@ export const SubIssuesListRoot = observer(function SubIssuesListRoot(props: Prop
           icon={<ListFilter />}
           customClassName={storeType !== EIssuesStoreType.EPIC ? "border-none" : ""}
           actionElement={
-            <Button variant="secondary" onClick={() => resetFilters(rootIssueId)}>
-              {t("sub_work_item.empty_state.list_filters.action")}
-            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              stretch="auto"
+              label={t("sub_work_item.empty_state.list_filters.action")}
+              onClick={() => resetFilters(rootIssueId)}
+            />
           }
         />
       ) : (
diff --git a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
index df2dd31cf5d..84fd0c71104 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // helpers
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   icon: React.ReactNode;
@@ -16,10 +16,5 @@ type Props = {
 
 export function IssueDetailWidgetButton(props: Props) {
   const { icon, title, disabled = false } = props;
-  return (
-    <Button variant={"secondary"} disabled={disabled} size="lg">
-      {icon && icon}
-      <span className="text-body-xs-medium">{title}</span>
-    </Button>
-  );
+  return <Button variant="secondary" size="md" stretch="auto" disabled={disabled} icon={icon} label={title} />;
 }
diff --git a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
index ff2f84f7d41..4c1bf9c9300 100644
--- a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
@@ -5,7 +5,7 @@
  */
 
 import { observer } from "mobx-react";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CloseIcon, LabelFilledIcon } from "@plane/propel/icons";
 // types
 import { useLabel } from "@/hooks/store/use-label";
@@ -37,10 +37,15 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
 
   if (!label) return <></>;
   return (
-    <Button variant="tertiary" size="sm" key={labelId} onClick={handleLabel} disabled={disabled}>
-      <LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />
-      <span className="text-body-xs-regular">{label.name}</span>
-      {!disabled && <CloseIcon className="h-2.5 w-2.5 transition-all group-hover:text-danger-primary" />}
-    </Button>
+    <Button
+      variant="tertiary"
+      size="xs"
+      stretch="auto"
+      key={labelId}
+      onClick={handleLabel}
+      disabled={disabled}
+      icon={<LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />}
+      label={label.name}
+    />
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
index 9c006514610..a4383b3d146 100644
--- a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
@@ -12,7 +12,7 @@ import { Combobox } from "@headlessui/react";
 // plane imports
 import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CheckIcon, SearchIcon, PlusIcon } from "@plane/propel/icons";
 import type { IIssueLabel } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
@@ -92,7 +92,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
 
   const issueLabels = values ?? [];
 
-  const label = <span className="text-body-xs-medium text-placeholder">{t("label.select")}</span>;
+  const label = t("label.select");
 
   const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (query !== "" && e.key === "Escape") {
@@ -128,15 +128,15 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
       >
         <Combobox.Button as={Fragment}>
           <Button
+            variant="tertiary"
+            size="xs"
+            stretch="auto"
+            label={label}
+            icon={<PlusIcon />}
             ref={setReferenceElement}
             type="button"
-            variant="tertiary"
-            size="sm"
-            prependIcon={<PlusIcon />}
             onClick={() => !projectLabels && fetchLabels()}
-          >
-            {label}
-          </Button>
+          />
         </Combobox.Button>
 
         <Combobox.Options as="ul" className="fixed z-10">
diff --git a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
index 91c3e4f403c..334eba7ffde 100644
--- a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
@@ -11,7 +11,7 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@plane/i18n";
 // plane types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { TIssueLinkEditableFields, TIssueServiceType } from "@plane/types";
 // plane ui
 import { ModalCore } from "@plane/ui";
@@ -142,11 +142,12 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
           </div>
         </div>
         <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            {t("common.cancel")}
-          </Button>
-          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-            {`${
+          <Button variant="secondary" size="md" stretch="auto" label={t("common.cancel")} onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={`${
               preloadedData?.id
                 ? isSubmitting
                   ? t("common.updating")
@@ -155,7 +156,9 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
                   ? t("common.adding")
                   : t("common.add")
             } ${t("common.link")}`}
-          </Button>
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/issues/issue-detail/subscription.tsx b/apps/web/core/components/issues/issue-detail/subscription.tsx
index d9573d63c62..a06d1125655 100644
--- a/apps/web/core/components/issues/issue-detail/subscription.tsx
+++ b/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -12,7 +12,7 @@ import { Bell, BellOff } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // UI
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EIssueServiceType } from "@plane/types";
 import { Loader } from "@plane/ui";
@@ -82,23 +82,15 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
   return (
     <div>
       <Button
-        prependIcon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
+        icon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
         variant="secondary"
-        className="hover:!bg-accent-primary/20"
+        size="md"
+        stretch="auto"
         onClick={handleSubscription}
         disabled={!isEditable || loading}
-        size="lg"
-      >
-        {loading ? (
-          <span>
-            <span className="hidden sm:block">{t("common.loading")}</span>
-          </span>
-        ) : isSubscribed ? (
-          <div className="hidden sm:block">{t("common.actions.unsubscribe")}</div>
-        ) : (
-          <div className="hidden sm:block">{t("common.actions.subscribe")}</div>
-        )}
-      </Button>
+        loading={loading}
+        label={isSubscribed ? t("common.actions.unsubscribe") : t("common.actions.subscribe")}
+      />
     </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 fdf49f374a8..6ecdfab98a8 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
@@ -10,7 +10,7 @@ import { usePopper } from "react-popper";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   children: React.ReactNode;
@@ -55,35 +55,29 @@ export function FiltersDropdown(props: Props) {
               </button>
             ) : (
               <div ref={setReferenceElement}>
-                <div className="hidden @4xl:flex">
+                <div className="relative hidden @4xl:flex">
                   <Button
                     disabled={disabled}
                     variant="secondary"
-                    prependIcon={icon}
+                    size="md"
+                    stretch="auto"
+                    icon={icon}
                     tabIndex={tabIndex}
-                    className="relative"
-                    size="lg"
-                  >
-                    <>
-                      <div className={`${open ? "text-primary" : "text-secondary"}`}>
-                        <span>{title}</span>
-                      </div>
-                      {isFiltersApplied && (
-                        <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-accent-primary" />
-                      )}
-                    </>
-                  </Button>
+                    label={title ?? ""}
+                  />
+                  {isFiltersApplied && (
+                    <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-accent-primary" />
+                  )}
                 </div>
                 <div className="flex @4xl:hidden">
                   <Button
-                    disabled={disabled}
-                    ref={setReferenceElement}
                     variant="secondary"
+                    size="md"
+                    stretch="auto"
+                    label={typeof title === "string" ? title : "Filters"}
+                    disabled={disabled}
                     tabIndex={tabIndex}
-                    size="lg"
-                  >
-                    {miniIcon || title}
-                  </Button>
+                  />
                 </div>
               </div>
             )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
index 14f74909465..6edf182d77d 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
@@ -6,7 +6,7 @@
 
 import { ISSUE_LAYOUTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ChevronDownIcon } from "@plane/propel/icons";
 import type { EIssueLayoutTypes } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
@@ -29,12 +29,19 @@ export function MobileLayoutSelection({
       className="flex flex-grow justify-center text-13 text-secondary"
       placement="bottom-start"
       customButton={
-        <Button variant="secondary" className="relative px-2">
-          {activeLayout && (
-            <IssueLayoutIcon layout={activeLayout} size={14} strokeWidth={2} className={`h-3.5 w-3.5`} />
-          )}
-          <ChevronDownIcon className="my-auto size-3 text-secondary" strokeWidth={2} />
-        </Button>
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          icon={
+            activeLayout ? (
+              <IssueLayoutIcon layout={activeLayout} size={14} strokeWidth={2} className="h-3.5 w-3.5" />
+            ) : (
+              <ChevronDownIcon className="my-auto size-3 text-secondary" strokeWidth={2} />
+            )
+          }
+          label={t("common.layout")}
+        />
       }
       customButtonClassName="flex flex-grow justify-center text-secondary text-13"
       closeOnSelect
diff --git a/apps/web/core/components/issues/issue-modal/form.tsx b/apps/web/core/components/issues/issue-modal/form.tsx
index a9ea0faa355..0ed2505fd57 100644
--- a/apps/web/core/components/issues/issue-modal/form.tsx
+++ b/apps/web/core/components/issues/issue-modal/form.tsx
@@ -16,7 +16,7 @@ import { ETabIndices, DEFAULT_WORK_ITEM_FORM_VALUES } from "@plane/constants";
 import type { EditorRefApi } from "@plane/editor";
 // i18n
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue, TWorkspaceDraftIssue } from "@plane/types";
 // hooks
@@ -467,7 +467,9 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                     <div tabIndex={getIndex("discard_button")}>
                       <Button
                         variant="secondary"
-                        size="lg"
+                        size="md"
+                        stretch="auto"
+                        label={t("discard")}
                         onClick={() => {
                           if (editorRef.current?.isEditorReadyToDiscard()) {
                             onClose();
@@ -479,34 +481,32 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                             });
                           }
                         }}
-                      >
-                        {t("discard")}
-                      </Button>
+                      />
                     </div>
                     <div tabIndex={isDraft ? getIndex("submit_button") : getIndex("draft_button")}>
                       <Button
-                        variant={moveToIssue ? "secondary" : "primary"}
-                        size="lg"
+                        variant="primary"
+                        size="md"
+                        stretch="auto"
+                        label={isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
                         type="submit"
                         ref={submitBtnRef}
                         loading={isSubmitting}
                         disabled={isDisabled}
-                      >
-                        {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
-                      </Button>
+                      />
                     </div>
 
                     {moveToIssue && (
                       <Button
                         variant="primary"
+                        size="md"
+                        stretch="auto"
+                        label={t("add_to_project")}
                         type="button"
                         loading={isMoving}
                         onClick={handleMoveToProjects}
                         disabled={isMoving}
-                        size="lg"
-                      >
-                        {t("add_to_project")}
-                      </Button>
+                      />
                     )}
                   </div>
                 </div>
diff --git a/apps/web/core/components/labels/create-update-label-inline.tsx b/apps/web/core/components/labels/create-update-label-inline.tsx
index 70be4ca9198..8cac5a51d66 100644
--- a/apps/web/core/components/labels/create-update-label-inline.tsx
+++ b/apps/web/core/components/labels/create-update-label-inline.tsx
@@ -15,7 +15,7 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IIssueLabel } from "@plane/types";
 
@@ -238,19 +238,18 @@ export const CreateUpdateLabelInline = observer(
               )}
             />
           </div>
-          <Button variant="secondary" onClick={() => handleClose()}>
-            {t("cancel")}
-          </Button>
+          <Button variant="secondary" size="sm" stretch="auto" label={t("cancel")} onClick={() => handleClose()} />
           <Button
             variant="primary"
+            size="sm"
+            stretch="auto"
+            label={isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}
             onClick={(e) => {
               e.preventDefault();
               handleSubmit(handleFormSubmit)();
             }}
             loading={isSubmitting}
-          >
-            {isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}
-          </Button>
+          />
         </div>
         {errors.name?.message && <p className="p-0.5 pl-8 text-13 text-danger-primary">{errors.name?.message}</p>}
       </>
diff --git a/apps/web/core/components/labels/project-setting-label-list.tsx b/apps/web/core/components/labels/project-setting-label-list.tsx
index 6bb506970ae..80c99a264af 100644
--- a/apps/web/core/components/labels/project-setting-label-list.tsx
+++ b/apps/web/core/components/labels/project-setting-label-list.tsx
@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { IIssueLabel } from "@plane/types";
 import { Loader } from "@plane/ui";
@@ -85,9 +85,7 @@ export const ProjectSettingsLabelList = observer(function ProjectSettingsLabelLi
         description={t("project_settings.labels.description")}
         control={
           isEditable && (
-            <Button variant="primary" size="lg" onClick={newLabel}>
-              {t("common.add_label")}
-            </Button>
+            <Button variant="primary" size="md" stretch="auto" label={t("common.add_label")} onClick={newLabel} />
           )
         }
       />
diff --git a/apps/web/core/components/license/modal/card/checkout-button.tsx b/apps/web/core/components/license/modal/card/checkout-button.tsx
index 01de02caf85..d21d7bcd830 100644
--- a/apps/web/core/components/license/modal/card/checkout-button.tsx
+++ b/apps/web/core/components/license/modal/card/checkout-button.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
 import { Loader } from "@plane/ui";
 // local imports
@@ -73,23 +73,26 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
         </Loader>
       ) : (
         <div className="flex w-full flex-col items-center justify-center space-y-4">
-          <Button
-            variant="primary"
-            size="lg"
-            className="w-56"
-            onClick={() => {
-              if (product && price.id) {
-                handleCheckout({
-                  planVariant,
-                  productId: product.id,
-                  priceId: price.id,
-                });
+          <span className="w-56">
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={
+                upgradeLoaderType === planVariant ? "Redirecting to Stripe" : (upgradeCTA ?? `Upgrade to ${planeName}`)
               }
-            }}
-            disabled={!!upgradeLoaderType}
-          >
-            {upgradeLoaderType === planVariant ? "Redirecting to Stripe" : (upgradeCTA ?? `Upgrade to ${planeName}`)}
-          </Button>
+              onClick={() => {
+                if (product && price.id) {
+                  handleCheckout({
+                    planVariant,
+                    productId: product.id,
+                    priceId: price.id,
+                  });
+                }
+              }}
+              disabled={!!upgradeLoaderType}
+            />
+          </span>
           {isTrialAllowed && !isSelfHosted && (
             <div className="mt-1 h-3">
               {renderTrialButton &&
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 c12ee704229..7869d7ddaa9 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
@@ -7,10 +7,9 @@
 import { observer } from "mobx-react";
 // types
 // plane imports
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
 import { Loader } from "@plane/ui";
-import { cn } from "@plane/utils";
 // local imports
 import { BasePaidPlanCard } from "./base-paid-plan-card";
 
@@ -72,9 +71,16 @@ export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSa
         </Loader>
       ) : (
         <div className="flex w-full flex-col items-center justify-center">
-          <a href={href} target="_blank" className={cn(getButtonStyling("primary", "lg"), "w-56")} rel="noreferrer">
-            Talk to Sales
-          </a>
+          <span className="w-56">
+            <Button
+              variant="primary"
+              size="md"
+              stretch="full"
+              label="Talk to Sales"
+              nativeButton={false}
+              render={<a href={href} target="_blank" rel="noreferrer" />}
+            />
+          </span>
           {isTrialAllowed && !isSelfHosted && (
             <div className="mt-4 h-4">
               {renderTrialButton &&
diff --git a/apps/web/core/components/modules/archived-modules/modal.tsx b/apps/web/core/components/modules/archived-modules/modal.tsx
index 58067d62c64..5ab959a6d9f 100644
--- a/apps/web/core/components/modules/archived-modules/modal.tsx
+++ b/apps/web/core/components/modules/archived-modules/modal.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
@@ -69,12 +69,16 @@ export function ArchiveModuleModal(props: Props) {
           Are you sure you want to archive the module? All your archives can be restored later.
         </p>
         <div className="mt-3 flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="primary" size="lg" tabIndex={1} onClick={handleArchiveModule} loading={isArchiving}>
-            {isArchiving ? "Archiving" : "Archive"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isArchiving ? "Archiving" : "Archive"}
+            tabIndex={1}
+            onClick={handleArchiveModule}
+            loading={isArchiving}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/modules/dropdowns/order-by.tsx b/apps/web/core/components/modules/dropdowns/order-by.tsx
index b33cf62cd37..0e615d55dfc 100644
--- a/apps/web/core/components/modules/dropdowns/order-by.tsx
+++ b/apps/web/core/components/modules/dropdowns/order-by.tsx
@@ -7,15 +7,11 @@
 import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
 import { MODULE_ORDER_BY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { TModuleOrderByOptions } from "@plane/types";
 // ui
 import { CustomMenu } from "@plane/ui";
-// helpers
-import { cn } from "@plane/utils";
-// types
-// constants
 
 type Props = {
   onChange: (value: TModuleOrderByOptions) => void;
@@ -35,11 +31,11 @@ export function ModuleOrderByDropdown(props: Props) {
   return (
     <CustomMenu
       customButton={
-        <div className={cn(getButtonStyling("secondary", "lg"), "px-2 text-tertiary")}>
+        <Button variant="secondary" size="md" stretch="auto" render={<div />}>
           {!isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />}
           {orderByDetails && t(orderByDetails?.i18n_label)}
           <ChevronDownIcon className="size-3" strokeWidth={2} />
-        </div>
+        </Button>
       }
       placement="bottom-end"
       maxHeight="lg"
diff --git a/apps/web/core/components/modules/form.tsx b/apps/web/core/components/modules/form.tsx
index 3eb632eff76..5216929b12f 100644
--- a/apps/web/core/components/modules/form.tsx
+++ b/apps/web/core/components/modules/form.tsx
@@ -11,7 +11,7 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { ETabIndices } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IModule } from "@plane/types";
 // ui
 import { TextArea } from "@plane/ui";
@@ -238,18 +238,31 @@ export function ModuleForm(props: Props) {
         </div>
       </div>
       <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-        <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
-          {t("cancel")}
-        </Button>
-        <Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
-          {status
-            ? isSubmitting
-              ? t("updating")
-              : t("project_module.update_module")
-            : isSubmitting
-              ? t("creating")
-              : t("project_module.create_module")}
-        </Button>
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          label={t("cancel")}
+          onClick={handleClose}
+          tabIndex={getIndex("cancel")}
+        />
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          label={
+            status
+              ? isSubmitting
+                ? t("updating")
+                : t("project_module.update_module")
+              : isSubmitting
+                ? t("creating")
+                : t("project_module.create_module")
+          }
+          type="submit"
+          loading={isSubmitting}
+          tabIndex={getIndex("submit")}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/modules/links/create-update-modal.tsx b/apps/web/core/components/modules/links/create-update-modal.tsx
index 3d437a07e01..03da1b45f00 100644
--- a/apps/web/core/components/modules/links/create-update-modal.tsx
+++ b/apps/web/core/components/modules/links/create-update-modal.tsx
@@ -7,9 +7,9 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 // plane types
+import { Button } from "@makeplane/propel/components/button";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
-import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ILinkDetails, ModuleLink } from "@plane/types";
 // plane ui
@@ -144,12 +144,15 @@ export function CreateUpdateModuleLinkModal(props: Props) {
           </div>
         </div>
         <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-            {data ? (isSubmitting ? "Updating link" : "Update link") : isSubmitting ? "Adding link" : "Add link"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={onClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={data ? (isSubmitting ? "Updating link" : "Update link") : isSubmitting ? "Adding link" : "Add link"}
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/onboarding/create-workspace.tsx b/apps/web/core/components/onboarding/create-workspace.tsx
index b7eae164897..d07558d012d 100644
--- a/apps/web/core/components/onboarding/create-workspace.tsx
+++ b/apps/web/core/components/onboarding/create-workspace.tsx
@@ -13,7 +13,7 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
 // ui
@@ -106,17 +106,15 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
     <div className="space-y-4">
       {!!invitedWorkspaces && (
         <>
-          <Button
-            variant="ghost"
-            size="xl"
-            className="flex w-full items-center gap-2 bg-surface-2 text-14"
-            onClick={handleCurrentViewChange}
-          >
-            I want to join invited workspaces{" "}
-            <span className="flex h-4 w-4 items-center justify-center rounded-xs bg-accent-primary/80 text-11 font-medium text-on-color">
-              {invitedWorkspaces}
-            </span>
-          </Button>
+          <span className="flex w-full items-center gap-2 bg-surface-2 text-14">
+            <Button
+              variant="ghost"
+              size="lg"
+              stretch="full"
+              onClick={handleCurrentViewChange}
+              label={`I want to join invited workspaces (${invitedWorkspaces})`}
+            />
+          </span>
           <div className="mx-auto mt-4 flex items-center sm:w-96">
             <hr className="w-full border-strong" />
             <p className="mx-3 flex-shrink-0 text-center text-13 text-placeholder">or</p>
@@ -266,9 +264,15 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
             )}
           </div>
         </div>
-        <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
-          {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
-        </Button>
+        <Button
+          variant="primary"
+          type="submit"
+          size="lg"
+          disabled={isButtonDisabled}
+          stretch="full"
+          loading={isSubmitting}
+          label={t("workspace_creation.button.default")}
+        />
       </form>
     </div>
   );
diff --git a/apps/web/core/components/onboarding/invitations.tsx b/apps/web/core/components/onboarding/invitations.tsx
index 09152433c15..70878a40563 100644
--- a/apps/web/core/components/onboarding/invitations.tsx
+++ b/apps/web/core/components/onboarding/invitations.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
 // plane imports
 import { ROLE } from "@plane/constants";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IWorkspaceMemberInvitation } from "@plane/types";
 // ui
 import { Checkbox } from "@makeplane/propel/components/checkbox";
@@ -100,27 +100,28 @@ export function Invitations(props: Props) {
       </div>
       <Button
         variant="primary"
-        size="xl"
-        className="w-full"
+        size="lg"
         onClick={submitInvitations}
         disabled={isJoiningWorkspaces || !invitationsRespond.length}
-      >
-        {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue to workspace"}
-      </Button>
+        stretch="full"
+        loading={isJoiningWorkspaces}
+        label={"Continue to workspace"}
+      />
       <div className="mx-auto mt-4 flex items-center sm:w-96">
         <hr className="w-full border-strong" />
         <p className="mx-3 flex-shrink-0 text-center text-13 text-placeholder">or</p>
         <hr className="w-full border-strong" />
       </div>
-      <Button
-        variant="ghost"
-        size="xl"
-        className="w-full bg-surface-2 text-14"
-        onClick={handleCurrentViewChange}
-        disabled={isJoiningWorkspaces}
-      >
-        Create your own workspace
-      </Button>
+      <span className="w-full bg-surface-2 text-14">
+        <Button
+          variant="ghost"
+          size="lg"
+          stretch="full"
+          label="Create your own workspace"
+          onClick={handleCurrentViewChange}
+          disabled={isJoiningWorkspaces}
+        />
+      </span>
     </div>
   ) : (
     <div>No Invitations found</div>
diff --git a/apps/web/core/components/onboarding/invite-members.tsx b/apps/web/core/components/onboarding/invite-members.tsx
index 3a4d03a78e8..75a7c823df3 100644
--- a/apps/web/core/components/onboarding/invite-members.tsx
+++ b/apps/web/core/components/onboarding/invite-members.tsx
@@ -26,7 +26,7 @@ import type { EUserPermissions } from "@plane/constants";
 import { ROLE, ROLE_DETAILS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlusIcon, CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IWorkspace } from "@plane/types";
@@ -391,15 +391,13 @@ export function InviteMembers(props: Props) {
               <Button
                 variant="primary"
                 type="submit"
-                size="xl"
-                className="w-full"
+                size="lg"
                 disabled={isInvitationDisabled || !isValid || isSubmitting}
-              >
-                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-              </Button>
-              <Button variant="ghost" size="xl" className="w-full" onClick={nextStep}>
-                I’ll do it later
-              </Button>
+                stretch="full"
+                loading={isSubmitting}
+                label={"Continue"}
+              />
+              <Button variant="ghost" size="lg" stretch="full" label="I’ll do it later" onClick={nextStep} />
             </div>
           </form>
         </div>
diff --git a/apps/web/core/components/onboarding/profile-setup.tsx b/apps/web/core/components/onboarding/profile-setup.tsx
index e02f934be8b..6b19368afd1 100644
--- a/apps/web/core/components/onboarding/profile-setup.tsx
+++ b/apps/web/core/components/onboarding/profile-setup.tsx
@@ -13,7 +13,7 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
 // ui
@@ -552,9 +552,15 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
               </div>
             </>
           )}
-          <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
-            {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-          </Button>
+          <Button
+            variant="primary"
+            type="submit"
+            size="lg"
+            disabled={isButtonDisabled}
+            stretch="full"
+            loading={isSubmitting}
+            label={"Continue"}
+          />
         </form>
       </div>
     </div>
diff --git a/apps/web/core/components/onboarding/steps/profile/root.tsx b/apps/web/core/components/onboarding/steps/profile/root.tsx
index 5e71c802f3b..1a58b36ba24 100644
--- a/apps/web/core/components/onboarding/steps/profile/root.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/root.tsx
@@ -10,7 +10,7 @@ import { Controller, useForm } from "react-hook-form";
 import { ImageIcon } from "lucide-react";
 // plane imports
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser } from "@plane/types";
 import { EOnboardingSteps } from "@plane/types";
@@ -247,9 +247,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
         )}
       </div>
       {/* Continue Button */}
-      <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
-        Continue
-      </Button>
+      <Button variant="primary" size="lg" stretch="full" label="Continue" type="submit" disabled={isButtonDisabled} />
 
       {/* Marketing Consent */}
       {!instanceConfig?.is_self_managed && (
diff --git a/apps/web/core/components/onboarding/steps/role/root.tsx b/apps/web/core/components/onboarding/steps/role/root.tsx
index 43029d1cfdb..358217b3785 100644
--- a/apps/web/core/components/onboarding/steps/role/root.tsx
+++ b/apps/web/core/components/onboarding/steps/role/root.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Box, PenTool, Rocket, Monitor, RefreshCw } from "lucide-react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CheckIcon, ViewsIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TUserProfile } from "@plane/types";
@@ -145,12 +145,10 @@ export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange
       </div>
       {/* Action Buttons */}
       <div className="space-y-3">
-        <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
-          Continue
-        </Button>
-        <Button variant="ghost" onClick={handleSkip} className="w-full text-tertiary" size="xl">
-          Skip
-        </Button>
+        <Button variant="primary" size="lg" stretch="full" label="Continue" type="submit" disabled={isButtonDisabled} />
+        <span className="w-full text-tertiary">
+          <Button variant="ghost" size="lg" stretch="full" label="Skip" onClick={handleSkip} />
+        </span>
       </div>
     </form>
   );
diff --git a/apps/web/core/components/onboarding/steps/team/root.tsx b/apps/web/core/components/onboarding/steps/team/root.tsx
index b5fb4bd0b65..069dbacd9aa 100644
--- a/apps/web/core/components/onboarding/steps/team/root.tsx
+++ b/apps/web/core/components/onboarding/steps/team/root.tsx
@@ -24,7 +24,7 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import type { EUserPermissions } from "@plane/constants";
 import { ROLE, ROLE_DETAILS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlusIcon, CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EOnboardingSteps } from "@plane/types";
@@ -386,15 +386,13 @@ export const InviteTeamStep = observer(function InviteTeamStep(props: Props) {
         <Button
           variant="primary"
           type="submit"
-          size="xl"
-          className="w-full"
+          size="lg"
           disabled={isInvitationDisabled || !isValid || isSubmitting}
-        >
-          {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-        </Button>
-        <Button variant="ghost" size="xl" className="w-full" onClick={nextStep}>
-          I’ll do it later
-        </Button>
+          stretch="full"
+          loading={isSubmitting}
+          label={"Continue"}
+        />
+        <Button variant="ghost" size="lg" stretch="full" label="I’ll do it later" onClick={nextStep} />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/onboarding/steps/usecase/root.tsx b/apps/web/core/components/onboarding/steps/usecase/root.tsx
index 8908adaf3b4..1e0303f0792 100644
--- a/apps/web/core/components/onboarding/steps/usecase/root.tsx
+++ b/apps/web/core/components/onboarding/steps/usecase/root.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { USE_CASES } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CheckIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TUserProfile } from "@plane/types";
@@ -150,12 +150,8 @@ export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepC
 
       {/* Action Buttons */}
       <div className="space-y-3">
-        <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
-          Continue
-        </Button>
-        <Button variant="ghost" onClick={handleSkip} className="w-full" size="xl">
-          Skip
-        </Button>
+        <Button variant="primary" size="lg" stretch="full" label="Continue" type="submit" disabled={isButtonDisabled} />
+        <Button variant="ghost" size="lg" stretch="full" label="Skip" onClick={handleSkip} />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/onboarding/steps/workspace/create.tsx b/apps/web/core/components/onboarding/steps/workspace/create.tsx
index f9c32a91f26..b94a600b8b5 100644
--- a/apps/web/core/components/onboarding/steps/workspace/create.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/create.tsx
@@ -11,7 +11,7 @@ import { CircleCheck } from "lucide-react";
 // plane imports
 import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IWorkspace } from "@plane/types";
 import { Spinner } from "@plane/ui";
@@ -290,13 +290,23 @@ export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
         </div>
       </div>
       <div className="flex flex-col gap-4">
-        <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
-          {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
-        </Button>
+        <Button
+          variant="primary"
+          type="submit"
+          size="lg"
+          disabled={isButtonDisabled}
+          stretch="full"
+          loading={isSubmitting}
+          label={t("workspace_creation.button.default")}
+        />
         {hasInvitations && (
-          <Button variant="ghost" size="xl" className="w-full" onClick={handleCurrentViewChange}>
-            Join existing workspace
-          </Button>
+          <Button
+            variant="ghost"
+            size="lg"
+            stretch="full"
+            label="Join existing workspace"
+            onClick={handleCurrentViewChange}
+          />
         )}
       </div>
     </form>
diff --git a/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
index 92153459c07..fc0b7f2e19d 100644
--- a/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 // plane imports
 import { ROLE } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IWorkspaceMemberInvitation } from "@plane/types";
 import { Checkbox } from "@makeplane/propel/components/checkbox";
 import { Spinner } from "@plane/ui";
@@ -102,22 +102,21 @@ export function WorkspaceJoinInvitesStep(props: Props) {
       <div className="flex flex-col gap-4">
         <Button
           variant="primary"
-          size="xl"
-          className="w-full"
+          size="lg"
           onClick={submitInvitations}
           disabled={isJoiningWorkspaces || !invitationsRespond.length}
-        >
-          {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue"}
-        </Button>
+          stretch="full"
+          loading={isJoiningWorkspaces}
+          label={"Continue"}
+        />
         <Button
           variant="ghost"
-          size="xl"
-          className="w-full"
+          size="lg"
+          stretch="full"
+          label="Create new workspace"
           onClick={handleCurrentViewChange}
           disabled={isJoiningWorkspaces}
-        >
-          Create new workspace
-        </Button>
+        />
       </div>
     </div>
   ) : (
diff --git a/apps/web/core/components/onboarding/switch-account-modal.tsx b/apps/web/core/components/onboarding/switch-account-modal.tsx
index aa80f8e330a..2b1a793c33f 100644
--- a/apps/web/core/components/onboarding/switch-account-modal.tsx
+++ b/apps/web/core/components/onboarding/switch-account-modal.tsx
@@ -10,7 +10,7 @@ import { useTheme } from "next-themes";
 import { ArrowRightLeft } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 // hooks
 import { useUser } from "@/hooks/store/user";
@@ -104,9 +104,14 @@ export function SwitchAccountModal(props: Props) {
                   </div>
                 </div>
                 <div className="mb-2 flex items-center justify-end gap-3 p-4 sm:px-6">
-                  <Button variant="secondary" size="lg" onClick={handleSwitchAccount} disabled={switchingAccount}>
-                    {switchingAccount ? "Switching..." : "Switch account"}
-                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="md"
+                    stretch="auto"
+                    label={switchingAccount ? "Switching..." : "Switch account"}
+                    onClick={handleSwitchAccount}
+                    disabled={switchingAccount}
+                  />
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/apps/web/core/components/onboarding/tour/root.tsx b/apps/web/core/components/onboarding/tour/root.tsx
index db87b7150b7..4180221e350 100644
--- a/apps/web/core/components/onboarding/tour/root.tsx
+++ b/apps/web/core/components/onboarding/tour/root.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CloseIcon, PlaneLockup } from "@plane/propel/icons";
 // assets
 import CyclesTour from "@/app/assets/onboarding/cycles.webp?url";
@@ -109,12 +109,13 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
                 <div className="mt-12 flex items-center gap-6">
                   <Button
                     variant="primary"
+                    size="sm"
+                    stretch="auto"
+                    label="Take a Product Tour"
                     onClick={() => {
                       setStep("work-items");
                     }}
-                  >
-                    Take a Product Tour
-                  </Button>
+                  />
                   <button
                     type="button"
                     className="bg-transparent text-11 font-medium text-accent-primary outline-subtle-1"
@@ -153,26 +154,35 @@ export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps)
               <div className="mt-3 flex h-full items-end justify-between gap-4">
                 <div className="flex items-center gap-4">
                   {currentStep?.prevStep && (
-                    <Button variant="secondary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
-                      Back
-                    </Button>
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      stretch="auto"
+                      label="Back"
+                      onClick={() => setStep(currentStep.prevStep ?? "welcome")}
+                    />
                   )}
                   {currentStep?.nextStep && (
-                    <Button variant="primary" onClick={() => setStep(currentStep.nextStep ?? "work-items")}>
-                      Next
-                    </Button>
+                    <Button
+                      variant="primary"
+                      size="sm"
+                      stretch="auto"
+                      label="Next"
+                      onClick={() => setStep(currentStep.nextStep ?? "work-items")}
+                    />
                   )}
                 </div>
                 {currentStepIndex === TOUR_STEPS.length - 1 && (
                   <Button
                     variant="primary"
+                    size="sm"
+                    stretch="auto"
+                    label="Create your first project"
                     onClick={() => {
                       onComplete();
                       toggleCreateProjectModal(true);
                     }}
-                  >
-                    Create your first project
-                  </Button>
+                  />
                 )}
               </div>
             </div>
diff --git a/apps/web/core/components/pages/list/order-by.tsx b/apps/web/core/components/pages/list/order-by.tsx
index 2e9f22f0ad7..0fd53c5c869 100644
--- a/apps/web/core/components/pages/list/order-by.tsx
+++ b/apps/web/core/components/pages/list/order-by.tsx
@@ -6,7 +6,7 @@
 
 import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
 // plane imports
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 // types
 import { CheckIcon } from "@plane/propel/icons";
 import type { TPageFiltersSortBy, TPageFiltersSortKey } from "@plane/types";
@@ -36,10 +36,10 @@ export function PageOrderByDropdown(props: Props) {
   return (
     <CustomMenu
       customButton={
-        <div className={getButtonStyling("secondary", "lg")}>
+        <Button variant="secondary" size="md" stretch="auto" render={<div />}>
           {!isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />}
           {orderByDetails?.label}
-        </div>
+        </Button>
       }
       placement="bottom-end"
       maxHeight="lg"
diff --git a/apps/web/core/components/pages/modals/export-page-modal.tsx b/apps/web/core/components/pages/modals/export-page-modal.tsx
index cd21b2b5fa7..90f7e46ae54 100644
--- a/apps/web/core/components/pages/modals/export-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/export-page-modal.tsx
@@ -12,7 +12,7 @@ import { useParams } from "react-router";
 // plane editor
 import type { EditorRefApi } from "@plane/editor";
 // plane ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { CustomSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
@@ -282,12 +282,15 @@ export function ExportPageModal(props: Props) {
           </div>
         </div>
         <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-          <Button variant="secondary" size="lg" onClick={handleClose}>
-            Cancel
-          </Button>
-          <Button variant="primary" size="lg" loading={isExporting} onClick={handleExport}>
-            {isExporting ? "Exporting" : "Export"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isExporting ? "Exporting" : "Export"}
+            loading={isExporting}
+            onClick={handleExport}
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/pages/modals/page-form.tsx b/apps/web/core/components/pages/modals/page-form.tsx
index 84ba42750e8..7f1d78ea850 100644
--- a/apps/web/core/components/pages/modals/page-form.tsx
+++ b/apps/web/core/components/pages/modals/page-form.tsx
@@ -12,7 +12,7 @@ import type { LucideIcon } from "lucide-react";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { ETabIndices, EPageAccess } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { GlobeIcon, LockIcon, PageIcon } from "@plane/propel/icons";
 import type { ISvgIcons } from "@plane/propel/icons";
@@ -147,19 +147,24 @@ export function PageForm(props: Props) {
           <h6 className="text-11 font-medium">{t(i18n_access_label || "")}</h6>
         </div>
         <div className="flex items-center justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={handleModalClose} tabIndex={getIndex("cancel")}>
-            Cancel
-          </Button>
+          <Button
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            label="Cancel"
+            onClick={handleModalClose}
+            tabIndex={getIndex("cancel")}
+          />
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label={isSubmitting ? "Creating" : "Create Page"}
             type="submit"
             loading={isSubmitting}
             disabled={isTitleLengthMoreThan255Character}
             tabIndex={getIndex("submit")}
-          >
-            {isSubmitting ? "Creating" : "Create Page"}
-          </Button>
+          />
         </div>
       </div>
     </form>
diff --git a/apps/web/core/components/pages/version/main-content.tsx b/apps/web/core/components/pages/version/main-content.tsx
index 5cd3b76794e..092c55b393f 100644
--- a/apps/web/core/components/pages/version/main-content.tsx
+++ b/apps/web/core/components/pages/version/main-content.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 import { EyeIcon, TriangleAlert } from "lucide-react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TPageVersion } from "@plane/types";
 import { renderFormattedDate, renderFormattedTime } from "@plane/utils";
@@ -93,9 +93,14 @@ export const PageVersionsMainContent = observer(function PageVersionsMainContent
               <h6 className="text-16 font-semibold">Something went wrong!</h6>
               <p className="text-13 text-tertiary">The version could not be loaded, please try again.</p>
             </div>
-            <Button variant="link" onClick={handleRetry} loading={isRetrying}>
-              Try again
-            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              stretch="auto"
+              label="Try again"
+              onClick={handleRetry}
+              loading={isRetrying}
+            />
           </div>
         </div>
       ) : (
@@ -113,9 +118,16 @@ export const PageVersionsMainContent = observer(function PageVersionsMainContent
               </span>
             </div>
             {restoreEnabled && (
-              <Button variant="primary" className="flex-shrink-0" onClick={handleRestoreVersion} loading={isRestoring}>
-                {isRestoring ? "Restoring" : "Restore"}
-              </Button>
+              <span className="flex-shrink-0">
+                <Button
+                  variant="primary"
+                  size="sm"
+                  stretch="auto"
+                  label={isRestoring ? "Restoring" : "Restore"}
+                  onClick={handleRestoreVersion}
+                  loading={isRestoring}
+                />
+              </span>
             )}
           </div>
           <div className="vertical-scrollbar scrollbar-sm h-full overflow-y-scroll pt-8">
diff --git a/apps/web/core/components/profile/activity/download-button.tsx b/apps/web/core/components/profile/activity/download-button.tsx
index d162dbd2455..b0705088923 100644
--- a/apps/web/core/components/profile/activity/download-button.tsx
+++ b/apps/web/core/components/profile/activity/download-button.tsx
@@ -9,7 +9,7 @@ import { useParams } from "next/navigation";
 // services
 // ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // helpers
 import { renderFormattedPayloadDate } from "@plane/utils";
 import { UserService } from "@/services/user.service";
@@ -58,8 +58,15 @@ export function DownloadActivityButton() {
   };
 
   return (
-    <Button onClick={handleDownload} loading={isDownloading}>
-      {isDownloading ? t("profile.stats.recent_activity.button_loading") : t("profile.stats.recent_activity.button")}
-    </Button>
+    <Button
+      variant="primary"
+      size="sm"
+      stretch="auto"
+      label={
+        isDownloading ? t("profile.stats.recent_activity.button_loading") : t("profile.stats.recent_activity.button")
+      }
+      onClick={handleDownload}
+      loading={isDownloading}
+    />
   );
 }
diff --git a/apps/web/core/components/project-states/create-update/form.tsx b/apps/web/core/components/project-states/create-update/form.tsx
index 4518271b812..3d71fdbe3b3 100644
--- a/apps/web/core/components/project-states/create-update/form.tsx
+++ b/apps/web/core/components/project-states/create-update/form.tsx
@@ -6,9 +6,9 @@
 
 import { useEffect, useState } from "react";
 import { TwitterPicker } from "react-color";
+import { Button } from "@makeplane/propel/components/button";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
-import { Button } from "@plane/propel/button";
 import type { IState } from "@plane/types";
 import { Popover, TextArea } from "@plane/ui";
 type TStateForm = {
@@ -102,12 +102,23 @@ export function StateForm(props: TStateForm) {
         />
 
         <div className="flex items-center space-x-2">
-          <Button onClick={formSubmit} variant="primary" size="lg" disabled={buttonDisabled}>
-            {buttonTitle}
-          </Button>
-          <Button type="button" variant="secondary" size="lg" disabled={buttonDisabled} onClick={onCancel}>
-            Cancel
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={buttonTitle}
+            onClick={formSubmit}
+            disabled={buttonDisabled}
+          />
+          <Button
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            label="Cancel"
+            type="button"
+            disabled={buttonDisabled}
+            onClick={onCancel}
+          />
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/project/archive-restore-modal.tsx b/apps/web/core/components/project/archive-restore-modal.tsx
index 0f17ce90f7c..de41087a8f4 100644
--- a/apps/web/core/components/project/archive-restore-modal.tsx
+++ b/apps/web/core/components/project/archive-restore-modal.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
@@ -97,18 +97,16 @@ export function ArchiveRestoreProjectModal(props: Props) {
             : "Restoring a project will activate it and make it visible to all members of the project. Are you sure you want to continue?"}
         </p>
         <div className="mt-3 flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={onClose}>
-            Cancel
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={onClose} />
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
+            label={archive ? (isLoading ? "Archiving" : "Archive") : isLoading ? "Restoring" : "Restore"}
             tabIndex={1}
             onClick={archive ? handleArchiveProject : handleRestoreProject}
             loading={isLoading}
-          >
-            {archive ? (isLoading ? "Archiving" : "Archive") : isLoading ? "Restoring" : "Restore"}
-          </Button>
+          />
         </div>
       </div>
     </ModalCore>
diff --git a/apps/web/core/components/project/card.tsx b/apps/web/core/components/project/card.tsx
index c9286d15faf..47ab8d1a6a5 100644
--- a/apps/web/core/components/project/card.tsx
+++ b/apps/web/core/components/project/card.tsx
@@ -12,7 +12,7 @@ import { ArchiveRestoreIcon, Settings, UserPlus } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { LinkIcon, LockIcon, NewTabIcon, TrashIcon, CheckIcon } from "@plane/propel/icons";
 import { setPromiseToast, setToast, TOAST_TYPE } from "@plane/propel/toast";
@@ -353,17 +353,19 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                   ))}
                 {!isMemberOfProject && (
                   <div className="flex items-center">
-                    <Button
-                      variant="link"
-                      className="!p-0 font-semibold"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        setJoinProjectModal(true);
-                      }}
-                    >
-                      Join
-                    </Button>
+                    <span className="!p-0 font-semibold">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        stretch="auto"
+                        label="Join"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setJoinProjectModal(true);
+                        }}
+                      />
+                    </span>
                   </div>
                 )}
               </>
diff --git a/apps/web/core/components/project/confirm-project-member-remove.tsx b/apps/web/core/components/project/confirm-project-member-remove.tsx
index 52a7c30600e..06cea55a61e 100644
--- a/apps/web/core/components/project/confirm-project-member-remove.tsx
+++ b/apps/web/core/components/project/confirm-project-member-remove.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { AlertTriangle } from "lucide-react";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IUserLite } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -82,12 +82,18 @@ export const ConfirmProjectMemberRemove = observer(function ConfirmProjectMember
         </div>
       </div>
       <div className="flex justify-end gap-2 p-4 sm:px-6">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          Cancel
-        </Button>
-        <Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
-          {isCurrentUser ? (isDeleteLoading ? "Leaving..." : "Leave") : isDeleteLoading ? "Removing..." : "Remove"}
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+        <Button
+          variant="danger"
+          size="md"
+          stretch="auto"
+          label={
+            isCurrentUser ? (isDeleteLoading ? "Leaving..." : "Leave") : isDeleteLoading ? "Removing..." : "Remove"
+          }
+          tabIndex={1}
+          onClick={handleDeletion}
+          loading={isDeleteLoading}
+        />
       </div>
     </ModalCore>
   );
diff --git a/apps/web/core/components/project/create/project-create-buttons.tsx b/apps/web/core/components/project/create/project-create-buttons.tsx
index ae66ca71919..50a307fcbce 100644
--- a/apps/web/core/components/project/create/project-create-buttons.tsx
+++ b/apps/web/core/components/project/create/project-create-buttons.tsx
@@ -8,7 +8,7 @@ import { useFormContext } from "react-hook-form";
 // plane imports
 import { ETabIndices } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IProject } from "@plane/types";
 // ui
 // helpers
@@ -30,12 +30,23 @@ function ProjectCreateButtons(props: Props) {
 
   return (
     <div className="flex justify-end gap-2 border-t border-subtle py-4">
-      <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
-        {t("common.cancel")}
-      </Button>
-      <Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
-        {isSubmitting ? t("creating") : t("create_project")}
-      </Button>
+      <Button
+        variant="secondary"
+        size="md"
+        stretch="auto"
+        label={t("common.cancel")}
+        onClick={handleClose}
+        tabIndex={getIndex("cancel")}
+      />
+      <Button
+        variant="primary"
+        size="md"
+        stretch="auto"
+        label={isSubmitting ? t("creating") : t("create_project")}
+        type="submit"
+        loading={isSubmitting}
+        tabIndex={getIndex("submit")}
+      />
     </div>
   );
 }
diff --git a/apps/web/core/components/project/delete-project-modal.tsx b/apps/web/core/components/project/delete-project-modal.tsx
index dbdf0a38259..00e2575705a 100644
--- a/apps/web/core/components/project/delete-project-modal.tsx
+++ b/apps/web/core/components/project/delete-project-modal.tsx
@@ -8,9 +8,9 @@ import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import { AlertTriangle } from "lucide-react";
 // Plane imports
+import { Button } from "@makeplane/propel/components/button";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
-import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IProject } from "@plane/types";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -147,12 +147,16 @@ export function DeleteProjectModal(props: DeleteProjectModal) {
           />
         </div>
         <div className="flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={handleClose}>
-            Cancel
-          </Button>
-          <Button variant="error-fill" size="lg" type="submit" disabled={!canDelete} loading={isSubmitting}>
-            {isSubmitting ? "Deleting" : "Delete project"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+          <Button
+            variant="danger"
+            size="md"
+            stretch="auto"
+            label={isSubmitting ? "Deleting" : "Delete project"}
+            type="submit"
+            disabled={!canDelete}
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/project/dropdowns/filters/member-list.tsx b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
index bb8acd15ecc..f50778293e0 100644
--- a/apps/web/core/components/project/dropdowns/filters/member-list.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ChevronDownIcon } from "@plane/propel/icons";
 import { EUserProjectRoles, EUserWorkspaceRoles } from "@plane/types";
 // plane ui
@@ -101,10 +101,14 @@ export const MemberListFiltersDropdown = observer(function MemberListFiltersDrop
     <CustomMenu
       customButton={
         <div className="relative">
-          <Button variant="secondary" size="lg" className="flex items-center gap-2">
-            <span>Filters</span>
-            <ChevronDownIcon className="h-3 w-3" />
-          </Button>
+          <Button
+            variant="secondary"
+            size="md"
+            stretch="auto"
+            icon={<ChevronDownIcon className="h-3 w-3" />}
+            iconPosition="end"
+            label="Filters"
+          />
           {appliedFiltersCount > 0 && (
             <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-accent-primary" />
           )}
diff --git a/apps/web/core/components/project/dropdowns/order-by.tsx b/apps/web/core/components/project/dropdowns/order-by.tsx
index 5b83e0c2879..eb714d0a458 100644
--- a/apps/web/core/components/project/dropdowns/order-by.tsx
+++ b/apps/web/core/components/project/dropdowns/order-by.tsx
@@ -8,7 +8,7 @@ import { ArrowDownWideNarrow } from "lucide-react";
 // plane imports
 import { PROJECT_ORDER_BY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { CheckIcon } from "@plane/propel/icons";
 import type { TProjectOrderByOptions } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
@@ -34,19 +34,10 @@ export function ProjectOrderByDropdown(props: Props) {
     <CustomMenu
       className={`${isMobile ? "flex w-full justify-center" : ""}`}
       customButton={
-        <>
-          {isMobile ? (
-            <div className={getButtonStyling("secondary", "lg")}>
-              <ArrowDownWideNarrow className="size-3.5 shrink-0" strokeWidth={2} />
-              {orderByDetails && t(orderByDetails?.i18n_label)}
-            </div>
-          ) : (
-            <div className={getButtonStyling("secondary", "lg")}>
-              <ArrowDownWideNarrow className="size-3.5 shrink-0" strokeWidth={2} />
-              {orderByDetails && t(orderByDetails?.i18n_label)}
-            </div>
-          )}
-        </>
+        <Button variant="secondary" size="md" stretch={isMobile ? "full" : "auto"} render={<div />}>
+          <ArrowDownWideNarrow className="size-3.5 shrink-0" strokeWidth={2} />
+          {orderByDetails && t(orderByDetails?.i18n_label)}
+        </Button>
       }
       placement="bottom-end"
       closeOnSelect
diff --git a/apps/web/core/components/project/empty-state.tsx b/apps/web/core/components/project/empty-state.tsx
index 4e4bce83880..f12a689bcc8 100644
--- a/apps/web/core/components/project/empty-state.tsx
+++ b/apps/web/core/components/project/empty-state.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 type Props = {
   title: string;
@@ -33,14 +33,14 @@ export function EmptyState({ title, description, image, primaryButton, secondary
         <div className="flex items-center gap-4">
           {primaryButton && (
             <Button
-              size="xl"
               variant="primary"
-              prependIcon={primaryButton.icon}
+              size="lg"
+              stretch="auto"
+              label={primaryButton.text}
+              icon={primaryButton.icon}
               onClick={primaryButton.onClick}
               disabled={disabled}
-            >
-              {primaryButton.text}
-            </Button>
+            />
           )}
           {secondaryButton}
         </div>
diff --git a/apps/web/core/components/project/form.tsx b/apps/web/core/components/project/form.tsx
index b241eb30bdb..9db685ca9a9 100644
--- a/apps/web/core/components/project/form.tsx
+++ b/apps/web/core/components/project/form.tsx
@@ -12,7 +12,7 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { NETWORK_CHOICES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { LockIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -446,9 +446,15 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
         </div>
         <div className="flex items-center justify-between py-2">
           <>
-            <Button variant="primary" size="lg" type="submit" loading={isLoading} disabled={!isAdmin}>
-              {isLoading ? t("updating") : t("common.update_project")}
-            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={isLoading ? t("updating") : t("common.update_project")}
+              type="submit"
+              loading={isLoading}
+              disabled={!isAdmin}
+            />
             <span className="text-13 text-placeholder italic">
               {t("common.created_on")} {renderFormattedDate(project?.created_at)}
             </span>
diff --git a/apps/web/core/components/project/header.tsx b/apps/web/core/components/project/header.tsx
index e554ab2d199..7776a460f98 100644
--- a/apps/web/core/components/project/header.tsx
+++ b/apps/web/core/components/project/header.tsx
@@ -10,7 +10,7 @@ import { usePathname } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ProjectIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -61,15 +61,13 @@ export const ProjectsBaseHeader = observer(function ProjectsBaseHeader() {
         {isAuthorizedUser && !isArchived ? (
           <Button
             variant="primary"
-            size="lg"
+            size="md"
+            stretch="auto"
             onClick={() => {
               toggleCreateProjectModal(true);
             }}
-            className="items-center gap-1"
-          >
-            <span className="hidden sm:inline-block">{t("workspace_projects.create.label")}</span>
-            <span className="inline-block sm:hidden">{t("workspace_projects.label", { count: 1 })}</span>
-          </Button>
+            label={t("workspace_projects.create.label")}
+          />
         ) : (
           <></>
         )}
diff --git a/apps/web/core/components/project/join-project-modal.tsx b/apps/web/core/components/project/join-project-modal.tsx
index 8d1088440b2..ac581d5a818 100644
--- a/apps/web/core/components/project/join-project-modal.tsx
+++ b/apps/web/core/components/project/join-project-modal.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IProject } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -59,12 +59,17 @@ export function JoinProjectModal(props: TJoinProjectModalProps) {
         <div className="space-y-3" />
       </div>
       <div className="mt-5 flex justify-end gap-2 px-5 pb-8 sm:px-6 sm:pb-6">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          Cancel
-        </Button>
-        <Button variant="primary" size="lg" tabIndex={1} type="submit" onClick={handleJoin} loading={isJoiningLoading}>
-          {isJoiningLoading ? "Joining..." : "Join Project"}
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          label={isJoiningLoading ? "Joining..." : "Join Project"}
+          tabIndex={1}
+          type="submit"
+          onClick={handleJoin}
+          loading={isJoiningLoading}
+        />
       </div>
     </ModalCore>
   );
diff --git a/apps/web/core/components/project/leave-project-modal.tsx b/apps/web/core/components/project/leave-project-modal.tsx
index c6e019d78d8..db029d83bc4 100644
--- a/apps/web/core/components/project/leave-project-modal.tsx
+++ b/apps/web/core/components/project/leave-project-modal.tsx
@@ -9,9 +9,9 @@ import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import { AlertTriangleIcon } from "lucide-react";
 // Plane imports
+import { Button } from "@makeplane/propel/components/button";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
-import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IProject } from "@plane/types";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -171,12 +171,15 @@ export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILea
           />
         </div>
         <div className="flex justify-end gap-2">
-          <Button variant="secondary" size="lg" onClick={handleClose}>
-            Cancel
-          </Button>
-          <Button variant="error-fill" size="lg" type="submit" loading={isSubmitting}>
-            {isSubmitting ? "Leaving..." : "Leave Project"}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+          <Button
+            variant="danger"
+            size="md"
+            stretch="auto"
+            label={isSubmitting ? "Leaving..." : "Leave Project"}
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       </form>
     </ModalCore>
diff --git a/apps/web/core/components/project/member-list.tsx b/apps/web/core/components/project/member-list.tsx
index e5d2122110c..56d8f4ef251 100644
--- a/apps/web/core/components/project/member-list.tsx
+++ b/apps/web/core/components/project/member-list.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { SearchIcon } from "@plane/propel/icons";
 // components
 import { MembersSettingsLoader } from "@/components/ui/loader/settings/members";
@@ -102,12 +102,13 @@ export const ProjectMemberList = observer(function ProjectMemberList(props: TPro
           {isAdmin && (
             <Button
               variant="primary"
+              size="sm"
+              stretch="auto"
+              label={t("add_member")}
               onClick={() => {
                 setInviteModal(true);
               }}
-            >
-              {t("add_member")}
-            </Button>
+            />
           )}
         </div>
       </div>
diff --git a/apps/web/core/components/project/multi-select-modal.tsx b/apps/web/core/components/project/multi-select-modal.tsx
index 8f7952c5ff8..ef865d7ad01 100644
--- a/apps/web/core/components/project/multi-select-modal.tsx
+++ b/apps/web/core/components/project/multi-select-modal.tsx
@@ -11,7 +11,7 @@ import { useTheme } from "next-themes";
 import { Combobox } from "@headlessui/react";
 // plane ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { SearchIcon, CloseIcon } from "@plane/propel/icons";
 import { Checkbox } from "@makeplane/propel/components/checkbox";
@@ -179,19 +179,17 @@ export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal
         </Combobox.Options>
       </Combobox>
       <div className="flex items-center justify-end gap-2 border-t border-subtle p-3">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          {t("cancel")}
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label={t("cancel")} onClick={handleClose} />
         <Button
-          ref={moveButtonRef}
           variant="primary"
-          size="lg"
+          size="md"
+          stretch="auto"
+          label={isSubmitting ? t("confirming") : t("confirm")}
+          ref={moveButtonRef}
           onClick={handleSubmit}
           loading={isSubmitting}
           disabled={!areSelectedProjectsChanged}
-        >
-          {isSubmitting ? t("confirming") : t("confirm")}
-        </Button>
+        />
       </div>
     </ModalCore>
   );
diff --git a/apps/web/core/components/project/project-feature-update.tsx b/apps/web/core/components/project/project-feature-update.tsx
index 931f36b3476..fac59cd8d9f 100644
--- a/apps/web/core/components/project/project-feature-update.tsx
+++ b/apps/web/core/components/project/project-feature-update.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { Button, getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { Row } from "@plane/ui";
 // components
@@ -46,18 +46,17 @@ export const ProjectFeatureUpdate = observer(function ProjectFeatureUpdate(props
         </div>
         <div className="flex gap-2">
           {/* eslint-disable-next-line jsx-a11y/tabindex-no-positive */}
-          <Button variant="secondary" size="lg" onClick={onClose} tabIndex={1}>
-            {t("close")}
-          </Button>
-          <Link
-            href={`/${workspaceSlug}/projects/${projectId}/issues`}
-            onClick={onClose}
-            className={getButtonStyling("primary", "lg")}
+          <Button variant="secondary" size="md" stretch="auto" label={t("close")} onClick={onClose} tabIndex={1} />
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={t("open_project")}
+            nativeButton={false}
+            render={<Link href={`/${workspaceSlug}/projects/${projectId}/issues`} onClick={onClose} />}
             // oxlint-disable-next-line jsx-a11y/tabindex-no-positive
             tabIndex={2}
-          >
-            {t("open_project")}
-          </Link>
+          />
         </div>
       </div>
     </>
diff --git a/apps/web/core/components/project/publish-project/modal.tsx b/apps/web/core/components/project/publish-project/modal.tsx
index 7bbd38a2c78..a80e49953a6 100644
--- a/apps/web/core/components/project/publish-project/modal.tsx
+++ b/apps/web/core/components/project/publish-project/modal.tsx
@@ -11,7 +11,7 @@ import { Controller, useForm } from "react-hook-form";
 
 // types
 import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { GlobeIcon, NewTabIcon, CheckIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TProjectPublishLayouts, TProjectPublishSettings } from "@plane/types";
@@ -184,13 +184,13 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
           <h5 className="text-18 font-medium text-secondary">Publish project</h5>
           {isProjectPublished && (
             <Button
-              variant="error-fill"
-              size="lg"
+              variant="danger"
+              size="md"
+              stretch="auto"
+              label={isUnPublishing ? "Unpublishing" : "Unpublish"}
               onClick={() => handleUnPublishProject(watch("id") ?? "")}
               loading={isUnPublishing}
-            >
-              {isUnPublishing ? "Unpublishing" : "Unpublish"}
-            </Button>
+            />
           )}
         </div>
 
@@ -320,19 +320,27 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
           </div>
           {!fetchSettingsLoader && (
             <div className="relative flex items-center gap-2">
-              <Button variant="secondary" size="lg" onClick={handleClose}>
-                Cancel
-              </Button>
+              <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
               {isProjectPublished ? (
                 isDirty && (
-                  <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-                    {isSubmitting ? "Updating" : "Update settings"}
-                  </Button>
+                  <Button
+                    variant="primary"
+                    size="md"
+                    stretch="auto"
+                    label={isSubmitting ? "Updating" : "Update settings"}
+                    type="submit"
+                    loading={isSubmitting}
+                  />
                 )
               ) : (
-                <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-                  {isSubmitting ? "Publishing" : "Publish"}
-                </Button>
+                <Button
+                  variant="primary"
+                  size="md"
+                  stretch="auto"
+                  label={isSubmitting ? "Publishing" : "Publish"}
+                  type="submit"
+                  loading={isSubmitting}
+                />
               )}
             </div>
           )}
diff --git a/apps/web/core/components/project/send-project-invitation-modal.tsx b/apps/web/core/components/project/send-project-invitation-modal.tsx
index f57369ac14e..33fc9f2a05e 100644
--- a/apps/web/core/components/project/send-project-invitation-modal.tsx
+++ b/apps/web/core/components/project/send-project-invitation-modal.tsx
@@ -10,7 +10,7 @@ import { useForm, Controller, useFieldArray } from "react-hook-form";
 // plane imports
 import { ROLE, EUserPermissions } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlusIcon, CloseIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Avatar, CustomSelect, CustomSearchSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -297,14 +297,19 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
             {t("common.add_more")}
           </button>
           <div className="flex items-center gap-2">
-            <Button variant="secondary" size="lg" onClick={handleClose}>
-              {t("cancel")}
-            </Button>
-            <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-              {isSubmitting
-                ? `${fields && fields.length > 1 ? `${t("add_members")}...` : `${t("add_member")}...`}`
-                : `${fields && fields.length > 1 ? t("add_members") : t("add_member")}`}
-            </Button>
+            <Button variant="secondary" size="md" stretch="auto" label={t("cancel")} onClick={handleClose} />
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={
+                isSubmitting
+                  ? `${fields && fields.length > 1 ? `${t("add_members")}...` : `${t("add_member")}...`}`
+                  : `${fields && fields.length > 1 ? t("add_members") : t("add_member")}`
+              }
+              type="submit"
+              loading={isSubmitting}
+            />
           </div>
         </div>
       </form>
diff --git a/apps/web/core/components/project/settings/control-section.tsx b/apps/web/core/components/project/settings/control-section.tsx
index de56790c885..d142d74874a 100644
--- a/apps/web/core/components/project/settings/control-section.tsx
+++ b/apps/web/core/components/project/settings/control-section.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { useParams } from "react-router";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // components
 import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
 // hooks
@@ -61,9 +61,13 @@ export const GeneralProjectSettingsControlSection = observer(function GeneralPro
           title={t("archive")}
           description="Archiving a project will unlist your project from your side navigation although you will still be able to access it from your projects page. You can restore the project or delete it whenever you want."
           control={
-            <Button variant="secondary" onClick={() => setArchiveProject(true)}>
-              {t("archive")}
-            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              stretch="auto"
+              label={t("archive")}
+              onClick={() => setArchiveProject(true)}
+            />
           }
         />
         {/* Format Selector */}
@@ -72,9 +76,13 @@ export const GeneralProjectSettingsControlSection = observer(function GeneralPro
           title={t("delete")}
           description="When deleting a project, all of the data and resources within that project will be permanently removed and cannot be recovered."
           control={
-            <Button variant="error-outline" onClick={() => setSelectedProject(currentProjectDetails.id ?? null)}>
-              {t("delete")}
-            </Button>
+            <Button
+              variant="danger-outline"
+              size="sm"
+              stretch="auto"
+              label={t("delete")}
+              onClick={() => setSelectedProject(currentProjectDetails.id ?? null)}
+            />
           }
         />
       </div>
diff --git a/apps/web/core/components/projects/settings/intake/header.tsx b/apps/web/core/components/projects/settings/intake/header.tsx
index f24e43d4c01..268d355a212 100644
--- a/apps/web/core/components/projects/settings/intake/header.tsx
+++ b/apps/web/core/components/projects/settings/intake/header.tsx
@@ -11,7 +11,7 @@ import { RefreshCcw } from "lucide-react";
 // ui
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -78,9 +78,13 @@ export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
               modalState={createIssueModal}
               handleModalClose={() => setCreateIssueModal(false)}
             />
-            <Button variant="primary" size="lg" onClick={() => setCreateIssueModal(true)}>
-              {t("add_work_item")}
-            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={t("add_work_item")}
+              onClick={() => setCreateIssueModal(true)}
+            />
           </div>
         ) : (
           <></>
diff --git a/apps/web/core/components/rich-filters/add-filters/button.tsx b/apps/web/core/components/rich-filters/add-filters/button.tsx
index 51f58c37505..3a13170b1a9 100644
--- a/apps/web/core/components/rich-filters/add-filters/button.tsx
+++ b/apps/web/core/components/rich-filters/add-filters/button.tsx
@@ -8,20 +8,39 @@ import React from "react";
 import { observer } from "mobx-react";
 import { ListFilter } from "lucide-react";
 // plane imports
-import type { TButtonSize, TButtonVariant } from "@plane/propel/button";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
+import type { ButtonSize, ButtonVariant } from "@makeplane/propel/elements/button";
 import type { IFilterInstance } from "@plane/shared-state";
 import type { TExternalFilter, TFilterProperty, TSupportedOperators } from "@plane/types";
 import { LOGICAL_OPERATOR } from "@plane/types";
-import { cn } from "@plane/utils";
 // local imports
 import { AddFilterDropdown } from "./dropdown";
 
+type TLegacyButtonSize = "sm" | "base" | "lg" | "xl";
+type TLegacyButtonVariant = "primary" | "secondary" | "tertiary" | "ghost" | "link" | "error-fill" | "error-outline";
+
+const ADD_FILTER_BUTTON_SIZE: Record<TLegacyButtonSize, ButtonSize> = {
+  sm: "xs",
+  base: "sm",
+  lg: "md",
+  xl: "lg",
+};
+
+const ADD_FILTER_BUTTON_VARIANT: Record<TLegacyButtonVariant, ButtonVariant> = {
+  primary: "primary",
+  secondary: "secondary",
+  tertiary: "tertiary",
+  ghost: "ghost",
+  link: "ghost",
+  "error-fill": "danger",
+  "error-outline": "danger-outline",
+};
+
 export type TAddFilterButtonProps<P extends TFilterProperty, E extends TExternalFilter> = {
   buttonConfig?: {
     label: string | null;
-    variant?: TButtonVariant;
-    size?: TButtonSize;
+    variant?: TLegacyButtonVariant;
+    size?: TLegacyButtonSize;
     className?: string;
     defaultOpen?: boolean;
     iconConfig?: {
@@ -41,12 +60,10 @@ export const AddFilterButton = observer(function AddFilterButton<P extends TFilt
   const {
     variant = "secondary",
     size = "base",
-    className,
     label,
     iconConfig = { shouldShowIcon: true },
     isDisabled = false,
   } = buttonConfig || {};
-  // derived values
   const FilterIcon = iconConfig.iconComponent || ListFilter;
 
   const handleFilterSelect = (property: P, operator: TSupportedOperators, isNegation: boolean) => {
@@ -68,14 +85,19 @@ export const AddFilterButton = observer(function AddFilterButton<P extends TFilt
       {...props}
       buttonConfig={{
         ...buttonConfig,
-        className: cn(getButtonStyling(variant, size), "py-[5px]", className),
+        className: "border-none bg-transparent p-0 hover:bg-transparent",
       }}
       handleFilterSelect={handleFilterSelect}
       customButton={
-        <div className="flex items-center gap-1">
+        <Button
+          variant={ADD_FILTER_BUTTON_VARIANT[variant]}
+          size={ADD_FILTER_BUTTON_SIZE[size]}
+          stretch="auto"
+          render={<div />}
+        >
           {iconConfig.shouldShowIcon && <FilterIcon className="size-4 text-secondary" />}
           {label}
-        </div>
+        </Button>
       }
     />
   );
diff --git a/apps/web/core/components/rich-filters/filters-row.tsx b/apps/web/core/components/rich-filters/filters-row.tsx
index 5b8aa933189..f415e529cd8 100644
--- a/apps/web/core/components/rich-filters/filters-row.tsx
+++ b/apps/web/core/components/rich-filters/filters-row.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { ListFilterPlus } from "lucide-react";
 import { Transition } from "@headlessui/react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IFilterInstance } from "@plane/shared-state";
 import type { TExternalFilter, TFilterProperty } from "@plane/types";
 import { cn, EHeaderVariant, Header, Loader } from "@plane/ui";
@@ -79,25 +79,39 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
   const rightContent = !disabledAllOperations && (
     <>
       <ElementTransition show={filter.canClearFilters}>
-        <Button variant="secondary" className={COMMON_OPERATION_BUTTON_CLASSNAME} onClick={filter.clearFilters}>
-          {filter.clearFilterOptions?.label ?? "Clear all"}
-        </Button>
+        <span className={COMMON_OPERATION_BUTTON_CLASSNAME}>
+          <Button
+            variant="secondary"
+            size="sm"
+            stretch="auto"
+            label={filter.clearFilterOptions?.label ?? "Clear all"}
+            onClick={filter.clearFilters}
+          />
+        </span>
       </ElementTransition>
       <ElementTransition show={filter.canSaveView}>
-        <Button variant="secondary" className={COMMON_OPERATION_BUTTON_CLASSNAME} onClick={filter.saveView}>
-          {filter.saveViewOptions?.label ?? "Save view"}
-        </Button>
+        <span className={COMMON_OPERATION_BUTTON_CLASSNAME}>
+          <Button
+            variant="secondary"
+            size="sm"
+            stretch="auto"
+            label={filter.saveViewOptions?.label ?? "Save view"}
+            onClick={filter.saveView}
+          />
+        </span>
       </ElementTransition>
       <ElementTransition show={filter.canUpdateView}>
-        <Button
-          variant="secondary"
-          className={COMMON_OPERATION_BUTTON_CLASSNAME}
-          onClick={handleUpdate}
-          loading={isUpdating}
-          disabled={isUpdating}
-        >
-          {isUpdating ? "Confirming" : (filter.updateViewOptions?.label ?? "Update view")}
-        </Button>
+        <span className={COMMON_OPERATION_BUTTON_CLASSNAME}>
+          <Button
+            variant="secondary"
+            size="sm"
+            stretch="auto"
+            label={isUpdating ? "Confirming" : (filter.updateViewOptions?.label ?? "Update view")}
+            onClick={handleUpdate}
+            loading={isUpdating}
+            disabled={isUpdating}
+          />
+        </span>
       </ElementTransition>
     </>
   );
diff --git a/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx b/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx
index 0d7217373a1..839b8e7aa6a 100644
--- a/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { APITokenService } from "@plane/services";
 // components
@@ -41,9 +41,13 @@ export const APITokensProfileSettings = observer(function APITokensProfileSettin
         title={t("account_settings.api_tokens.title")}
         description={t("account_settings.api_tokens.description")}
         control={
-          <Button variant="primary" size="lg" onClick={() => setIsCreateTokenModalOpen(true)}>
-            {t("workspace_settings.settings.api_tokens.add_token")}
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={t("workspace_settings.settings.api_tokens.add_token")}
+            onClick={() => setIsCreateTokenModalOpen(true)}
+          />
         }
       />
       <div className="mt-7">
diff --git a/apps/web/core/components/settings/profile/content/pages/general/form.tsx b/apps/web/core/components/settings/profile/content/pages/general/form.tsx
index 7fee925ae6f..be0192c4ee8 100644
--- a/apps/web/core/components/settings/profile/content/pages/general/form.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/general/form.tsx
@@ -12,7 +12,7 @@ import { CircleUserRound } from "lucide-react";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
 import type { IUser, TUserProfile } from "@plane/types";
@@ -406,9 +406,14 @@ export const GeneralProfileSettingsForm = observer(function GeneralProfileSettin
             </div>
           </div>
           <div>
-            <Button variant="primary" type="submit" loading={isLoading}>
-              {isLoading ? t("saving") : t("save_changes")}
-            </Button>
+            <Button
+              variant="primary"
+              size="sm"
+              stretch="auto"
+              label={isLoading ? t("saving") : t("save_changes")}
+              type="submit"
+              loading={isLoading}
+            />
           </div>
         </div>
       </form>
@@ -417,9 +422,13 @@ export const GeneralProfileSettingsForm = observer(function GeneralProfileSettin
           title={t("deactivate_account")}
           description={t("deactivate_account_description")}
           control={
-            <Button variant="error-outline" onClick={() => setDeactivateAccountModal(true)}>
-              {t("deactivate_account")}
-            </Button>
+            <Button
+              variant="danger-outline"
+              size="sm"
+              stretch="auto"
+              label={t("deactivate_account")}
+              onClick={() => setDeactivateAccountModal(true)}
+            />
           }
         />
       </div>
diff --git a/apps/web/core/components/settings/profile/content/pages/security.tsx b/apps/web/core/components/settings/profile/content/pages/security.tsx
index f4d00654c8e..e239a21bc35 100644
--- a/apps/web/core/components/settings/profile/content/pages/security.tsx
+++ b/apps/web/core/components/settings/profile/content/pages/security.tsx
@@ -13,7 +13,7 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { PasswordStrengthIndicator } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
@@ -272,11 +272,19 @@ export const SecurityProfileSettings = observer(function SecurityProfileSettings
             </div>
           </div>
           <div>
-            <Button variant="primary" size="xl" type="submit" loading={isSubmitting} disabled={isButtonDisabled}>
-              {isSubmitting
-                ? `${t("auth.common.password.change_password.label.submitting")}`
-                : t("auth.common.password.change_password.label.default")}
-            </Button>
+            <Button
+              variant="primary"
+              size="lg"
+              stretch="auto"
+              label={
+                isSubmitting
+                  ? `${t("auth.common.password.change_password.label.submitting")}`
+                  : t("auth.common.password.change_password.label.default")
+              }
+              type="submit"
+              loading={isSubmitting}
+              disabled={isButtonDisabled}
+            />
           </div>
         </div>
       </form>
diff --git a/apps/web/core/components/sidebar/add-button.tsx b/apps/web/core/components/sidebar/add-button.tsx
index 6db327e363b..1ce096c347b 100644
--- a/apps/web/core/components/sidebar/add-button.tsx
+++ b/apps/web/core/components/sidebar/add-button.tsx
@@ -4,25 +4,31 @@
  * See the LICENSE file for details.
  */
 
-import { Button } from "@plane/propel/button";
+import type { MouseEventHandler, ReactNode } from "react";
+import { Button } from "@makeplane/propel/components/button";
 
-type Props = React.ComponentProps<"button"> & {
-  label: React.ReactNode;
+type Props = {
+  label: string;
+  icon?: ReactNode;
   onClick: () => void;
+  disabled?: boolean;
+  onMouseEnter?: MouseEventHandler<HTMLSpanElement>;
+  onMouseLeave?: MouseEventHandler<HTMLSpanElement>;
 };
 
 export function SidebarAddButton(props: Props) {
-  const { label, onClick, disabled, ...rest } = props;
+  const { label, icon, onClick, disabled, onMouseEnter, onMouseLeave } = props;
   return (
-    <Button
-      variant={"secondary"}
-      size={"xl"}
-      className="w-full justify-start"
-      onClick={onClick}
-      disabled={disabled}
-      {...rest}
-    >
-      {label}
-    </Button>
+    <span className="w-full justify-start" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <Button
+        variant="secondary"
+        size="lg"
+        stretch="full"
+        label={label}
+        icon={icon}
+        onClick={onClick}
+        disabled={disabled}
+      />
+    </span>
   );
 }
diff --git a/apps/web/core/components/views/filters/order-by.tsx b/apps/web/core/components/views/filters/order-by.tsx
index 33360658864..5d80fe8086d 100644
--- a/apps/web/core/components/views/filters/order-by.tsx
+++ b/apps/web/core/components/views/filters/order-by.tsx
@@ -8,7 +8,7 @@ import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
 // plane imports
 import { VIEW_SORT_BY_OPTIONS, VIEW_SORTING_KEY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 import { CheckIcon } from "@plane/propel/icons";
 import type { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
@@ -27,20 +27,22 @@ export function ViewOrderByDropdown(props: Props) {
   const orderByDetails = VIEW_SORTING_KEY_OPTIONS.find((option) => sortKey === option.key);
   const isDescending = sortBy === "desc";
 
-  const buttonClassName = isMobile
-    ? "flex items-center text-13 text-secondary gap-2 w-full"
-    : getButtonStyling("secondary", "lg");
+  const icon = !isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />;
+  const sortLabel = orderByDetails?.i18n_label ? t(orderByDetails.i18n_label) : "";
 
-  const icon = (
-    <>{!isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />}</>
-  );
   return (
     <CustomMenu
       customButton={
-        <span className={buttonClassName}>
-          {!isMobile && icon}
-          <span className="shrink-0"> {orderByDetails?.i18n_label && t(orderByDetails?.i18n_label)}</span>
-        </span>
+        isMobile ? (
+          <span className="flex w-full items-center gap-2 text-13 text-secondary">
+            <span className="shrink-0">{sortLabel}</span>
+          </span>
+        ) : (
+          <Button variant="secondary" size="md" stretch="auto" render={<div />}>
+            {icon}
+            <span className="shrink-0">{sortLabel}</span>
+          </Button>
+        )
       }
       placement="bottom-end"
       className="flex w-full justify-center"
diff --git a/apps/web/core/components/views/form.tsx b/apps/web/core/components/views/form.tsx
index ae5712da0e5..f7eacaae699 100644
--- a/apps/web/core/components/views/form.tsx
+++ b/apps/web/core/components/views/form.tsx
@@ -12,7 +12,7 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { ETabIndices, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 import { ViewsIcon } from "@plane/propel/icons";
 import type {
@@ -284,18 +284,31 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
         </div>
       </div>
       <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-        <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
-          {t("common.cancel")}
-        </Button>
-        <Button variant="primary" size="lg" type="submit" tabIndex={getIndex("submit")} loading={isSubmitting}>
-          {data
-            ? isSubmitting
-              ? t("common.updating")
-              : t("view.update.label")
-            : isSubmitting
-              ? t("common.creating")
-              : t("view.create.label")}
-        </Button>
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          label={t("common.cancel")}
+          onClick={handleClose}
+          tabIndex={getIndex("cancel")}
+        />
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          label={
+            data
+              ? isSubmitting
+                ? t("common.updating")
+                : t("view.update.label")
+              : isSubmitting
+                ? t("common.creating")
+                : t("view.create.label")
+          }
+          type="submit"
+          tabIndex={getIndex("submit")}
+          loading={isSubmitting}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/web-hooks/empty-state.tsx b/apps/web/core/components/web-hooks/empty-state.tsx
index e79debd0690..48fa3106507 100644
--- a/apps/web/core/components/web-hooks/empty-state.tsx
+++ b/apps/web/core/components/web-hooks/empty-state.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // assets
 import EmptyWebhook from "@/app/assets/empty-state/web-hook.svg?url";
 
@@ -24,9 +24,9 @@ export function WebhooksEmptyState(props: Props) {
         <img src={EmptyWebhook} className="w-52 object-cover sm:w-60" alt="empty" />
         <h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">No webhooks</h6>
         <p className="mb-7 text-tertiary sm:mb-8">Create webhooks to receive real-time updates and automate actions</p>
-        <Button className="flex items-center gap-1.5" onClick={onClick}>
-          Add webhook
-        </Button>
+        <span className="flex items-center gap-1.5">
+          <Button variant="primary" size="sm" stretch="auto" label="Add webhook" onClick={onClick} />
+        </span>
       </div>
     </div>
   );
diff --git a/apps/web/core/components/web-hooks/form/delete-section.tsx b/apps/web/core/components/web-hooks/form/delete-section.tsx
index 5b51d78dbdf..726b8537a4d 100644
--- a/apps/web/core/components/web-hooks/form/delete-section.tsx
+++ b/apps/web/core/components/web-hooks/form/delete-section.tsx
@@ -5,7 +5,7 @@
  */
 
 import { Disclosure, Transition } from "@headlessui/react";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
 
 type Props = {
@@ -41,9 +41,7 @@ export function WebhookDeleteSection(props: Props) {
                   webhook.
                 </span>
                 <div>
-                  <Button variant="error-fill" size="lg" onClick={openDeleteModal}>
-                    Delete webhook
-                  </Button>
+                  <Button variant="danger" size="md" stretch="auto" label="Delete webhook" onClick={openDeleteModal} />
                 </div>
               </div>
             </Disclosure.Panel>
diff --git a/apps/web/core/components/web-hooks/form/form.tsx b/apps/web/core/components/web-hooks/form/form.tsx
index 4800931d004..9d5576fcf78 100644
--- a/apps/web/core/components/web-hooks/form/form.tsx
+++ b/apps/web/core/components/web-hooks/form/form.tsx
@@ -8,7 +8,7 @@ import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IWebhook, TWebhookEventTypes } from "@plane/types";
 // hooks
 import {
@@ -97,19 +97,27 @@ export const WebhookForm = observer(function WebhookForm(props: Props) {
       {data ? (
         <div className="space-y-5 pt-0">
           <WebhookSecretKey data={data} />
-          <Button size="lg" type="submit" loading={isSubmitting}>
-            {isSubmitting ? t("updating") : t("update")}
-          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            stretch="auto"
+            label={isSubmitting ? t("updating") : t("update")}
+            type="submit"
+            loading={isSubmitting}
+          />
         </div>
       ) : (
         <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-          <Button variant="secondary" size="lg" onClick={handleClose}>
-            {t("cancel")}
-          </Button>
+          <Button variant="secondary" size="md" stretch="auto" label={t("cancel")} onClick={handleClose} />
           {!webhookSecretKey && (
-            <Button type="submit" variant="primary" size="lg" loading={isSubmitting} className="capitalize">
-              {isSubmitting ? t("common.creating") : t("common.create")}
-            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={isSubmitting ? t("common.creating") : t("common.create")}
+              type="submit"
+              loading={isSubmitting}
+            />
           )}
         </div>
       )}
diff --git a/apps/web/core/components/web-hooks/form/secret-key.tsx b/apps/web/core/components/web-hooks/form/secret-key.tsx
index 98bf1b73c88..390abfd7bfd 100644
--- a/apps/web/core/components/web-hooks/form/secret-key.tsx
+++ b/apps/web/core/components/web-hooks/form/secret-key.tsx
@@ -11,7 +11,7 @@ import { useParams } from "next/navigation";
 // icons
 import { Eye, EyeOff, RefreshCw } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CopyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -134,14 +134,14 @@ export const WebhookSecretKey = observer(function WebhookSecretKey(props: Props)
             {data && (
               <div>
                 <Button
-                  onClick={handleRegenerateSecretKey}
                   variant="secondary"
-                  size="lg"
+                  size="md"
+                  stretch="auto"
+                  label={isRegenerating ? `${t("re_generating")}...` : t("re_generate_key")}
+                  icon={<RefreshCw />}
+                  onClick={handleRegenerateSecretKey}
                   loading={isRegenerating}
-                  prependIcon={<RefreshCw />}
-                >
-                  {isRegenerating ? `${t("re_generating")}...` : t("re_generate_key")}
-                </Button>
+                />
               </div>
             )}
           </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 03755264a46..795066bc4c9 100644
--- a/apps/web/core/components/web-hooks/generated-hook-details.tsx
+++ b/apps/web/core/components/web-hooks/generated-hook-details.tsx
@@ -7,7 +7,7 @@
 // components
 // ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IWebhook } from "@plane/types";
 // types
 import { WebhookSecretKey } from "./form";
@@ -31,9 +31,7 @@ export function GeneratedHookDetails(props: Props) {
         <WebhookSecretKey data={webhookDetails} />
       </div>
       <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          Close
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label="Close" onClick={handleClose} />
       </div>
     </>
   );
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
index 02e8c353c39..5c74b155c74 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
@@ -8,7 +8,7 @@ import { useParams } from "next/navigation";
 import { useForm, Controller } from "react-hook-form";
 // plane imports
 import { allTimeIn30MinutesInterval12HoursFormat } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { CloseIcon } from "@plane/propel/icons";
 import { CustomSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
@@ -215,12 +215,15 @@ export function NotificationSnoozeModal(props: TNotificationSnoozeModal) {
 
         <div className="mt-5 flex items-center justify-between gap-2">
           <div className="flex w-full items-center justify-end gap-2">
-            <Button variant="secondary" size="lg" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
-              {isSubmitting ? "Submitting..." : "Submit"}
-            </Button>
+            <Button variant="secondary" size="md" stretch="auto" label="Cancel" onClick={handleClose} />
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              label={isSubmitting ? "Submitting..." : "Submit"}
+              type="submit"
+              loading={isSubmitting}
+            />
           </div>
         </div>
       </form>
diff --git a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
index e8f1d632887..d1611cd0b28 100644
--- a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
+++ b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
@@ -8,7 +8,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { AlertTriangle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { useUser } from "@/hooks/store/user";
 import type { Props } from "./confirm-workspace-member-remove";
 
@@ -88,18 +88,24 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="secondary" onClick={handleClose}>
-                    Cancel
-                  </Button>
-                  <Button variant="error-fill" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
-                    {currentUser?.id === userDetails.id
-                      ? isRemoving
-                        ? "Leaving"
-                        : "Leave"
-                      : isRemoving
-                        ? "Removing"
-                        : "Remove"}
-                  </Button>
+                  <Button variant="secondary" size="sm" stretch="auto" label="Cancel" onClick={handleClose} />
+                  <Button
+                    variant="danger"
+                    size="sm"
+                    stretch="auto"
+                    label={
+                      currentUser?.id === userDetails.id
+                        ? isRemoving
+                          ? "Leaving"
+                          : "Leave"
+                        : isRemoving
+                          ? "Removing"
+                          : "Remove"
+                    }
+                    tabIndex={1}
+                    onClick={handleDeletion}
+                    loading={isRemoving}
+                  />
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/apps/web/core/components/workspace/billing/comparison/base.tsx b/apps/web/core/components/workspace/billing/comparison/base.tsx
index b09965a0282..4c98178b65b 100644
--- a/apps/web/core/components/workspace/billing/comparison/base.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/base.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { ArrowDown, ArrowUp } from "lucide-react";
 // plane imports
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { cn } from "@plane/utils";
 // constants
 import type { TPlanePlans } from "@/components/workspace/billing/comparison/plans";
@@ -127,13 +127,15 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
         <div className="my-4 flex items-center justify-center gap-1 pb-2">
           <Button
             variant="ghost"
+            size="sm"
+            stretch="auto"
+            label={isCompareAllFeaturesSectionOpen ? "Collapse comparison" : "Compare all features"}
+            icon={isCompareAllFeaturesSectionOpen ? <ArrowUp /> : <ArrowDown />}
+            iconPosition="end"
             onClick={() => {
               setIsCompareAllFeaturesSectionOpen(!isCompareAllFeaturesSectionOpen);
             }}
-            appendIcon={isCompareAllFeaturesSectionOpen ? <ArrowUp /> : <ArrowDown />}
-          >
-            {isCompareAllFeaturesSectionOpen ? "Collapse comparison" : "Compare all features"}
-          </Button>
+          />
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/workspace/billing/comparison/plan-detail.tsx b/apps/web/core/components/workspace/billing/comparison/plan-detail.tsx
index 27d2b8cf141..c0b62c1ce6a 100644
--- a/apps/web/core/components/workspace/billing/comparison/plan-detail.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/plan-detail.tsx
@@ -12,7 +12,7 @@ import {
   TALK_TO_SALES_URL,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { TBillingFrequency } from "@plane/types";
 import { EProductSubscriptionEnum } from "@plane/types";
 import { getSubscriptionName } from "@plane/utils";
@@ -100,9 +100,13 @@ export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps)
 
       {/* Subscription button */}
       <div className="flex flex-col items-start gap-1 py-3">
-        <Button variant="primary" size="lg" onClick={handleRedirection} className="w-full">
-          {isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
-        </Button>
+        <Button
+          variant="primary"
+          size="md"
+          stretch="full"
+          label={isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
+          onClick={handleRedirection}
+        />
       </div>
     </div>
   );
diff --git a/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
index 9ec6dc42806..76c96604637 100644
--- a/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
+++ b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { AlertTriangle } from "lucide-react";
 // ui
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
 import { useUser } from "@/hooks/store/user";
@@ -73,18 +73,24 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
         </div>
       </div>
       <div className="flex justify-end gap-2 p-4 sm:px-6">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          {t("cancel")}
-        </Button>
-        <Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
-          {currentUser?.id === userDetails.id
-            ? isRemoving
-              ? t("leaving")
-              : t("leave")
-            : isRemoving
-              ? t("removing")
-              : t("remove")}
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label={t("cancel")} onClick={handleClose} />
+        <Button
+          variant="danger"
+          size="md"
+          stretch="auto"
+          label={
+            currentUser?.id === userDetails.id
+              ? isRemoving
+                ? t("leaving")
+                : t("leave")
+              : isRemoving
+                ? t("removing")
+                : t("remove")
+          }
+          tabIndex={1}
+          onClick={handleDeletion}
+          loading={isRemoving}
+        />
       </div>
     </ModalCore>
   );
diff --git a/apps/web/core/components/workspace/create-workspace-form.tsx b/apps/web/core/components/workspace/create-workspace-form.tsx
index ae73a70f7d9..220b483a5a8 100644
--- a/apps/web/core/components/workspace/create-workspace-form.tsx
+++ b/apps/web/core/components/workspace/create-workspace-form.tsx
@@ -12,7 +12,7 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspace } from "@plane/types";
 // ui
@@ -247,13 +247,24 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
       </div>
       <div className="flex items-center gap-4">
         {secondaryButton}
-        <Button variant="primary" type="submit" size="xl" disabled={!isValid} loading={isSubmitting}>
-          {isSubmitting ? t(primaryButtonText.loading) : t(primaryButtonText.default)}
-        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          stretch="auto"
+          label={isSubmitting ? t(primaryButtonText.loading) : t(primaryButtonText.default)}
+          type="submit"
+          disabled={!isValid}
+          loading={isSubmitting}
+        />
         {!secondaryButton && (
-          <Button variant="secondary" type="button" size="xl" onClick={() => router.back()}>
-            {t("common.go_back")}
-          </Button>
+          <Button
+            variant="secondary"
+            size="lg"
+            stretch="auto"
+            label={t("common.go_back")}
+            type="button"
+            onClick={() => router.back()}
+          />
         )}
       </div>
     </form>
diff --git a/apps/web/core/components/workspace/delete-workspace-form.tsx b/apps/web/core/components/workspace/delete-workspace-form.tsx
index 6c9d6fb33bf..92845b9c1ee 100644
--- a/apps/web/core/components/workspace/delete-workspace-form.tsx
+++ b/apps/web/core/components/workspace/delete-workspace-form.tsx
@@ -11,7 +11,7 @@ import { AlertTriangle } from "lucide-react";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspace } from "@plane/types";
 
@@ -159,12 +159,16 @@ export const DeleteWorkspaceForm = observer(function DeleteWorkspaceForm(props:
       </div>
 
       <div className="flex justify-end gap-2">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          {t("cancel")}
-        </Button>
-        <Button variant="error-fill" size="lg" type="submit" disabled={!canDelete} loading={isSubmitting}>
-          {isSubmitting ? t("deleting") : t("confirm")}
-        </Button>
+        <Button variant="secondary" size="md" stretch="auto" label={t("cancel")} onClick={handleClose} />
+        <Button
+          variant="danger"
+          size="md"
+          stretch="auto"
+          label={isSubmitting ? t("deleting") : t("confirm")}
+          type="submit"
+          disabled={!canDelete}
+          loading={isSubmitting}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/components/workspace/delete-workspace-section.tsx b/apps/web/core/components/workspace/delete-workspace-section.tsx
index 6a6f845d077..e8c561c545d 100644
--- a/apps/web/core/components/workspace/delete-workspace-section.tsx
+++ b/apps/web/core/components/workspace/delete-workspace-section.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IWorkspace } from "@plane/types";
 // components
 import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
@@ -37,9 +37,13 @@ export const DeleteWorkspaceSection = observer(function DeleteWorkspaceSection(p
         title={t("workspace_settings.settings.general.delete_workspace")}
         description={t("workspace_settings.settings.general.delete_workspace_description")}
         control={
-          <Button variant="error-outline" onClick={() => setDeleteWorkspaceModal(true)}>
-            {t("delete")}
-          </Button>
+          <Button
+            variant="danger-outline"
+            size="sm"
+            stretch="auto"
+            label={t("delete")}
+            onClick={() => setDeleteWorkspaceModal(true)}
+          />
         }
       />
     </>
diff --git a/apps/web/core/components/workspace/edition-badge.tsx b/apps/web/core/components/workspace/edition-badge.tsx
index b11e850b4e5..ec181c924c8 100644
--- a/apps/web/core/components/workspace/edition-badge.tsx
+++ b/apps/web/core/components/workspace/edition-badge.tsx
@@ -13,7 +13,7 @@ import { Tooltip } from "@plane/propel/tooltip";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 import packageJson from "package.json";
 // local components
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PaidPlanUpgradeModal } from "@/components/license/modal/upgrade-modal";
 
 export const WorkspaceEditionBadge = observer(function WorkspaceEditionBadge() {
@@ -33,13 +33,13 @@ export const WorkspaceEditionBadge = observer(function WorkspaceEditionBadge() {
       <Tooltip tooltipContent={`Version: v${packageJson.version}`} isMobile={isMobile}>
         <Button
           variant="tertiary"
-          size="lg"
+          size="md"
+          stretch="auto"
+          label="Community"
           onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
           aria-haspopup="dialog"
           aria-label={t("aria_labels.projects_sidebar.edition_badge")}
-        >
-          Community
-        </Button>
+        />
       </Tooltip>
     </>
   );
diff --git a/apps/web/core/components/workspace/invite-modal/actions.tsx b/apps/web/core/components/workspace/invite-modal/actions.tsx
index 23b5f4d0dda..f5249710303 100644
--- a/apps/web/core/components/workspace/invite-modal/actions.tsx
+++ b/apps/web/core/components/workspace/invite-modal/actions.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlusIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 
@@ -57,14 +57,26 @@ export const InvitationModalActions = observer(function InvitationModalActions(p
         {addMoreButtonText || t("common.add_more")}
       </button>
       <div className="flex items-center gap-2">
-        <Button variant="secondary" size="lg" onClick={handleClose}>
-          {cancelButtonText || t("cancel")}
-        </Button>
-        <Button variant="primary" size="lg" type="submit" loading={isSubmitting} disabled={isInviteDisabled}>
-          {isSubmitting
-            ? submitButtonText?.loading || t("workspace_settings.settings.members.modal.button_loading")
-            : submitButtonText?.default || t("workspace_settings.settings.members.modal.button")}
-        </Button>
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          label={cancelButtonText || t("cancel")}
+          onClick={handleClose}
+        />
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          label={
+            isSubmitting
+              ? submitButtonText?.loading || t("workspace_settings.settings.members.modal.button_loading")
+              : submitButtonText?.default || t("workspace_settings.settings.members.modal.button")
+          }
+          type="submit"
+          loading={isSubmitting}
+          disabled={isInviteDisabled}
+        />
       </div>
     </div>
   );
diff --git a/apps/web/core/components/workspace/settings/workspace-details.tsx b/apps/web/core/components/workspace/settings/workspace-details.tsx
index 8b6dff916ee..cf1095b9d5e 100644
--- a/apps/web/core/components/workspace/settings/workspace-details.tsx
+++ b/apps/web/core/components/workspace/settings/workspace-details.tsx
@@ -12,7 +12,7 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { ORGANIZATION_SIZE, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { EditIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspace } from "@plane/types";
@@ -293,14 +293,14 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
           <div className="flex items-center justify-between py-2">
             <Button
               variant="primary"
-              size="lg"
+              size="md"
+              stretch="auto"
+              label={isLoading ? t("updating") : t("workspace_settings.settings.general.update_workspace")}
               onClick={(e) => {
                 void handleSubmit(onSubmit)(e);
               }}
               loading={isLoading}
-            >
-              {isLoading ? t("updating") : t("workspace_settings.settings.general.update_workspace")}
-            </Button>
+            />
           </div>
         )}
       </div>
diff --git a/apps/web/core/components/workspace/sidebar/quick-actions.tsx b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
index f1d6bd80ae5..e9a32f88900 100644
--- a/apps/web/core/components/workspace/sidebar/quick-actions.tsx
+++ b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
@@ -79,12 +79,8 @@ export const SidebarQuickActions = observer(function SidebarQuickActions() {
       />
       <div className="flex cursor-pointer items-center justify-between gap-2">
         <SidebarAddButton
-          label={
-            <>
-              <AddWorkItemIcon className="size-4" />
-              <span className="max-w-[145px] truncate text-13 font-medium">{t("sidebar.new_work_item")}</span>
-            </>
-          }
+          label={t("sidebar.new_work_item")}
+          icon={<AddWorkItemIcon className="size-4" />}
           onClick={() => toggleCreateIssueModal(true)}
           disabled={disabled}
           onMouseEnter={handleMouseEnter}
diff --git a/apps/web/core/components/workspace/views/form.tsx b/apps/web/core/components/workspace/views/form.tsx
index 73350a9b075..80494ed0412 100644
--- a/apps/web/core/components/workspace/views/form.tsx
+++ b/apps/web/core/components/workspace/views/form.tsx
@@ -11,7 +11,7 @@ import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, IWorkspaceView, IIssueFilters } from "@plane/types";
 import { EViewAccess, EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
 import { TextArea } from "@plane/ui";
@@ -189,18 +189,23 @@ export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Prop
         </div>
       </div>
       <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
-        <Button variant="secondary" onClick={handleClose}>
-          {t("common.cancel")}
-        </Button>
-        <Button variant="primary" type="submit" loading={isSubmitting}>
-          {data
-            ? isSubmitting
-              ? t("common.updating")
-              : t("view.update.label")
-            : isSubmitting
-              ? t("common.creating")
-              : t("view.create.label")}
-        </Button>
+        <Button variant="secondary" size="sm" stretch="auto" label={t("common.cancel")} onClick={handleClose} />
+        <Button
+          variant="primary"
+          size="sm"
+          stretch="auto"
+          label={
+            data
+              ? isSubmitting
+                ? t("common.updating")
+                : t("view.update.label")
+              : isSubmitting
+                ? t("common.creating")
+                : t("view.create.label")
+          }
+          type="submit"
+          loading={isSubmitting}
+        />
       </div>
     </form>
   );
diff --git a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
index e74dfd55dbe..0366613f3e5 100644
--- a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -12,11 +12,10 @@ import useSWR from "swr";
 // ui
 import { LogOut } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { Button, getButtonStyling } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import { PlaneLogo } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
-import { cn } from "@plane/utils";
 // assets
 import WorkSpaceNotAvailable from "@/app/assets/workspace/workspace-not-available.png?url";
 // components
@@ -179,19 +178,34 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
             </p>
             <div className="flex items-center justify-center gap-2 pt-4">
               {allWorkspaces && allWorkspaces.length > 0 && (
-                <Link href="/" className={cn(getButtonStyling("primary", "base"))}>
-                  Go Home
-                </Link>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  stretch="auto"
+                  label="Go Home"
+                  nativeButton={false}
+                  render={<Link href="/" />}
+                />
               )}
               {allWorkspaces?.length > 0 && (
-                <Link href="/settings/profile/general/" className={cn(getButtonStyling("secondary", "base"))}>
-                  Visit Profile
-                </Link>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  stretch="auto"
+                  label="Visit Profile"
+                  nativeButton={false}
+                  render={<Link href="/settings/profile/general/" />}
+                />
               )}
               {allWorkspaces && allWorkspaces.length === 0 && (
-                <Link href="/create-workspace/" className={cn(getButtonStyling("secondary", "base"))}>
-                  Create new workspace
-                </Link>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  stretch="auto"
+                  label="Create new workspace"
+                  nativeButton={false}
+                  render={<Link href="/create-workspace/" />}
+                />
               )}
             </div>
           </div>
@@ -216,16 +230,22 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
               </p>
             </div>
             <div className="flex items-center justify-center gap-2">
-              <Link href="/invitations">
-                <span>
-                  <Button variant="secondary">Check pending invites</Button>
-                </span>
-              </Link>
-              <Link href="/create-workspace">
-                <span>
-                  <Button variant="primary">Create new workspace</Button>
-                </span>
-              </Link>
+              <Button
+                variant="secondary"
+                size="sm"
+                stretch="auto"
+                label="Check pending invites"
+                nativeButton={false}
+                render={<Link href="/invitations" />}
+              />
+              <Button
+                variant="primary"
+                size="sm"
+                stretch="auto"
+                label="Create new workspace"
+                nativeButton={false}
+                render={<Link href="/create-workspace" />}
+              />
             </div>
           </div>
         </div>

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 2/3] 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 572ebe6d2ee..be884294e24 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 6233e21921c..f66a423eef4 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 83c4e057876..e12c08c539a 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 e694d35942e..a9f4904b57f 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 c903e561fbf..b0a7c9c97a5 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 df8cb5730b1..c35bf547c3e 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 4f3f9b230f9..8c9c43b6410 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 1baaac204fb..9b0c63c7541 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 3e987ae1bfe..03fe2aa48f5 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 9f67e196c7e..23d1cfacaa5 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 e2ae29b179f..d5de2a3511d 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 4e28160c4a8..b94aaac78a5 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 998055c52e4..1ec0454fb6f 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 2db6b84bec8..5d58cb55e08 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 6ecdfab98a8..fc4e292cb5b 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 7869d7ddaa9..79468a7738d 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 70878a40563..9484cb71db2 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 358217b3785..1f40b32bb90 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 47ab8d1a6a5..3ac0ae03a30 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 795066bc4c9..1a00c90fd2b 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;

From 8b4ea6dc93e8bafa250a13e922c2235b09a91aa0 Mon Sep 17 00:00:00 2001
From: anmolsinghbhatia <asb.dev.1001@gmail.com>
Date: Mon, 31 Aug 2026 14:37:00 +0530
Subject: [PATCH 3/3] fix: set explicit sizes on migrated Button icons

Lucide defaults to 24px and published Button no longer injects glyph
size. Pass size-3.5 for xs/sm and size-4 for md/lg, including cloneElement
on dynamic icon props.
---
 .../app/(all)/[workspaceSlug]/(projects)/header.tsx  |  4 ++--
 .../(projects)/profile/[userId]/header.tsx           |  6 +++++-
 apps/web/core/components/common/empty-state.tsx      | 10 ++++++++--
 apps/web/core/components/common/new-empty-state.tsx  | 10 ++++++++--
 apps/web/core/components/cycles/transfer-issues.tsx  |  2 +-
 .../core/components/empty-state/comic-box-button.tsx | 12 +++++++++---
 .../empty-state/detailed-empty-state-root.tsx        |  9 +++++++--
 .../core/components/estimates/points/create-root.tsx |  2 +-
 apps/web/core/components/exporter/prev-exports.tsx   |  4 ++--
 .../issue-detail/label/select/label-select.tsx       |  2 +-
 .../components/issues/issue-detail/subscription.tsx  |  2 +-
 .../filters/header/helpers/dropdown.tsx              | 12 +++++++++---
 apps/web/core/components/project/empty-state.tsx     | 10 ++++++++--
 apps/web/core/components/sidebar/add-button.tsx      |  9 ++++++++-
 .../core/components/web-hooks/form/secret-key.tsx    |  2 +-
 .../components/workspace/billing/comparison/base.tsx |  4 +++-
 16 files changed, 74 insertions(+), 26 deletions(-)

diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
index be884294e24..ee399a610cc 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
@@ -44,7 +44,7 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
               size="md"
               stretch="auto"
               onClick={() => toggleWidgetSettings(true)}
-              icon={<Shapes />}
+              icon={<Shapes className="size-4" />}
               label={t("home.manage_widgets")}
             />
           </span>
@@ -53,7 +53,7 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
               variant="secondary"
               size="md"
               aria-label={t("home.manage_widgets")}
-              icon={<Shapes />}
+              icon={<Shapes className="size-4" />}
               onClick={() => toggleWidgetSettings(true)}
             />
           </span>
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 f66a423eef4..e802874997e 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
@@ -100,7 +100,11 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
               variant="ghost"
               size="md"
               aria-label="Toggle profile sidebar"
-              icon={<PanelRight className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />}
+              icon={
+                <PanelRight
+                  className={`size-4 ${!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"}`}
+                />
+              }
               onClick={() => toggleProfileSidebar()}
             />
           </div>
diff --git a/apps/web/core/components/common/empty-state.tsx b/apps/web/core/components/common/empty-state.tsx
index 39714252e82..5f073d5a491 100644
--- a/apps/web/core/components/common/empty-state.tsx
+++ b/apps/web/core/components/common/empty-state.tsx
@@ -4,10 +4,16 @@
  * See the LICENSE file for details.
  */
 
-import React from "react";
+import React, { cloneElement, isValidElement } from "react";
 
 // ui
 import { Button } from "@makeplane/propel/components/button";
+import { cn } from "@plane/utils";
+
+function withIconSize(icon: React.ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
 
 type Props = {
   title: string;
@@ -36,7 +42,7 @@ export function EmptyState({ title, description, image, primaryButton, secondary
               size="sm"
               stretch="auto"
               label={primaryButton.text}
-              icon={primaryButton.icon}
+              icon={withIconSize(primaryButton.icon, "size-3.5")}
               onClick={primaryButton.onClick}
               disabled={disabled}
             />
diff --git a/apps/web/core/components/common/new-empty-state.tsx b/apps/web/core/components/common/new-empty-state.tsx
index 9b0c63c7541..1ff3b6815ab 100644
--- a/apps/web/core/components/common/new-empty-state.tsx
+++ b/apps/web/core/components/common/new-empty-state.tsx
@@ -4,10 +4,16 @@
  * See the LICENSE file for details.
  */
 
-import React, { useState } from "react";
+import React, { cloneElement, isValidElement, useState } from "react";
 
 // ui
 import { Button } from "@makeplane/propel/components/button";
+import { cn } from "@plane/utils";
+
+function withIconSize(icon: React.ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
 
 type Props = {
   title: string;
@@ -57,7 +63,7 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
                   onClick={primaryButton.onClick}
                   disabled={disabled}
                   label={primaryButton.text}
-                  icon={primaryButton.icon}
+                  icon={withIconSize(primaryButton.icon, "size-4")}
                 />
                 <div
                   onMouseEnter={handleMouseEnter}
diff --git a/apps/web/core/components/cycles/transfer-issues.tsx b/apps/web/core/components/cycles/transfer-issues.tsx
index 027d5bbe410..65d4ad142f1 100644
--- a/apps/web/core/components/cycles/transfer-issues.tsx
+++ b/apps/web/core/components/cycles/transfer-issues.tsx
@@ -32,7 +32,7 @@ export function TransferIssues(props: Props) {
             size="md"
             stretch="auto"
             label="Transfer work items"
-            icon={<TransferIcon />}
+            icon={<TransferIcon className="size-4 fill-current" />}
             onClick={handleClick}
             disabled={disabled}
           />
diff --git a/apps/web/core/components/empty-state/comic-box-button.tsx b/apps/web/core/components/empty-state/comic-box-button.tsx
index 7452aaa4422..a585b9378ee 100644
--- a/apps/web/core/components/empty-state/comic-box-button.tsx
+++ b/apps/web/core/components/empty-state/comic-box-button.tsx
@@ -4,12 +4,18 @@
  * See the LICENSE file for details.
  */
 
-import type { Ref } from "react";
-import { Fragment, useState } from "react";
+import type { ReactNode, Ref } from "react";
+import { cloneElement, Fragment, isValidElement, useState } from "react";
 import { usePopper } from "react-popper";
 import { Popover } from "@headlessui/react";
 // plane imports
 import { Button } from "@makeplane/propel/components/button";
+import { cn } from "@plane/utils";
+
+function withIconSize(icon: ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
 
 type Props = {
   label: string;
@@ -56,7 +62,7 @@ export function ComicBoxButton(props: Props) {
             stretch="auto"
             onClick={onClick}
             disabled={disabled}
-            icon={icon}
+            icon={withIconSize(icon, "size-4")}
             label={label}
           />
           <span className="relative h-2 w-2">
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 03fe2aa48f5..b78ff763977 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
@@ -4,13 +4,18 @@
  * See the LICENSE file for details.
  */
 
-import React from "react";
+import React, { cloneElement, isValidElement } from "react";
 import { observer } from "mobx-react";
 // ui
 import { Button } from "@makeplane/propel/components/button";
 // utils
 import { cn } from "@plane/utils";
 
+function withIconSize(icon: React.ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
+
 type EmptyStateSize = "sm" | "base" | "lg";
 
 type ButtonConfig = {
@@ -54,7 +59,7 @@ function CustomButton({
       size="sm"
       stretch="auto"
       label={config.text}
-      icon={icon}
+      icon={withIconSize(icon, "size-3.5")}
       iconPosition={config.prependIcon ? "start" : "end"}
       onClick={config.onClick}
       disabled={config.disabled}
diff --git a/apps/web/core/components/estimates/points/create-root.tsx b/apps/web/core/components/estimates/points/create-root.tsx
index 00927b2df05..cdf3b9bfb82 100644
--- a/apps/web/core/components/estimates/points/create-root.tsx
+++ b/apps/web/core/components/estimates/points/create-root.tsx
@@ -175,7 +175,7 @@ export const EstimatePointCreateRoot = observer(function EstimatePointCreateRoot
           variant="ghost"
           size="sm"
           stretch="auto"
-          icon={<PlusIcon />}
+          icon={<PlusIcon className="size-3.5" />}
           onClick={handleCreate}
           label={`Add ${estimateType}`}
         />
diff --git a/apps/web/core/components/exporter/prev-exports.tsx b/apps/web/core/components/exporter/prev-exports.tsx
index 53880b10ef3..8dece25dc09 100644
--- a/apps/web/core/components/exporter/prev-exports.tsx
+++ b/apps/web/core/components/exporter/prev-exports.tsx
@@ -96,7 +96,7 @@ export const PrevExports = observer(function PrevExports(props: Props) {
               size="xs"
               stretch="auto"
               label={t("prev")}
-              icon={<MoveLeft />}
+              icon={<MoveLeft className="size-3.5" />}
               disabled={!exporterServices?.prev_page_results}
               onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
             />
@@ -105,7 +105,7 @@ export const PrevExports = observer(function PrevExports(props: Props) {
               size="xs"
               stretch="auto"
               label={t("next")}
-              icon={<MoveRight />}
+              icon={<MoveRight className="size-3.5" />}
               iconPosition="end"
               disabled={!exporterServices?.next_page_results}
               onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
diff --git a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
index a4383b3d146..35b8f9b984d 100644
--- a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
@@ -132,7 +132,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
             size="xs"
             stretch="auto"
             label={label}
-            icon={<PlusIcon />}
+            icon={<PlusIcon className="size-3.5" />}
             ref={setReferenceElement}
             type="button"
             onClick={() => !projectLabels && fetchLabels()}
diff --git a/apps/web/core/components/issues/issue-detail/subscription.tsx b/apps/web/core/components/issues/issue-detail/subscription.tsx
index a06d1125655..f769eaf20ab 100644
--- a/apps/web/core/components/issues/issue-detail/subscription.tsx
+++ b/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -82,7 +82,7 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
   return (
     <div>
       <Button
-        icon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
+        icon={isSubscribed ? <BellOff className="size-4" /> : <Bell className="size-4" />}
         variant="secondary"
         size="md"
         stretch="auto"
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 fc4e292cb5b..123ef8ed7e8 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
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import React, { Fragment, useState } from "react";
+import React, { cloneElement, Fragment, isValidElement, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
 // headless ui
@@ -12,6 +12,12 @@ import { Popover, Transition } from "@headlessui/react";
 // ui
 import { Button } from "@makeplane/propel/components/button";
 import { IconButton } from "@makeplane/propel/components/icon-button";
+import { cn } from "@plane/utils";
+
+function withIconSize(icon: React.ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
 
 type Props = {
   children: React.ReactNode;
@@ -62,7 +68,7 @@ export function FiltersDropdown(props: Props) {
                     variant="secondary"
                     size="md"
                     stretch="auto"
-                    icon={icon}
+                    icon={withIconSize(icon, "size-4")}
                     tabIndex={tabIndex}
                     label={title ?? ""}
                   />
@@ -76,7 +82,7 @@ export function FiltersDropdown(props: Props) {
                       variant="secondary"
                       size="md"
                       aria-label={typeof title === "string" ? title : "Filters"}
-                      icon={miniIcon}
+                      icon={withIconSize(miniIcon, "size-4")}
                       disabled={disabled}
                       tabIndex={tabIndex}
                     />
diff --git a/apps/web/core/components/project/empty-state.tsx b/apps/web/core/components/project/empty-state.tsx
index f12a689bcc8..4d7c313f4c1 100644
--- a/apps/web/core/components/project/empty-state.tsx
+++ b/apps/web/core/components/project/empty-state.tsx
@@ -4,9 +4,15 @@
  * See the LICENSE file for details.
  */
 
-import React from "react";
+import React, { cloneElement, isValidElement } from "react";
 // ui
 import { Button } from "@makeplane/propel/components/button";
+import { cn } from "@plane/utils";
+
+function withIconSize(icon: React.ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
 
 type Props = {
   title: string;
@@ -37,7 +43,7 @@ export function EmptyState({ title, description, image, primaryButton, secondary
               size="lg"
               stretch="auto"
               label={primaryButton.text}
-              icon={primaryButton.icon}
+              icon={withIconSize(primaryButton.icon, "size-4")}
               onClick={primaryButton.onClick}
               disabled={disabled}
             />
diff --git a/apps/web/core/components/sidebar/add-button.tsx b/apps/web/core/components/sidebar/add-button.tsx
index 1ce096c347b..b1a7f36cfd5 100644
--- a/apps/web/core/components/sidebar/add-button.tsx
+++ b/apps/web/core/components/sidebar/add-button.tsx
@@ -5,7 +5,14 @@
  */
 
 import type { MouseEventHandler, ReactNode } from "react";
+import { cloneElement, isValidElement } from "react";
 import { Button } from "@makeplane/propel/components/button";
+import { cn } from "@plane/utils";
+
+function withIconSize(icon: ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
 
 type Props = {
   label: string;
@@ -25,7 +32,7 @@ export function SidebarAddButton(props: Props) {
         size="lg"
         stretch="full"
         label={label}
-        icon={icon}
+        icon={withIconSize(icon, "size-4")}
         onClick={onClick}
         disabled={disabled}
       />
diff --git a/apps/web/core/components/web-hooks/form/secret-key.tsx b/apps/web/core/components/web-hooks/form/secret-key.tsx
index 390abfd7bfd..97fc5f34beb 100644
--- a/apps/web/core/components/web-hooks/form/secret-key.tsx
+++ b/apps/web/core/components/web-hooks/form/secret-key.tsx
@@ -138,7 +138,7 @@ export const WebhookSecretKey = observer(function WebhookSecretKey(props: Props)
                   size="md"
                   stretch="auto"
                   label={isRegenerating ? `${t("re_generating")}...` : t("re_generate_key")}
-                  icon={<RefreshCw />}
+                  icon={<RefreshCw className="size-4" />}
                   onClick={handleRegenerateSecretKey}
                   loading={isRegenerating}
                 />
diff --git a/apps/web/core/components/workspace/billing/comparison/base.tsx b/apps/web/core/components/workspace/billing/comparison/base.tsx
index 4c98178b65b..cf7c6a032a9 100644
--- a/apps/web/core/components/workspace/billing/comparison/base.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/base.tsx
@@ -130,7 +130,9 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
             size="sm"
             stretch="auto"
             label={isCompareAllFeaturesSectionOpen ? "Collapse comparison" : "Compare all features"}
-            icon={isCompareAllFeaturesSectionOpen ? <ArrowUp /> : <ArrowDown />}
+            icon={
+              isCompareAllFeaturesSectionOpen ? <ArrowUp className="size-3.5" /> : <ArrowDown className="size-3.5" />
+            }
             iconPosition="end"
             onClick={() => {
               setIsCompareAllFeaturesSectionOpen(!isCompareAllFeaturesSectionOpen);