diff --git a/packages/kintsugi-next/components/referenda/vote.js b/packages/kintsugi-next/components/referenda/vote.js
index d8d34b3987..17c11a0861 100644
--- a/packages/kintsugi-next/components/referenda/vote.js
+++ b/packages/kintsugi-next/components/referenda/vote.js
@@ -12,7 +12,7 @@ import {
 } from "utils/referendumUtil";
 import Threshold from "./threshold";
 import Loading from "next-common/components/loading";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { SecondaryCardDetail } from "next-common/components/styled/containers/secondaryCard";
 import { TitleContainer } from "next-common/components/styled/containers/titleContainer";
 import { useSelector } from "react-redux";
@@ -217,7 +217,7 @@ function Vote({ referendumInfo, referendumIndex }) {
 
       {!referendumInfo?.finished && (
         <PrimaryButton
-          isFill
+          className="w-full"
           onClick={() => {
             setShowVote(true);
           }}
diff --git a/packages/next-common/components/buttons/colorButton.js b/packages/next-common/components/buttons/colorButton.js
deleted file mode 100644
index f9c6764293..0000000000
--- a/packages/next-common/components/buttons/colorButton.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { BackgroundButton, DisabledButton } from "./styled";
-import { LightLoading } from "./loading";
-
-const RawPositiveButton = styled(BackgroundButton)`
-  background-color: var(--green500);
-  border-color: var(--green500);
-`;
-
-const RawNegativeButton = styled(BackgroundButton)`
-  background-color: var(--red500);
-  border-color: var(--red500);
-`;
-
-function ColorButton({
-  children,
-  positive = true,
-  isLoading = false,
-  disabled = false,
-  ...props
-}) {
-  let TargetButton = positive ? RawPositiveButton : RawNegativeButton;
-  if (disabled) {
-    TargetButton = DisabledButton;
-  }
-
-  const allProps = {
-    isLoading,
-    disabled,
-    ...props,
-  };
-
-  return (
-    <TargetButton {...allProps}>
-      {isLoading ? <LightLoading /> : children}
-    </TargetButton>
-  );
-}
-
-export function PositiveButton(props) {
-  return <ColorButton {...props} positive={true} />;
-}
-
-export function NegativeButton(props) {
-  return <ColorButton {...props} positive={false} />;
-}
diff --git a/packages/next-common/components/buttons/dangerButton.js b/packages/next-common/components/buttons/dangerButton.js
deleted file mode 100644
index 4f9bb125f3..0000000000
--- a/packages/next-common/components/buttons/dangerButton.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import CommonButton, { DisabledButton } from "./styled";
-import { LightLoading } from "./loading";
-
-const RawButton = styled(CommonButton)`
-  background-color: var(--red500);
-  color: var(--textPrimaryContrast);
-  border-color: var(--red500);
-`;
-
-export const Disabled = styled(DisabledButton)`
-  background-color: var(--neutral500);
-  color: var(--textPrimaryContrast);
-  border-color: var(--neutral500);
-`;
-
-export default function DangerButton({
-  children,
-  isLoading = false,
-  disabled = false,
-  ...props
-}) {
-  let TargetButton = RawButton;
-  if (disabled) {
-    TargetButton = Disabled;
-  }
-
-  const allProps = {
-    isLoading,
-    disabled,
-    ...props,
-  };
-
-  return (
-    <TargetButton {...allProps}>
-      {isLoading ? <LightLoading /> : children}
-    </TargetButton>
-  );
-}
diff --git a/packages/next-common/components/buttons/ghostButton.js b/packages/next-common/components/buttons/ghostButton.js
deleted file mode 100644
index d01b3968a4..0000000000
--- a/packages/next-common/components/buttons/ghostButton.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import CommonButton, { DisabledButton } from "./styled";
-import { DarkLoading } from "./loading";
-
-const RawButton = styled(CommonButton)`
-  background-color: var(--neutral100);
-  color: var(--textPrimary);
-  border-color: var(--neutral400);
-`;
-
-const Disabled = styled(DisabledButton)`
-  background-color: var(--neutral500);
-  color: var(--textTertiary);
-  border-color: var(--neutral500);
-`;
-
-export default function GhostButton({
-  children,
-  isLoading = false,
-  disabled = false,
-  ...props
-}) {
-  let TargetButton = RawButton;
-  if (disabled) {
-    TargetButton = Disabled;
-  }
-
-  const allProps = {
-    isLoading,
-    disabled,
-    ...props,
-  };
-
-  return (
-    <TargetButton {...allProps}>
-      {isLoading ? <DarkLoading /> : children}
-    </TargetButton>
-  );
-}
diff --git a/packages/next-common/components/buttons/index.js b/packages/next-common/components/buttons/index.js
deleted file mode 100644
index c2c2666088..0000000000
--- a/packages/next-common/components/buttons/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./ghostButton";
-export * from "./primaryButton";
diff --git a/packages/next-common/components/buttons/loading.js b/packages/next-common/components/buttons/loading.js
deleted file mode 100644
index 716d971dae..0000000000
--- a/packages/next-common/components/buttons/loading.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Loading from "../loading";
-import React from "react";
-
-export function LightLoading() {
-  return <Loading size={14} color={"#ffffff"} />;
-}
-
-export function DarkLoading() {
-  return <Loading size={14} color={"#1e2134"} />;
-}
diff --git a/packages/next-common/components/buttons/loadingV2.js b/packages/next-common/components/buttons/loadingV2.js
deleted file mode 100644
index f063602e50..0000000000
--- a/packages/next-common/components/buttons/loadingV2.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import LoadingV2 from "../loadingV2";
-
-export function LightLoading() {
-  return <LoadingV2 size={24} color={"#ffffff"} />;
-}
-
-export function DarkLoading() {
-  return <LoadingV2 size={24} color={"var(--theme300)"} />;
-}
diff --git a/packages/next-common/components/buttons/primaryButton.js b/packages/next-common/components/buttons/primaryButton.js
deleted file mode 100644
index 9e6fa48e22..0000000000
--- a/packages/next-common/components/buttons/primaryButton.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { BackgroundButton, DisabledButton } from "./styled";
-import { LightLoading } from "./loading";
-
-const RawButton = styled(BackgroundButton)`
-  background-color: var(--theme500);
-  border: none;
-`;
-
-const Disabled = styled(DisabledButton)`
-  background-color: var(--theme300);
-  border: none;
-  color: var(--textPrimaryContrast);
-`;
-
-export default function PrimaryButton({
-  children,
-  isLoading = false,
-  disabled = false,
-  ...props
-}) {
-  let TargetButton = RawButton;
-  if (disabled) {
-    TargetButton = Disabled;
-  }
-
-  const allProps = {
-    isLoading,
-    disabled,
-    ...props,
-  };
-
-  return (
-    <TargetButton {...allProps}>
-      {isLoading ? <LightLoading /> : children}
-    </TargetButton>
-  );
-}
diff --git a/packages/next-common/components/buttons/styled.js b/packages/next-common/components/buttons/styled.js
deleted file mode 100644
index e8bd819354..0000000000
--- a/packages/next-common/components/buttons/styled.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import styled, { css } from "styled-components";
-
-const CommonButtonWrapper = styled.button`
-  padding: 0 16px;
-  height: 38px;
-  border-radius: 8px;
-  cursor: pointer;
-  text-align: center;
-  display: inline-block;
-  box-sizing: border-box;
-  font-weight: 500;
-  font-size: 14px;
-  border-width: 1px;
-  border-style: solid;
-  ${(p) =>
-    p.isFill &&
-    css`
-      width: 100%;
-    `}
-
-  ${(p) =>
-    p.isLoading &&
-    css`
-      pointer-events: none;
-    `}
-
-  ${(p) =>
-    p.small &&
-    css`
-      height: 26px;
-      font-size: 12px;
-      border-radius: 4px;
-    `}
-
-  ${(p) =>
-    p.disabled &&
-    css`
-      cursor: not-allowed;
-    `}
-`;
-
-function CommonButton({
-  children,
-  className,
-  icon,
-  isLoading,
-  disabled,
-  small,
-  ...props
-}) {
-  return (
-    <CommonButtonWrapper
-      className={className}
-      small={small}
-      isLoading={isLoading}
-      disabled={disabled}
-      {...props}
-    >
-      <div className="w-full h-full flex items-center justify-center gap-x-1.5">
-        {icon && !isLoading && icon}
-        {children}
-      </div>
-    </CommonButtonWrapper>
-  );
-}
-
-// These kinds of button has a colored background, and the text color is contrast.
-export const BackgroundButton = styled(CommonButton)`
-  color: var(--textPrimaryContrast) !important;
-`;
-
-export const DisabledButton = styled(CommonButton)`
-  cursor: not-allowed;
-  background-color: var(--neutral500);
-  border-color: var(--neutral500);
-  color: var(--textPrimaryContrast);
-`;
-
-export default CommonButton;
diff --git a/packages/next-common/components/calendar/createEventModal/index.js b/packages/next-common/components/calendar/createEventModal/index.js
index 99bd75f519..7251aa7a1e 100644
--- a/packages/next-common/components/calendar/createEventModal/index.js
+++ b/packages/next-common/components/calendar/createEventModal/index.js
@@ -4,7 +4,7 @@ import PopupWithSigner from "../../../components/popupWithSigner";
 import Title from "./title";
 import Link from "./link";
 import Description from "./description";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import nextApi from "../../../services/nextApi";
 import { useDispatch } from "react-redux";
 import {
@@ -136,7 +136,7 @@ function PopupContent() {
       />
       <Link setValue={setLink} />
       <PopupButtonWrapper>
-        <PrimaryButton isLoading={isLoading} onClick={submit}>
+        <PrimaryButton loading={isLoading} onClick={submit}>
           Submit
         </PrimaryButton>
       </PopupButtonWrapper>
diff --git a/packages/next-common/components/calendar/dateSelectModal/index.js b/packages/next-common/components/calendar/dateSelectModal/index.js
index b5ece98cb1..2e6483bee6 100644
--- a/packages/next-common/components/calendar/dateSelectModal/index.js
+++ b/packages/next-common/components/calendar/dateSelectModal/index.js
@@ -2,7 +2,7 @@ import React, { useCallback, useState } from "react";
 import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import Popup from "../../../components/popup/wrapper/Popup";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { noop } from "lodash-es";
 import Day from "./day";
 import Time from "./time";
diff --git a/packages/next-common/components/calendar/dayEvents/userEventInfoCard/deleteEventModal/index.js b/packages/next-common/components/calendar/dayEvents/userEventInfoCard/deleteEventModal/index.js
index c5bc4815ec..7c18bff4ec 100644
--- a/packages/next-common/components/calendar/dayEvents/userEventInfoCard/deleteEventModal/index.js
+++ b/packages/next-common/components/calendar/dayEvents/userEventInfoCard/deleteEventModal/index.js
@@ -8,7 +8,7 @@ import {
 } from "../../../../../store/reducers/toastSlice";
 import { calendarUserEventsApi } from "../../../../../services/url";
 import ErrorMessage from "../../../../styled/errorMessage";
-import DangerButton from "../../../../buttons/dangerButton";
+import DangerButton from "next-common/lib/button/danger";
 import { noop } from "lodash-es";
 import { PopupButtonWrapper } from "../../../../popup/wrapper";
 import { useEnsureLogin } from "next-common/hooks/useEnsureLogin";
@@ -52,7 +52,7 @@ export default function DeleteEventModal({ event, onClose, refresh = noop }) {
         Are you sure you would like to delete this user event from the calendar?
       </ErrorMessage>
       <PopupButtonWrapper>
-        <DangerButton onClick={deleteEvent} isLoading={isLoading}>
+        <DangerButton onClick={deleteEvent} loading={isLoading}>
           Delete
         </DangerButton>
       </PopupButtonWrapper>
diff --git a/packages/next-common/components/calendar/fullCalendar/createEventButton.js b/packages/next-common/components/calendar/fullCalendar/createEventButton.js
index 6c2d822f67..35a8d5386c 100644
--- a/packages/next-common/components/calendar/fullCalendar/createEventButton.js
+++ b/packages/next-common/components/calendar/fullCalendar/createEventButton.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { noop } from "lodash-es";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import Tooltip from "next-common/components/tooltip";
 import { SystemPlus } from "@osn/icons/subsquare";
 
@@ -8,14 +8,22 @@ export default function CreateEventButton({ disabled, onClick = noop }) {
   return (
     <Tooltip content={disabled ? "Only admins can create events" : ""}>
       <PrimaryButton
-        small
+        size="small"
+        className="w-7 p-0 sm:hidden"
         disabled={disabled}
         onClick={onClick}
-        icon={
-          <SystemPlus className="[&_path]:fill-textPrimaryContrast w-4 h-4" />
-        }
       >
-        <span className="max-sm:hidden">Create Event</span>
+        <SystemPlus className="w-4 h-4" />
+      </PrimaryButton>
+
+      <PrimaryButton
+        size="small"
+        className="max-sm:hidden"
+        disabled={disabled}
+        onClick={onClick}
+        iconLeft={<SystemPlus className="w-4 h-4" />}
+      >
+        Create Event
       </PrimaryButton>
     </Tooltip>
   );
diff --git a/packages/next-common/components/calendar/fullCalendar/toolbar.js b/packages/next-common/components/calendar/fullCalendar/toolbar.js
index dd3f37f07d..0cf673bd34 100644
--- a/packages/next-common/components/calendar/fullCalendar/toolbar.js
+++ b/packages/next-common/components/calendar/fullCalendar/toolbar.js
@@ -1,7 +1,5 @@
-import React from "react";
-import styled from "styled-components";
 import Divider from "../../styled/layout/divider";
-import { Button } from "../../summary/styled";
+import SecondaryButton from "next-common/lib/button/secondary";
 import CaretLeft from "../../icons/caretLeft";
 import CaretRight from "../../icons/caretRight";
 import Flex from "../../styled/flex";
@@ -11,10 +9,6 @@ import { useUser } from "../../../context/user";
 import { OnlyDesktop } from "../../styled/responsive";
 import useIsAdmin from "next-common/hooks/useIsAdmin";
 
-const NavigateButton = styled(Button)`
-  padding: 4px;
-`;
-
 /**
  * @param {import('react-big-calendar').ToolbarProps} props
  */
@@ -38,19 +32,23 @@ export default function FullCalendarToolbar({
       <div className="flex justify-between">
         <Flex>
           <div className="flex space-x-2">
-            <NavigateButton
+            <SecondaryButton
+              size="small"
+              className="w-7 p-0"
               onClick={() => onNavigate("PREV")}
               arial-label={messages.previous}
             >
               <CaretLeft />
-            </NavigateButton>
+            </SecondaryButton>
 
-            <NavigateButton
+            <SecondaryButton
+              size="small"
+              className="w-7 p-0"
               onClick={() => onNavigate("NEXT")}
               arial-label={messages.next}
             >
               <CaretRight />
-            </NavigateButton>
+            </SecondaryButton>
           </div>
 
           <span className="text16Bold ml-4 text-textPrimary">{label}</span>
@@ -58,7 +56,9 @@ export default function FullCalendarToolbar({
 
         <Flex style={{ gap: "8px" }}>
           <OnlyDesktop>
-            <Button onClick={gotoToday}>Today</Button>
+            <SecondaryButton size="small" onClick={gotoToday}>
+              Today
+            </SecondaryButton>
           </OnlyDesktop>
           {user && (
             <CreateEventButton onClick={onCreateEvent} disabled={!isAdmin} />
diff --git a/packages/next-common/components/comment/editor.js b/packages/next-common/components/comment/editor.js
index 51b7d5ad09..828965a36d 100644
--- a/packages/next-common/components/comment/editor.js
+++ b/packages/next-common/components/comment/editor.js
@@ -7,8 +7,8 @@ import Flex from "next-common/components/styled/flex";
 import { prettyHTML, toApiType } from "../../utils/viewfuncs";
 import { useIsMountedBool } from "../../utils/hooks/useIsMounted";
 import IdentityOrAddr from "../IdentityOrAddr";
-import PrimaryButton from "../buttons/primaryButton";
-import GhostButton from "../buttons/ghostButton";
+import PrimaryButton from "next-common/lib/button/primary";
+import SecondaryButton from "next-common/lib/button/secondary";
 import { useChain } from "../../context/chain";
 import { useDetailType } from "../../context/page";
 import { noop } from "lodash-es";
@@ -163,17 +163,17 @@ function CommentEditor(
       {errors?.message && <ErrorText>{errors?.message}</ErrorText>}
       <ButtonWrapper>
         {(isEdit || isReply) && (
-          <GhostButton
+          <SecondaryButton
             onClick={() => {
               setContent("");
               onFinishedEdit(false);
             }}
           >
             Cancel
-          </GhostButton>
+          </SecondaryButton>
         )}
         <PrimaryButton
-          isLoading={loading}
+          loading={loading}
           onClick={isEdit ? updateComment : createComment}
           disabled={isEmpty}
           title={isEmpty ? "cannot submit empty content" : ""}
diff --git a/packages/next-common/components/comment/index.js b/packages/next-common/components/comment/index.js
index 673648bfa3..a85f01e6d8 100644
--- a/packages/next-common/components/comment/index.js
+++ b/packages/next-common/components/comment/index.js
@@ -3,7 +3,7 @@ import NoComment from "./noComment";
 import { TitleContainer } from "../styled/containers/titleContainer";
 import { useUser } from "../../context/user";
 import { cn } from "next-common/utils";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import PolkassemblyCommentItem from "./polkassemblyCommentItem";
 import Loading from "../loading";
 import { useEnsureLogin } from "next-common/hooks/useEnsureLogin";
diff --git a/packages/next-common/components/cookiesConsent/index.js b/packages/next-common/components/cookiesConsent/index.js
index 7712875a2f..4f25165379 100644
--- a/packages/next-common/components/cookiesConsent/index.js
+++ b/packages/next-common/components/cookiesConsent/index.js
@@ -2,9 +2,9 @@ import { useEffect, useState } from "react";
 import { useAcceptCookies } from "../../utils/hooks/useAcceptCookies";
 import { isNil } from "lodash-es";
 import { cn } from "next-common/utils";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { useNavCollapsed } from "next-common/context/nav";
-import GhostButton from "../buttons/ghostButton";
+import SecondaryButton from "next-common/lib/button/secondary";
 
 export default function CookiesConsent() {
   const [show, setShow] = useState(false);
@@ -53,7 +53,7 @@ export default function CookiesConsent() {
         </div>
 
         <div className="flex items-center grow justify-end gap-[8px]">
-          <GhostButton onClick={handleIgnore}>Dismiss</GhostButton>
+          <SecondaryButton onClick={handleIgnore}>Dismiss</SecondaryButton>
           <PrimaryButton onClick={handleAccept}>Accept</PrimaryButton>
         </div>
       </div>
diff --git a/packages/next-common/components/datePicker.js b/packages/next-common/components/datePicker.js
index 3519f95879..7f21a0b2df 100644
--- a/packages/next-common/components/datePicker.js
+++ b/packages/next-common/components/datePicker.js
@@ -7,7 +7,7 @@ import ArrowRight from "../assets/imgs/icons/caret-right-16.svg";
 import Flex from "./styled/flex";
 import FlexBetween from "./styled/flexBetween";
 import Input from "./input";
-import PrimaryButton from "./buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import Popup from "./popup/wrapper/Popup";
 const CaretWrapper = styled.div`
   cursor: pointer;
diff --git a/packages/next-common/components/deletePopup/index.js b/packages/next-common/components/deletePopup/index.js
index 0b18775d91..0044c7e8a4 100644
--- a/packages/next-common/components/deletePopup/index.js
+++ b/packages/next-common/components/deletePopup/index.js
@@ -1,10 +1,10 @@
 import React, { useCallback, useState } from "react";
 import Popup from "../popup/wrapper/Popup";
 import { noop } from "lodash-es";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { PopupButtonWrapper } from "../popup/wrapper";
 import { useDispatch } from "react-redux";
-import GhostButton from "../buttons/ghostButton";
+import SecondaryButton from "next-common/lib/button/secondary";
 import { useEnsureLogin } from "next-common/hooks/useEnsureLogin";
 
 export default function DeletePopup({
@@ -36,10 +36,10 @@ export default function DeletePopup({
         recover it.
       </div>
       <PopupButtonWrapper className="gap-[8px]">
-        <GhostButton onClick={() => setShow(false)}>Cancel</GhostButton>
+        <SecondaryButton onClick={() => setShow(false)}>Cancel</SecondaryButton>
         <PrimaryButton
           className="!bg-red-500"
-          isLoading={isLoading}
+          loading={isLoading}
           onClick={doDelete}
         >
           Delete
diff --git a/packages/next-common/components/democracy/delegatePopup/popupContent.js b/packages/next-common/components/democracy/delegatePopup/popupContent.js
index 6345c07fb3..a204ccdf59 100644
--- a/packages/next-common/components/democracy/delegatePopup/popupContent.js
+++ b/packages/next-common/components/democracy/delegatePopup/popupContent.js
@@ -15,7 +15,7 @@ import { useChainSettings } from "next-common/context/chain";
 import Conviction from "./conviction";
 import VoteValue from "./voteValue";
 import Target from "./target";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { PopupButtonWrapper } from "../../popup/wrapper";
 import {
   useExtensionAccounts,
@@ -135,7 +135,7 @@ export default function PopupContent() {
         setConviction={setConviction}
       />
       <PopupButtonWrapper>
-        <PrimaryButton isLoading={isLoading} onClick={doDelegate}>
+        <PrimaryButton loading={isLoading} onClick={doDelegate}>
           Confirm
         </PrimaryButton>
       </PopupButtonWrapper>
diff --git a/packages/next-common/components/detail/common/PostContent.js b/packages/next-common/components/detail/common/PostContent.js
index b63f87590f..3b089c3261 100644
--- a/packages/next-common/components/detail/common/PostContent.js
+++ b/packages/next-common/components/detail/common/PostContent.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { HtmlPreviewer, MarkdownPreviewer } from "@osn/previewer";
 import { cn } from "next-common/utils";
-import GhostButton from "next-common/components/buttons/ghostButton";
+import SecondaryButton from "next-common/lib/button/secondary";
 import { sanitizeHtml } from "next-common/utils/post/sanitizeHtml";
 import { marked } from "marked";
 
@@ -61,14 +61,14 @@ export default function PostContent({ post = {} }) {
               : "mt-4",
           )}
         >
-          <GhostButton
+          <SecondaryButton
             small
             onClick={() => {
               setPostContentCollapsed(!postContentCollapsed);
             }}
           >
             Show {postContentCollapsed ? "More" : "Less"}
-          </GhostButton>
+          </SecondaryButton>
         </div>
       )}
     </div>
diff --git a/packages/next-common/components/editInput.js b/packages/next-common/components/editInput.js
index d466769dab..e538b9aad4 100644
--- a/packages/next-common/components/editInput.js
+++ b/packages/next-common/components/editInput.js
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import ErrorText from "next-common/components/ErrorText";
-import GhostButton from "./buttons/ghostButton";
-import PrimaryButton from "./buttons/primaryButton";
+import SecondaryButton from "next-common/lib/button/secondary";
+import PrimaryButton from "next-common/lib/button/primary";
 import Editor from "./editor";
 import { useEnsureLogin } from "next-common/hooks/useEnsureLogin";
 
@@ -71,15 +71,11 @@ export default function EditInput({
       {errors?.message && <ErrorText>{errors?.message}</ErrorText>}
       <ButtonWrapper>
         {!loading && (
-          <GhostButton onClick={() => onFinishedEdit(false)}>
+          <SecondaryButton onClick={() => onFinishedEdit(false)}>
             Cancel
-          </GhostButton>
+          </SecondaryButton>
         )}
-        <PrimaryButton
-          isLoading={loading}
-          onClick={onUpdate}
-          disabled={isEmpty}
-        >
+        <PrimaryButton loading={loading} onClick={onUpdate} disabled={isEmpty}>
           Update
         </PrimaryButton>
       </ButtonWrapper>
diff --git a/packages/next-common/components/gov2/delegatePopup/popupContent.js b/packages/next-common/components/gov2/delegatePopup/popupContent.js
index 3aca9a7d9b..473e32c06a 100644
--- a/packages/next-common/components/gov2/delegatePopup/popupContent.js
+++ b/packages/next-common/components/gov2/delegatePopup/popupContent.js
@@ -15,7 +15,7 @@ import { useChainSettings } from "next-common/context/chain";
 import Conviction from "next-common/components/popup/fields/convictionField";
 import VoteValue from "next-common/components/democracy/delegatePopup/voteValue";
 import Target from "next-common/components/democracy/delegatePopup/target";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import MultiTrack from "next-common/components/popup/fields/multiTrackField";
 import { PopupButtonWrapper } from "next-common/components/popup/wrapper";
 import {
@@ -154,7 +154,7 @@ export default function PopupContent() {
       />
       <PopupButtonWrapper>
         <PrimaryButton
-          isLoading={isLoading}
+          loading={isLoading}
           disabled={disabled}
           onClick={doDelegate}
         >
diff --git a/packages/next-common/components/header/drawer.jsx b/packages/next-common/components/header/drawer.jsx
index b90999a44e..c07dcca0c9 100644
--- a/packages/next-common/components/header/drawer.jsx
+++ b/packages/next-common/components/header/drawer.jsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import NetworkSwitch from "next-common/components/header/networkSwitch";
 import NodeSwitch from "next-common/components/header/nodeSwitch";
 import Flex from "next-common/components/styled/flex";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { useUser } from "../../context/user";
 import { useChainSettings } from "../../context/chain";
 import Profile from "../../assets/imgs/icons/profile.svg";
@@ -54,7 +54,7 @@ const UserWrapper = styled(Flex)`
   border: 1px solid var(--neutral400);
   border-radius: 8px;
   padding: 0 12px;
-  height: 38px;
+  height: 40px;
   font-weight: 500;
   margin-bottom: 8px;
   > :first-child {
diff --git a/packages/next-common/components/header/headerAccount.js b/packages/next-common/components/header/headerAccount.js
index 5d816e8380..4557443943 100644
--- a/packages/next-common/components/header/headerAccount.js
+++ b/packages/next-common/components/header/headerAccount.js
@@ -7,9 +7,9 @@ import Relative from "../styled/relative";
 import Flex from "../styled/flex";
 import { useIsLoggedIn, useUser } from "../../context/user";
 import useIsMounted from "../../utils/hooks/useIsMounted";
-import PrimaryButton from "../buttons/primaryButton.js";
+import PrimaryButton from "next-common/lib/button/primary";
 import { useLoginPopup } from "next-common/hooks/useLoginPopup.js";
-import GhostButton from "../buttons/ghostButton.js";
+import SecondaryButton from "next-common/lib/button/secondary";
 import { SystemProfile } from "@osn/icons/subsquare";
 import { useConnectedAccountContext } from "next-common/context/connectedAccount/index.js";
 import { SystemUser, AddressUser } from "../user";
@@ -101,15 +101,15 @@ export default function HeaderAccount() {
   if (user) {
     if (isLoggedIn) {
       connectBtn = (
-        <GhostButton onClick={() => setShow(!show)}>
+        <SecondaryButton onClick={() => setShow(!show)}>
           <SystemUser user={user} noEvent />
-        </GhostButton>
+        </SecondaryButton>
       );
     } else {
       connectBtn = (
-        <GhostButton onClick={() => setShow(!show)}>
+        <SecondaryButton onClick={() => setShow(!show)}>
           <AddressUser add={user?.address} noEvent />
-        </GhostButton>
+        </SecondaryButton>
       );
     }
   }
diff --git a/packages/next-common/components/header/networkSwitch.js b/packages/next-common/components/header/networkSwitch.js
index bc197d24cc..9a8ba397b4 100644
--- a/packages/next-common/components/header/networkSwitch.js
+++ b/packages/next-common/components/header/networkSwitch.js
@@ -19,7 +19,7 @@ const Select = styled.div`
   border-color: var(--neutral400);
   background-color: var(--neutral100);
   border-radius: 8px;
-  height: 38px;
+  height: 40px;
   display: flex;
   align-items: center;
   padding: 0 12px;
diff --git a/packages/next-common/components/header/nodeSwitch.js b/packages/next-common/components/header/nodeSwitch.js
index 5a572afd5e..63f6e5144c 100644
--- a/packages/next-common/components/header/nodeSwitch.js
+++ b/packages/next-common/components/header/nodeSwitch.js
@@ -29,8 +29,8 @@ const SignalDefaultIcon = styled(SignalDefault)`
 const Wrapper = styled.div``;
 
 const SmallSelect = styled.div`
-  width: 38px;
-  height: 38px;
+  width: 40px;
+  height: 40px;
   background-color: var(--neutral100);
   border-width: 1px;
   border-style: solid;
@@ -53,7 +53,7 @@ const Select = styled.div`
   border-color: var(--neutral400);
   color: var(--textPrimary);
   border-radius: 8px;
-  height: 38px;
+  height: 40px;
   display: flex;
   align-items: center;
   padding: 0 12px;
diff --git a/packages/next-common/components/header/searchInput.js b/packages/next-common/components/header/searchInput.js
index 5d6d47675b..3bd0e3f509 100644
--- a/packages/next-common/components/header/searchInput.js
+++ b/packages/next-common/components/header/searchInput.js
@@ -8,7 +8,7 @@ import { SystemSearch } from "@osn/icons/subsquare";
 const Wrapper = styled.div``;
 
 const Input = styled(InputOrigin)`
-  height: 38px;
+  height: 40px;
   background-color: var(--neutral200);
   border-color: var(--neutral200) !important;
 
diff --git a/packages/next-common/components/layout/DiscussionsLayout.jsx b/packages/next-common/components/layout/DiscussionsLayout.jsx
index 5df4b26da9..9e959b3aa9 100644
--- a/packages/next-common/components/layout/DiscussionsLayout.jsx
+++ b/packages/next-common/components/layout/DiscussionsLayout.jsx
@@ -1,6 +1,6 @@
 import { useChainSettings } from "next-common/context/chain";
 import ListLayout from "./ListLayout";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { SystemPlus } from "@osn/icons/subsquare";
 import { useRouter } from "next/router";
 
@@ -28,8 +28,8 @@ export default function DiscussionsLayout(props) {
       summaryFooter={
         <div className="flex justify-end">
           <PrimaryButton
-            small
-            icon={
+            size="small"
+            iconLeft={
               <SystemPlus className="w-4 h-4 [&_path]:fill-textPrimaryContrast" />
             }
             onClick={() => router.push("/posts/create")}
diff --git a/packages/next-common/components/linkPost/postLinkPopup/index.js b/packages/next-common/components/linkPost/postLinkPopup/index.js
index 1d05aa8896..720fb5c9c0 100644
--- a/packages/next-common/components/linkPost/postLinkPopup/index.js
+++ b/packages/next-common/components/linkPost/postLinkPopup/index.js
@@ -9,7 +9,7 @@ import { toApiType } from "../../../utils/viewfuncs";
 import { usePost } from "../../../context/post";
 import { noop } from "lodash-es";
 import { useRouter } from "next/router";
-import PrimaryButton from "../../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import Loading from "../../loading";
 import { Info } from "../styled";
 import { useDetailType } from "../../../context/page";
@@ -188,7 +188,7 @@ export default function PostLinkPopup({ setShow = noop }) {
       </Section>
       <PopupButtonWrapper>
         <PrimaryButton
-          isLoading={isLoading}
+          loading={isLoading}
           disabled={isLoadingList || !selectedDiscussion}
           onClick={bindDiscussion}
         >
diff --git a/packages/next-common/components/linkPost/postUnlinkPopup/index.js b/packages/next-common/components/linkPost/postUnlinkPopup/index.js
index 7e60bb23e7..24e2039cc5 100644
--- a/packages/next-common/components/linkPost/postUnlinkPopup/index.js
+++ b/packages/next-common/components/linkPost/postUnlinkPopup/index.js
@@ -7,7 +7,7 @@ import { toApiType } from "../../../utils/viewfuncs";
 import { usePost } from "../../../context/post";
 import { noop } from "lodash-es";
 import { useRouter } from "next/router";
-import PrimaryButton from "../../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { Info } from "../styled";
 import { useDetailType } from "../../../context/page";
 import { PopupButtonWrapper } from "../../popup/wrapper";
@@ -62,7 +62,7 @@ export default function PostUnlinkPopup({ setShow = noop }) {
         post.
       </Info>
       <PopupButtonWrapper>
-        <PrimaryButton isLoading={isLoading} onClick={unbindDiscussion}>
+        <PrimaryButton loading={isLoading} onClick={unbindDiscussion}>
           Confirm
         </PrimaryButton>
       </PopupButtonWrapper>
diff --git a/packages/next-common/components/linkedAddress.js b/packages/next-common/components/linkedAddress.js
index 52ec426180..8ca51f4d90 100644
--- a/packages/next-common/components/linkedAddress.js
+++ b/packages/next-common/components/linkedAddress.js
@@ -19,7 +19,7 @@ import SelectWallet from "./wallet/selectWallet";
 import { fetchAndUpdateUser, useUser, useUserContext } from "../context/user";
 import { useChain } from "../context/chain";
 import { isPolkadotAddress } from "next-common/utils/viewfuncs";
-import PrimaryButton from "./buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { NeutralPanel } from "./styled/containers/neutralPanel";
 import { useSignMessage } from "next-common/hooks/useSignMessage";
 import { tryConvertToEvmAddress } from "next-common/utils/hydradxUtil";
diff --git a/packages/next-common/components/login/addressLogin.js b/packages/next-common/components/login/addressLogin.js
index 57509cc6d1..32bb96df39 100644
--- a/packages/next-common/components/login/addressLogin.js
+++ b/packages/next-common/components/login/addressLogin.js
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import { useDispatch } from "react-redux";
 import { newErrorToast } from "../../store/reducers/toastSlice";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { useChain } from "../../context/chain";
 import { useLoginPopup } from "next-common/hooks/useLoginPopup";
 import WalletAddressSelect from "./walletAddressSelect";
@@ -71,8 +71,8 @@ export default function AddressLogin({ setView }) {
       <ButtonWrapper>
         {selectedWallet && (
           <PrimaryButton
-            isFill
-            isLoading={isLoading}
+            className="w-full"
+            loading={isLoading}
             onClick={doWeb3Login}
             disabled={!selectedAccount}
           >
diff --git a/packages/next-common/components/login/confirmEmail.js b/packages/next-common/components/login/confirmEmail.js
index 1085ce9bec..036712b866 100644
--- a/packages/next-common/components/login/confirmEmail.js
+++ b/packages/next-common/components/login/confirmEmail.js
@@ -7,7 +7,7 @@ import {
   newErrorToast,
   newSuccessToast,
 } from "next-common/store/reducers/toastSlice";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { useLoginPopup } from "next-common/hooks/useLoginPopup";
 
 export default function ConfirmEmail({ pin, email, identity, setErrors }) {
@@ -49,7 +49,7 @@ export default function ConfirmEmail({ pin, email, identity, setErrors }) {
   };
 
   return (
-    <PrimaryButton isFill isLoading={loading} onClick={submit}>
+    <PrimaryButton className="w-full" loading={loading} onClick={submit}>
       Confirm
     </PrimaryButton>
   );
diff --git a/packages/next-common/components/login/mailLogin.js b/packages/next-common/components/login/mailLogin.js
index dceff6df0f..fccff06396 100644
--- a/packages/next-common/components/login/mailLogin.js
+++ b/packages/next-common/components/login/mailLogin.js
@@ -7,8 +7,8 @@ import ErrorText from "next-common/components/ErrorText";
 import { FormButtonsWrapper, FormInputsWrapper, FormWrapper } from "./styled";
 import Username from "./username";
 import Password from "./password";
-import GhostButton from "next-common/components/buttons/ghostButton";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import SecondaryButton from "next-common/lib/button/secondary";
+import PrimaryButton from "next-common/lib/button/primary";
 import useForm from "next-common/utils/hooks/useForm";
 import {
   fetchAndUpdateUserStatus,
@@ -80,18 +80,18 @@ export default function MailLogin({ setView }) {
         </ForgetPassword>
       </FormInputsWrapper>
       <FormButtonsWrapper>
-        <PrimaryButton isFill isLoading={loading} type="submit">
+        <PrimaryButton className="w-full" loading={loading} type="submit">
           Login
         </PrimaryButton>
-        <GhostButton
-          isFill
+        <SecondaryButton
+          className="w-full"
           onClick={(event) => {
             event.preventDefault();
             setView("web3");
           }}
         >
           Connect with web3 address
-        </GhostButton>
+        </SecondaryButton>
       </FormButtonsWrapper>
 
       <div className="text-center text14Medium text-textSecondary">
diff --git a/packages/next-common/components/myDeposits/undoButton.jsx b/packages/next-common/components/myDeposits/undoButton.jsx
index f37b3c7650..b8eabfacd3 100644
--- a/packages/next-common/components/myDeposits/undoButton.jsx
+++ b/packages/next-common/components/myDeposits/undoButton.jsx
@@ -1,5 +1,5 @@
 import { cn } from "next-common/utils";
-import GhostButton from "../buttons/ghostButton";
+import SecondaryButton from "next-common/lib/button/secondary";
 import { noop } from "lodash-es";
 import { SystemClose } from "@osn/icons/subsquare";
 
@@ -10,7 +10,7 @@ export default function MyDepositUndoButton({
   ...restProps
 }) {
   return (
-    <GhostButton
+    <SecondaryButton
       disabled={disabled}
       className={cn(
         "group",
@@ -27,6 +27,6 @@ export default function MyDepositUndoButton({
           "group-disabled:[&_path]:stroke-textDisabled group-disabled:[&_path]:fill-textDisabled",
         )}
       />
-    </GhostButton>
+    </SecondaryButton>
   );
 }
diff --git a/packages/next-common/components/overview/accountInfo/noLinkAddress.js b/packages/next-common/components/overview/accountInfo/noLinkAddress.js
index b33967f07d..7868489b20 100644
--- a/packages/next-common/components/overview/accountInfo/noLinkAddress.js
+++ b/packages/next-common/components/overview/accountInfo/noLinkAddress.js
@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import { SystemDisconnect } from "@osn/icons/subsquare";
-import GhostButton from "next-common/components/buttons/ghostButton";
+import SecondaryButton from "next-common/lib/button/secondary";
 import { NeutralPanel } from "next-common/components/styled/containers/neutralPanel";
 
 export default function NoLinkAddress() {
@@ -28,7 +28,9 @@ export default function NoLinkAddress() {
           </div>
         </div>
         <div className="flex justify-end items-center grow">
-          <GhostButton onClick={goLinkAddress}>Link Address</GhostButton>
+          <SecondaryButton onClick={goLinkAddress}>
+            Link Address
+          </SecondaryButton>
         </div>
       </div>
     </NeutralPanel>
diff --git a/packages/next-common/components/overview/accountInfo/notLoginPanel.js b/packages/next-common/components/overview/accountInfo/notLoginPanel.js
index d885125b6d..e5833102b9 100644
--- a/packages/next-common/components/overview/accountInfo/notLoginPanel.js
+++ b/packages/next-common/components/overview/accountInfo/notLoginPanel.js
@@ -1,5 +1,5 @@
 import { SystemDisconnect } from "@osn/icons/subsquare";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { useLoginPopup } from "next-common/hooks/useLoginPopup";
 import { NeutralPanel } from "next-common/components/styled/containers/neutralPanel";
 
diff --git a/packages/next-common/components/overview/recentProposals/empty.jsx b/packages/next-common/components/overview/recentProposals/empty.jsx
index 8f8399a8f0..cfef688d25 100644
--- a/packages/next-common/components/overview/recentProposals/empty.jsx
+++ b/packages/next-common/components/overview/recentProposals/empty.jsx
@@ -1,5 +1,5 @@
 import { SystemPlus } from "@osn/icons/subsquare";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import NoData from "next-common/components/noData";
 import { NeutralPanel } from "next-common/components/styled/containers/neutralPanel";
 import { useChainSettings } from "next-common/context/chain";
@@ -32,7 +32,7 @@ export default function EmptyRecentProposals() {
           <div className="mt-4 text-center">
             <PrimaryButton
               onClick={handleNewDiscussion}
-              icon={
+              iconLeft={
                 <SystemPlus className="w-4 h-4 [&_path]:fill-textPrimaryContrast" />
               }
             >
diff --git a/packages/next-common/components/pages/404.js b/packages/next-common/components/pages/404.js
index a87f359eb4..1bfc342205 100644
--- a/packages/next-common/components/pages/404.js
+++ b/packages/next-common/components/pages/404.js
@@ -3,7 +3,7 @@ import styled, { ThemeProvider } from "styled-components";
 import { useRouter } from "next/router";
 import NextHead from "next-common/components/nextHead";
 import { useThemeSetting } from "../../context/theme";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 
 const Wrapper = styled.div`
   height: 100vh;
diff --git a/packages/next-common/components/pages/forget.js b/packages/next-common/components/pages/forget.js
index c7948993be..9c65c0046f 100644
--- a/packages/next-common/components/pages/forget.js
+++ b/packages/next-common/components/pages/forget.js
@@ -13,7 +13,7 @@ import {
   Label,
 } from "next-common/components/login/styled";
 import useForm from "../../utils/hooks/useForm";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { PageTitleContainer } from "../styled/containers/titleContainer";
 import { LoginCard } from "../styled/containers/loginCard";
 
@@ -72,7 +72,7 @@ const Forget = () => {
               {errors?.message && !errors?.data && (
                 <ErrorText>{errors?.message}</ErrorText>
               )}
-              <PrimaryButton isFill type="submit" isLoading={loading}>
+              <PrimaryButton className="w-full" type="submit" loading={loading}>
                 Confirm
               </PrimaryButton>
             </FormWrapper>
@@ -85,7 +85,10 @@ const Forget = () => {
               The reset password link was sent to this email, if it exists in
               our database.
             </InfoWrapper>
-            <PrimaryButton isFill onClick={() => router.replace("/")}>
+            <PrimaryButton
+              className="w-full"
+              onClick={() => router.replace("/")}
+            >
               Confirm
             </PrimaryButton>
           </>
diff --git a/packages/next-common/components/pages/reset.js b/packages/next-common/components/pages/reset.js
index d5cf75e538..4b65ae2992 100644
--- a/packages/next-common/components/pages/reset.js
+++ b/packages/next-common/components/pages/reset.js
@@ -14,7 +14,7 @@ import {
   Redirect,
 } from "next-common/components/login/styled";
 import useForm from "../../utils/hooks/useForm";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { PageTitleContainer } from "../styled/containers/titleContainer";
 import { LoginCard } from "../styled/containers/loginCard";
 
@@ -82,7 +82,7 @@ const Reset = () => {
                   <ErrorText>{errors?.message}</ErrorText>
                 )}
               </FormInputsWrapper>
-              <PrimaryButton isFill type="submit" isLoading={loading}>
+              <PrimaryButton className="w-full" type="submit" loading={loading}>
                 Confirm
               </PrimaryButton>
             </FormWrapper>
@@ -92,7 +92,11 @@ const Reset = () => {
           <>
             <PageTitleContainer>Congrats</PageTitleContainer>
             <InfoWrapper>Your password has been reset.</InfoWrapper>
-            <PrimaryButton isFill secondary onClick={() => router.replace("/")}>
+            <PrimaryButton
+              className="w-full"
+              secondary
+              onClick={() => router.replace("/")}
+            >
               Back to Overview
             </PrimaryButton>
             <Redirect>
diff --git a/packages/next-common/components/pages/verify.js b/packages/next-common/components/pages/verify.js
index a06b1b1c69..b2f88536ea 100644
--- a/packages/next-common/components/pages/verify.js
+++ b/packages/next-common/components/pages/verify.js
@@ -7,7 +7,7 @@ import ErrorText from "next-common/components/ErrorText";
 import NextHead from "next-common/components/nextHead";
 import { InfoWrapper, Redirect } from "next-common/components/login/styled";
 import { PageTitleContainer } from "../styled/containers/titleContainer";
-import GhostButton from "../buttons/ghostButton";
+import SecondaryButton from "next-common/lib/button/secondary";
 import { LoginCard } from "../styled/containers/loginCard";
 import {
   fetchAndUpdateUserStatus,
@@ -78,9 +78,12 @@ export default function Verify() {
           <>
             <PageTitleContainer>Congrats</PageTitleContainer>
             <InfoWrapper>Your email has been verified.</InfoWrapper>
-            <GhostButton isFill onClick={() => router.replace("/")}>
+            <SecondaryButton
+              className="w-full"
+              onClick={() => router.replace("/")}
+            >
               Back to Overview
-            </GhostButton>
+            </SecondaryButton>
             <Redirect>
               The page will be re-directed in
               <span className="sec">{countdown}s</span>
diff --git a/packages/next-common/components/polkassembly/comment/commentButton.js b/packages/next-common/components/polkassembly/comment/commentButton.js
index fabee28428..91ceb0c4bd 100644
--- a/packages/next-common/components/polkassembly/comment/commentButton.js
+++ b/packages/next-common/components/polkassembly/comment/commentButton.js
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { detailPageCategory } from "next-common/utils/consts/business/category";
 import { useChain } from "next-common/context/chain";
 import { getPolkassemblyLink } from "next-common/utils/polkassembly";
diff --git a/packages/next-common/components/poll/voteButton.js b/packages/next-common/components/poll/voteButton.js
index f513384199..b915c97391 100644
--- a/packages/next-common/components/poll/voteButton.js
+++ b/packages/next-common/components/poll/voteButton.js
@@ -1,5 +1,5 @@
 import React from "react";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { PopupButtonWrapper } from "../popup/wrapper";
 
 export default function VoteButton({ onClick, disabled, isSubmitting }) {
@@ -9,7 +9,7 @@ export default function VoteButton({ onClick, disabled, isSubmitting }) {
         <PrimaryButton disabled>Vote</PrimaryButton>
       ) : (
         <PrimaryButton
-          isLoading={isSubmitting}
+          loading={isSubmitting}
           onClick={onClick}
           disabled={disabled}
         >
diff --git a/packages/next-common/components/popup/voteButton.js b/packages/next-common/components/popup/voteButton.js
index be2b0f5559..d06f31c556 100644
--- a/packages/next-common/components/popup/voteButton.js
+++ b/packages/next-common/components/popup/voteButton.js
@@ -1,26 +1,27 @@
 import React from "react";
 import { VoteLoadingEnum } from "../../utils/voteEnum";
 import { ButtonWrapper } from "./styled";
-import { NegativeButton, PositiveButton } from "../buttons/colorButton";
+import SuccessButton from "next-common/lib/button/success";
+import DangerButton from "next-common/lib/button/danger";
 
 export default function VoteButton({ disabled, loadingState, doVote }) {
   return (
     <ButtonWrapper>
-      <NegativeButton
+      <DangerButton
         onClick={() => doVote(false)}
-        isLoading={loadingState === VoteLoadingEnum.Nay}
+        loading={loadingState === VoteLoadingEnum.Nay}
         disabled={disabled || loadingState === VoteLoadingEnum.Aye}
       >
         Nay
-      </NegativeButton>
+      </DangerButton>
 
-      <PositiveButton
+      <SuccessButton
         onClick={() => doVote(true)}
-        isLoading={loadingState === VoteLoadingEnum.Aye}
+        loading={loadingState === VoteLoadingEnum.Aye}
         disabled={disabled || loadingState === VoteLoadingEnum.Nay}
       >
         Aye
-      </PositiveButton>
+      </SuccessButton>
     </ButtonWrapper>
   );
 }
diff --git a/packages/next-common/components/post/postCreate.js b/packages/next-common/components/post/postCreate.js
index 2de38ed116..ab52e8f915 100644
--- a/packages/next-common/components/post/postCreate.js
+++ b/packages/next-common/components/post/postCreate.js
@@ -10,7 +10,7 @@ import { Label, LabelWrapper } from "./styled";
 import { newErrorToast } from "next-common/store/reducers/toastSlice";
 import ErrorText from "next-common/components/ErrorText";
 import AdvancedForm from "next-common/components/post/advanced/form";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { TitleContainer } from "../styled/containers/titleContainer";
 import { useChain } from "../../context/chain";
 import { useUser } from "../../context/user";
@@ -196,7 +196,7 @@ export default function PostCreate() {
 
       <ButtonWrapper>
         <PrimaryButton
-          isLoading={creating}
+          loading={creating}
           onClick={createPost}
           disabled={isDisableCreate}
         >
diff --git a/packages/next-common/components/preImages/preImageDetailPopup/index.js b/packages/next-common/components/preImages/preImageDetailPopup/index.js
index 0a471b0d5b..199ea6311b 100644
--- a/packages/next-common/components/preImages/preImageDetailPopup/index.js
+++ b/packages/next-common/components/preImages/preImageDetailPopup/index.js
@@ -1,5 +1,5 @@
 import BaseVotesPopup from "next-common/components/popup/baseVotesPopup";
-import GhostButton from "next-common/components/buttons/ghostButton";
+import SecondaryButton from "next-common/lib/button/secondary";
 import CallTreeView from "next-common/components/callTreeView";
 
 export default function PreimageDetailPopup({ proposal, setShow }) {
@@ -7,7 +7,7 @@ export default function PreimageDetailPopup({ proposal, setShow }) {
     <BaseVotesPopup title="Arguments" onClose={() => setShow(false)}>
       <CallTreeView proposal={proposal} />
       <div className="flex justify-end">
-        <GhostButton onClick={() => setShow(false)}>Close</GhostButton>
+        <SecondaryButton onClick={() => setShow(false)}>Close</SecondaryButton>
       </div>
     </BaseVotesPopup>
   );
diff --git a/packages/next-common/components/publicProposal/second/index.js b/packages/next-common/components/publicProposal/second/index.js
index 933a9eff41..15a9fae9b0 100644
--- a/packages/next-common/components/publicProposal/second/index.js
+++ b/packages/next-common/components/publicProposal/second/index.js
@@ -6,7 +6,7 @@ import BigNumber from "bignumber.js";
 import Loading from "../../loading";
 import useDepositOf from "../../../utils/hooks/useDepositOf";
 import Tooltip from "../../tooltip";
-import PrimaryButton from "../../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { TitleContainer } from "../../styled/containers/titleContainer";
 import SubLink from "../../styled/subLink";
 import { useChainSettings } from "../../../context/chain";
@@ -171,7 +171,7 @@ export default function Second({
     action = <Description>This proposal has been canceled.</Description>;
   } else {
     action = (
-      <PrimaryButton isFill onClick={() => setShowPopup(true)}>
+      <PrimaryButton className="w-full" onClick={() => setShowPopup(true)}>
         Second
       </PrimaryButton>
     );
diff --git a/packages/next-common/components/publicProposal/second/popup/submitButton.js b/packages/next-common/components/publicProposal/second/popup/submitButton.js
index 8e8f2e7eba..d9cf3c5da5 100644
--- a/packages/next-common/components/publicProposal/second/popup/submitButton.js
+++ b/packages/next-common/components/publicProposal/second/popup/submitButton.js
@@ -1,5 +1,5 @@
 import React from "react";
-import PrimaryButton from "../../../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { PopupButtonWrapper } from "../../../popup/wrapper";
 
 export default function SubmitButton({
@@ -13,7 +13,7 @@ export default function SubmitButton({
       {balanceInsufficient || disabled ? (
         <PrimaryButton disabled>Submit</PrimaryButton>
       ) : (
-        <PrimaryButton isLoading={isSubmitting} onClick={onClick}>
+        <PrimaryButton loading={isSubmitting} onClick={onClick}>
           Submit
         </PrimaryButton>
       )}
diff --git a/packages/next-common/components/reportPopup/index.js b/packages/next-common/components/reportPopup/index.js
index 208e102922..4a7281f1f5 100644
--- a/packages/next-common/components/reportPopup/index.js
+++ b/packages/next-common/components/reportPopup/index.js
@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import Popup from "../popup/wrapper/Popup";
 import { noop } from "lodash-es";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { PopupButtonWrapper } from "../popup/wrapper";
 import RadioOptionGroup from "next-common/components/radioOptionGroup";
 import nextApi from "next-common/services/nextApi";
@@ -94,7 +94,7 @@ export default function ReportPopup({ setShow = noop }) {
         />
       </div>
       <PopupButtonWrapper>
-        <PrimaryButton isLoading={isLoading} onClick={doReport}>
+        <PrimaryButton loading={isLoading} onClick={doReport}>
           Submit
         </PrimaryButton>
       </PopupButtonWrapper>
diff --git a/packages/next-common/components/selectWallet/content.js b/packages/next-common/components/selectWallet/content.js
index 1371ac6f21..bb0c7a5968 100644
--- a/packages/next-common/components/selectWallet/content.js
+++ b/packages/next-common/components/selectWallet/content.js
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { useDispatch } from "react-redux";
 import { PageTitleContainer } from "../styled/containers/titleContainer";
 import { newErrorToast } from "../../store/reducers/toastSlice";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import WalletAddressSelect from "../login/walletAddressSelect";
 import { useConnectedAccountContext } from "next-common/context/connectedAccount";
 
@@ -59,8 +59,8 @@ export default function SelectWalletContent() {
         <ButtonWrapper>
           {selectedWallet && (
             <PrimaryButton
-              isFill
-              isLoading={isLoading}
+              className="w-full"
+              loading={isLoading}
               onClick={doConnectAddress}
               disabled={!selectedAccount}
             >
diff --git a/packages/next-common/components/setting/deleteChannel.js b/packages/next-common/components/setting/deleteChannel.js
index 4721032f69..7f0d5e0ddb 100644
--- a/packages/next-common/components/setting/deleteChannel.js
+++ b/packages/next-common/components/setting/deleteChannel.js
@@ -4,8 +4,8 @@ import nextApi from "next-common/services/nextApi";
 import { newErrorToast } from "next-common/store/reducers/toastSlice";
 import { useDispatch } from "react-redux";
 import Popup from "../popup/wrapper/Popup";
-import GhostButton from "../buttons/ghostButton";
-import PrimaryButton from "../buttons/primaryButton";
+import SecondaryButton from "next-common/lib/button/secondary";
+import PrimaryButton from "next-common/lib/button/primary";
 import { fetchAndUpdateUser, useUserContext } from "next-common/context/user";
 import Tooltip from "../tooltip";
 
@@ -40,9 +40,9 @@ function DeletePopup({ onClose }) {
         </span>
       </div>
       <div className="flex gap-[8px] justify-end">
-        <GhostButton onClick={onClose}>Cancel</GhostButton>
+        <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
         <PrimaryButton
-          isLoading={isLoading}
+          loading={isLoading}
           className="!bg-red500"
           onClick={doDelete}
         >
diff --git a/packages/next-common/components/setting/email.js b/packages/next-common/components/setting/email.js
index aeec67280d..597aecb240 100644
--- a/packages/next-common/components/setting/email.js
+++ b/packages/next-common/components/setting/email.js
@@ -7,7 +7,7 @@ import { newSuccessToast } from "../../store/reducers/toastSlice";
 import { EmailVerify, InputWrapper } from "./styled";
 import CircleCheck from "../../assets/imgs/icons/circle-check.svg";
 import CircleWarning from "../../assets/imgs/icons/circle-warning.svg";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import EmailJunkWarning from "./emailJunkWarning";
 
 export default function Email({ email, verified }) {
@@ -48,7 +48,7 @@ export default function Email({ email, verified }) {
           }
         />
         {!verified && (
-          <PrimaryButton onClick={onResend} isLoading={resendLoading}>
+          <PrimaryButton onClick={onResend} loading={resendLoading}>
             Resend
           </PrimaryButton>
         )}
diff --git a/packages/next-common/components/setting/logout.js b/packages/next-common/components/setting/logout.js
index df596dc005..17fd5f0d59 100644
--- a/packages/next-common/components/setting/logout.js
+++ b/packages/next-common/components/setting/logout.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { useRouter } from "next/router";
 import { ButtonWrapper } from "./styled";
-import GhostButton from "../buttons/ghostButton";
+import SecondaryButton from "next-common/lib/button/secondary";
 import { useConnectedAccountContext } from "next-common/context/connectedAccount";
 import { useIsWeb3User, useIsLoggedIn } from "next-common/context/user";
 
@@ -13,7 +13,7 @@ export default function Logout() {
 
   return (
     <ButtonWrapper>
-      <GhostButton
+      <SecondaryButton
         className="!border-theme500 !text-theme500"
         onClick={async () => {
           await disconnectAccount();
@@ -21,7 +21,7 @@ export default function Logout() {
         }}
       >
         {isWeb3User || !isLoggedIn ? "Disconnect wallet" : "Logout my account"}
-      </GhostButton>
+      </SecondaryButton>
     </ButtonWrapper>
   );
 }
diff --git a/packages/next-common/components/setting/notificationEmail.js b/packages/next-common/components/setting/notificationEmail.js
index 40b6c6d56f..c37b185965 100644
--- a/packages/next-common/components/setting/notificationEmail.js
+++ b/packages/next-common/components/setting/notificationEmail.js
@@ -14,12 +14,12 @@ import {
   useUser,
   useUserContext,
 } from "../../context/user";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import EmailJunkWarning from "./emailJunkWarning";
 import { LinkEmail } from "@osn/icons/subsquare";
 import Switch from "./switch";
 import { isKeyRegisteredUser } from "next-common/utils";
-import GhostButton from "../buttons/ghostButton";
+import SecondaryButton from "next-common/lib/button/secondary";
 
 const IconWrapper = styled.div`
   display: flex;
@@ -148,7 +148,7 @@ export default function NotificationEmail({ isOn, setIsOn }) {
       <div className="flex items-center max-sm:hidden">
         <PrimaryButton
           onClick={onVerify}
-          isLoading={resendLoading}
+          loading={resendLoading}
           style={{ width: 72, height: 40 }}
         >
           Verify
@@ -162,13 +162,13 @@ export default function NotificationEmail({ isOn, setIsOn }) {
   ) : (
     inputEmail &&
     (!verified || inputEmail !== email) && (
-      <GhostButton
+      <SecondaryButton
         onClick={onVerify}
-        isLoading={resendLoading}
+        loading={resendLoading}
         style={{ width: 72, height: 40 }}
       >
         Verify
-      </GhostButton>
+      </SecondaryButton>
     )
   );
 
diff --git a/packages/next-common/components/setting/password.js b/packages/next-common/components/setting/password.js
index f45385d0b5..b99a576a2b 100644
--- a/packages/next-common/components/setting/password.js
+++ b/packages/next-common/components/setting/password.js
@@ -5,7 +5,7 @@ import ErrorText from "../ErrorText";
 import nextApi from "../../services/nextApi";
 import { newSuccessToast } from "../../store/reducers/toastSlice";
 import { InputWrapper } from "./styled";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import useForm from "../../utils/hooks/useForm";
 import styled from "styled-components";
 
@@ -73,7 +73,7 @@ export default function Password() {
       <PrimaryButton
         style={{ width: 72, height: 40 }}
         type="submit"
-        isLoading={changeLoading}
+        loading={changeLoading}
       >
         Change
       </PrimaryButton>
diff --git a/packages/next-common/components/setting/proxyAddress.js b/packages/next-common/components/setting/proxyAddress.js
index 3f911baf7d..fcfdbf5433 100644
--- a/packages/next-common/components/setting/proxyAddress.js
+++ b/packages/next-common/components/setting/proxyAddress.js
@@ -15,7 +15,7 @@ import {
 import ErrorMessage from "../styled/errorMessage";
 import { checkProxy } from "../../utils/proxy";
 import styled from "styled-components";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { useEnsureLogin } from "next-common/hooks/useEnsureLogin";
 import { normalizeAddress } from "next-common/utils/address";
 import { tryConvertToEvmAddress } from "next-common/utils/hydradxUtil";
@@ -171,7 +171,7 @@ export default function ProxyAddress() {
         style={{ width: 55, height: 40 }}
         onClick={isSet ? onUnset : onSet}
         disabled={disabled}
-        isLoading={isLoading}
+        loading={isLoading}
       >
         {isSet ? "Unset" : "Set"}
       </PrimaryButton>
diff --git a/packages/next-common/components/setting/requireSignature.js b/packages/next-common/components/setting/requireSignature.js
index 71bfa64879..80887f07d3 100644
--- a/packages/next-common/components/setting/requireSignature.js
+++ b/packages/next-common/components/setting/requireSignature.js
@@ -1,5 +1,5 @@
 import { useEnsureLogin } from "next-common/hooks/useEnsureLogin";
-import PrimaryButton from "../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { ContentWrapper, InfoMessage } from "./styled";
 
 export default function RequireSignature({ name }) {
diff --git a/packages/next-common/components/signerPopup/index.js b/packages/next-common/components/signerPopup/index.js
index f4834ba902..c47cd4e7e5 100644
--- a/packages/next-common/components/signerPopup/index.js
+++ b/packages/next-common/components/signerPopup/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PopupWithSigner from "next-common/components/popupWithSigner";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { emptyFunction } from "../../utils";
 import { PopupButtonWrapper } from "../popup/wrapper";
 import { useSignerAccount, usePopupParams } from "../popupWithSigner/context";
@@ -24,7 +24,7 @@ function PopupContent({ children }) {
       <PopupButtonWrapper>
         <PrimaryButton
           disabled={disabled}
-          isLoading={isLoading}
+          loading={isLoading}
           onClick={() => actionCallback(api, signerAccount)}
         >
           {confirmText}
diff --git a/packages/next-common/components/summary/newProposalButton/newButton.js b/packages/next-common/components/summary/newProposalButton/newButton.js
index e60bb0f364..243f08d404 100644
--- a/packages/next-common/components/summary/newProposalButton/newButton.js
+++ b/packages/next-common/components/summary/newProposalButton/newButton.js
@@ -1,23 +1,14 @@
-import { Button } from "next-common/components/summary/styled";
-import AddSVG from "next-common/assets/imgs/icons/add.svg";
-import styled from "styled-components";
-
-const AddButton = styled(Button)`
-  display: flex;
-  height: 30px;
-  background-color: var(--theme500);
-  color: var(--textPrimaryContrast);
-  border: none;
-  > svg path {
-    stroke: var(--textPrimaryContrast);
-  }
-`;
+import PrimaryButton from "next-common/lib/button/primary";
+import { SystemPlus } from "@osn/icons/subsquare";
 
 export default function NewButton({ setShowPopup }) {
   return (
-    <AddButton onClick={() => setShowPopup(true)}>
-      <AddSVG />
+    <PrimaryButton
+      size="small"
+      iconLeft={<SystemPlus className="w-4 h-4" />}
+      onClick={() => setShowPopup(true)}
+    >
       New Proposal
-    </AddButton>
+    </PrimaryButton>
   );
 }
diff --git a/packages/next-common/components/treasury/proposal/popup/index.js b/packages/next-common/components/treasury/proposal/popup/index.js
index f382a925f8..0881a3fa85 100644
--- a/packages/next-common/components/treasury/proposal/popup/index.js
+++ b/packages/next-common/components/treasury/proposal/popup/index.js
@@ -14,7 +14,7 @@ import useAddressBalance from "../../../../utils/hooks/useAddressBalance";
 import { WarningMessage } from "../../../popup/styled";
 import useBond from "../../../../utils/hooks/useBond";
 import { sendTx, wrapWithProxy } from "../../../../utils/sendTx";
-import PrimaryButton from "../../../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { useChainSettings } from "../../../../context/chain";
 import { PopupButtonWrapper } from "../../../popup/wrapper";
 import {
@@ -128,7 +128,7 @@ function PopupContent() {
         <WarningMessage danger>Insufficient balance</WarningMessage>
       )}
       <PopupButtonWrapper>
-        <PrimaryButton disabled={disabled} isLoading={loading} onClick={submit}>
+        <PrimaryButton disabled={disabled} loading={loading} onClick={submit}>
           Submit
         </PrimaryButton>
       </PopupButtonWrapper>
diff --git a/packages/next-common/components/treasury/tip/popup/index.js b/packages/next-common/components/treasury/tip/popup/index.js
index 57550380e1..04ca67574b 100644
--- a/packages/next-common/components/treasury/tip/popup/index.js
+++ b/packages/next-common/components/treasury/tip/popup/index.js
@@ -10,7 +10,7 @@ import TipReason from "./tipReason";
 import Tab, { NewTip, ReportAwesome } from "./tab";
 import TipValue from "./tipValue";
 import { sendTx, wrapWithProxy } from "../../../../utils/sendTx";
-import PrimaryButton from "../../../buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { useChainSettings } from "../../../../context/chain";
 import { PopupButtonWrapper } from "../../../popup/wrapper";
 import {
@@ -42,7 +42,7 @@ function TipCommon({ setBeneficiary, setReason }) {
 function SubmitButton({ disabled, loading, onSubmit }) {
   return (
     <PopupButtonWrapper>
-      <PrimaryButton disabled={disabled} isLoading={loading} onClick={onSubmit}>
+      <PrimaryButton disabled={disabled} loading={loading} onClick={onSubmit}>
         Submit
       </PrimaryButton>
     </PopupButtonWrapper>
diff --git a/packages/next-common/components/vote/voteSuccessfulWrapper.js b/packages/next-common/components/vote/voteSuccessfulWrapper.js
index 8f8becce96..55a4af3218 100644
--- a/packages/next-common/components/vote/voteSuccessfulWrapper.js
+++ b/packages/next-common/components/vote/voteSuccessfulWrapper.js
@@ -1,6 +1,6 @@
 import tw from "tailwind-styled-components";
 import { SystemCopied } from "@osn/icons/subsquare";
-import GhostButton from "next-common/components/buttons/ghostButton";
+import SecondaryButton from "next-common/lib/button/secondary";
 
 export function VoteSuccessfulWrapper({ children, onClose }) {
   return (
@@ -11,7 +11,7 @@ export function VoteSuccessfulWrapper({ children, onClose }) {
       </div>
       {children}
       <div className="flex justify-end mt-[24px]">
-        <GhostButton onClick={onClose}>Close</GhostButton>
+        <SecondaryButton onClick={onClose}>Close</SecondaryButton>
       </div>
     </div>
   );
diff --git a/packages/next/components/childBounty/claim/Action/claim.js b/packages/next/components/childBounty/claim/Action/claim.js
index 73e9e0387b..b26e5c9d6f 100644
--- a/packages/next/components/childBounty/claim/Action/claim.js
+++ b/packages/next/components/childBounty/claim/Action/claim.js
@@ -1,6 +1,6 @@
 import { useOnchainData } from "next-common/context/post";
 import { useState } from "react";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import dynamic from "next/dynamic";
 import { useSelector } from "react-redux";
 import ClaimedInfo from "./ClaimedInfo";
@@ -26,7 +26,7 @@ export default function Claim() {
   return (
     <>
       <PrimaryButton
-        isFill
+        className="w-full"
         disabled={chainHeight < unlockAt}
         onClick={() => setShowPopup(true)}
       >
diff --git a/packages/next/components/fellowship/referendum/sidebar/index.js b/packages/next/components/fellowship/referendum/sidebar/index.js
index 28c887c711..406cf20432 100644
--- a/packages/next/components/fellowship/referendum/sidebar/index.js
+++ b/packages/next/components/fellowship/referendum/sidebar/index.js
@@ -6,7 +6,7 @@ import { usePost } from "next-common/context/post";
 import { gov2VotingState } from "next-common/utils/consts/state";
 import { InlineWrapper } from "next-common/components/detail/sidebar/styled";
 import Popup from "../votePopup";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { useChainSettings } from "next-common/context/chain";
 import HowOpenGovWorks from "next-common/components/howOpenGovWorks";
 import { VoteSuccessfulProvider } from "next-common/components/vote";
diff --git a/packages/next/components/gov2/sidebar/index.js b/packages/next/components/gov2/sidebar/index.js
index 871407f436..f49b3e1fd3 100644
--- a/packages/next/components/gov2/sidebar/index.js
+++ b/packages/next/components/gov2/sidebar/index.js
@@ -5,7 +5,7 @@ import Gov2Status from "./status";
 import Gov2Tally from "./tally";
 import { RightBarWrapper } from "next-common/components/layout/sidebar/rightBarWrapper";
 import { usePost } from "next-common/context/post";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { InlineWrapper } from "next-common/components/detail/sidebar/styled";
 import { useChainSettings } from "next-common/context/chain";
 import isMoonChain from "next-common/utils/isMoonChain";
diff --git a/packages/next/components/gov2/votePopup/popupContent.js b/packages/next/components/gov2/votePopup/popupContent.js
index 22b4fda458..2f011df98a 100644
--- a/packages/next/components/gov2/votePopup/popupContent.js
+++ b/packages/next/components/gov2/votePopup/popupContent.js
@@ -16,7 +16,7 @@ import { WarningMessage } from "next-common/components/popup/styled";
 import SplitAbstainVoteStatus from "./splitAbstainVoteStatus";
 import VStack from "next-common/components/styled/vStack";
 import VoteTypeTab, { Aye, Nay, Split, SplitAbstain } from "./tab";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { newErrorToast } from "next-common/store/reducers/toastSlice";
 import useSubMyReferendaVote, {
   getReferendaDirectVote,
@@ -160,7 +160,7 @@ function VotePanel({
       {!addressVote?.delegating && (
         // Address is not allow to vote directly when it is in delegate mode
         <div style={{ textAlign: "right" }}>
-          <PrimaryButton isLoading={isLoading} onClick={doVote}>
+          <PrimaryButton loading={isLoading} onClick={doVote}>
             Confirm
           </PrimaryButton>
         </div>
diff --git a/packages/next/components/motion/vote/action/close.js b/packages/next/components/motion/vote/action/close.js
index 0c44a7d005..58f18bb3ac 100644
--- a/packages/next/components/motion/vote/action/close.js
+++ b/packages/next/components/motion/vote/action/close.js
@@ -1,7 +1,7 @@
 import { useSelector } from "react-redux";
 import { usePost, usePostOnChainData } from "next-common/context/post";
 import { useEffect, useState } from "react";
-import GhostButton from "next-common/components/buttons/ghostButton";
+import SecondaryButton from "next-common/lib/button/secondary";
 import toApiCouncil from "next-common/utils/toApiCouncil";
 import { useChain } from "next-common/context/chain";
 import { useDetailType } from "next-common/context/page";
@@ -49,13 +49,13 @@ export default function Close() {
 
   return (
     <>
-      <GhostButton
-        isFill
+      <SecondaryButton
+        className="w-full"
         disabled={!proposal || !canClose}
         onClick={() => setShowClosePopup(true)}
       >
         Close
-      </GhostButton>
+      </SecondaryButton>
       {showClosePopup && (
         <CloseMotionPopup
           chain={chain}
diff --git a/packages/next/components/motion/vote/action/index.js b/packages/next/components/motion/vote/action/index.js
index 6801d7e063..907f731d3a 100644
--- a/packages/next/components/motion/vote/action/index.js
+++ b/packages/next/components/motion/vote/action/index.js
@@ -5,7 +5,7 @@ import useIsCollectiveMember from "next-common/utils/hooks/collectives/useIsColl
 import toApiCouncil from "next-common/utils/toApiCouncil";
 import { useChain } from "next-common/context/chain";
 import { useDetailType } from "next-common/context/page";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import Close from "./close";
 
 const Description = styled.div`
@@ -34,7 +34,7 @@ export default function Action({ setShowPopup }) {
   let action;
   if (userCanVote) {
     action = (
-      <PrimaryButton secondary isFill onClick={() => setShowPopup(true)}>
+      <PrimaryButton className="w-full" onClick={() => setShowPopup(true)}>
         Vote
       </PrimaryButton>
     );
diff --git a/packages/next/components/referenda/popup/popupContent.js b/packages/next/components/referenda/popup/popupContent.js
index 5a46c721f0..d90726b7a6 100644
--- a/packages/next/components/referenda/popup/popupContent.js
+++ b/packages/next/components/referenda/popup/popupContent.js
@@ -13,7 +13,7 @@ import Signer from "next-common/components/popup/fields/signerField";
 
 import { useChainSettings } from "next-common/context/chain";
 import { Aye, Nay, Split } from "./ayeNaySplitTab";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import useSubMyDemocracyVote, {
   getDemocracyDirectVote,
 } from "next-common/hooks/democracy/useSubMyVote";
@@ -163,7 +163,7 @@ function VotePanel({
       {!addressVote?.delegating && (
         // Address is not allow to vote directly when it is in delegate mode
         <div style={{ textAlign: "right" }}>
-          <PrimaryButton isLoading={isLoading} onClick={doVote}>
+          <PrimaryButton loading={isLoading} onClick={doVote}>
             Confirm
           </PrimaryButton>
         </div>
diff --git a/packages/next/components/referenda/vote.js b/packages/next/components/referenda/vote.js
index a1a3f5fd0a..980cd57420 100644
--- a/packages/next/components/referenda/vote.js
+++ b/packages/next/components/referenda/vote.js
@@ -13,7 +13,7 @@ import SubLink from "next-common/components/styled/subLink";
 import VoteBar from "next-common/components/referenda/voteBar";
 import TallyInfo from "next-common/components/referenda/tally/info";
 import MyVote from "./myVote";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import NestedVotesPopup from "next-common/components/democracy/nestedVotesPopup";
 import useIsDemocracyPassing from "next-common/context/post/democracy/referendum/passing";
 import useIsDemocracyVoteFinished from "next-common/context/post/democracy/referendum/isVoteFinished";
diff --git a/packages/next/components/tipper/index.js b/packages/next/components/tipper/index.js
index 9092e315e7..4d61b1205a 100644
--- a/packages/next/components/tipper/index.js
+++ b/packages/next/components/tipper/index.js
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { useState } from "react";
 import dynamic from "next/dynamic";
 import { isSameAddress } from "next-common/utils";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import TipperList from "./tipperList";
 import useIsCouncilMember from "next-common/utils/hooks/useIsCouncilMember";
 import { useDispatch, useSelector } from "react-redux";
@@ -53,7 +53,10 @@ export default function Tipper() {
   let closeTipAction = null;
   if (tipCanClose) {
     closeTipAction = (
-      <PrimaryButton isFill onClick={() => setShowCloseTipPopup(true)}>
+      <PrimaryButton
+        className="w-full"
+        onClick={() => setShowCloseTipPopup(true)}
+      >
         Close tip
       </PrimaryButton>
     );
@@ -78,7 +81,10 @@ export default function Tipper() {
     action = (
       <>
         {closeTipAction}
-        <PrimaryButton isFill onClick={() => setShowEndorsePopup(true)}>
+        <PrimaryButton
+          className="w-full"
+          onClick={() => setShowEndorsePopup(true)}
+        >
           Endorse
         </PrimaryButton>
         <Description>{retractTipAction}</Description>
diff --git a/packages/next/pages/signup.js b/packages/next/pages/signup.js
index b89d74535b..8e7112a35e 100644
--- a/packages/next/pages/signup.js
+++ b/packages/next/pages/signup.js
@@ -11,8 +11,8 @@ import { useDispatch } from "react-redux";
 import { newErrorToast } from "next-common/store/reducers/toastSlice";
 import NextHead from "next-common/components/nextHead";
 import UserPolicy from "next-common/components/userPolicy";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
-import GhostButton from "next-common/components/buttons/ghostButton";
+import PrimaryButton from "next-common/lib/button/primary";
+import SecondaryButton from "next-common/lib/button/secondary";
 import useForm from "next-common/utils/hooks/useForm";
 import { LoginCard } from "next-common/components/styled/containers/loginCard";
 import { useSetUser, useUser } from "next-common/context/user";
@@ -205,7 +205,11 @@ export default function Signup() {
                 setAgreeError={setAgreeError}
               />
               <ButtonWrapper>
-                <PrimaryButton isFill type="submit" isLoading={loading}>
+                <PrimaryButton
+                  className="w-full"
+                  type="submit"
+                  loading={loading}
+                >
                   Sign up
                 </PrimaryButton>
               </ButtonWrapper>
@@ -228,15 +232,15 @@ export default function Signup() {
             </InfoWrapper>
             <div className="space-y-2">
               <PrimaryButton
-                isFill
+                className="w-full"
                 secondary
                 onClick={() => router.replace("/")}
               >
                 Got it
               </PrimaryButton>
-              <GhostButton isFill onClick={sendVerifyEmail}>
+              <SecondaryButton className="w-full" onClick={sendVerifyEmail}>
                 Resend
-              </GhostButton>
+              </SecondaryButton>
               {emailSent && (
                 <Redirect>
                   The page will be re-directed in
diff --git a/packages/next/pages/treasury/tips/index.js b/packages/next/pages/treasury/tips/index.js
index 8e3cc1dbaf..6bfff653e2 100644
--- a/packages/next/pages/treasury/tips/index.js
+++ b/packages/next/pages/treasury/tips/index.js
@@ -6,7 +6,7 @@ import { useChain, useChainSettings } from "next-common/context/chain";
 import normalizeTipListItem from "next-common/utils/viewfuncs/treasury/normalizeTipListItem";
 import { lowerCase } from "lodash-es";
 import ListLayout from "next-common/components/layout/ListLayout";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { SystemPlus } from "@osn/icons/subsquare";
 import TreasurySummary from "next-common/components/summary/treasurySummary";
 import useHasTips from "next-common/hooks/treasury/useHasTips";
@@ -45,8 +45,8 @@ export default function TipsPage({ tips: ssrTips }) {
         hasTips && (
           <div className="flex justify-end">
             <PrimaryButton
-              small
-              icon={
+              size="small"
+              iconLeft={
                 <SystemPlus className="w-4 h-4 [&_path]:fill-textPrimaryContrast" />
               }
               onClick={() => setShowPopup(true)}