diff --git a/src/components/BugBountyCards.tsx b/src/components/BugBountyCards.tsx
index fb017ea3611..56786711e3e 100644
--- a/src/components/BugBountyCards.tsx
+++ b/src/components/BugBountyCards.tsx
@@ -14,7 +14,10 @@ const CardRow = ({ children }: ChildOnlyProp) => (
   <Flex className="mx-4 my-16 flex-wrap justify-between">{children}</Flex>
 )
 
-const SubmitBugBountyButton = ({ children, ...props }: ButtonLinkProps) => (
+const SubmitBugBountyButton = ({
+  children,
+  ...props
+}: Omit<ButtonLinkProps, "href">) => (
   <ButtonLink
     className="m-4"
     href="https://forms.gle/Gnh4gzGh66Yc3V7G8"
diff --git a/src/components/Buttons/ButtonTwoLines/index.tsx b/src/components/Buttons/ButtonTwoLines/index.tsx
deleted file mode 100644
index 03210dbe166..00000000000
--- a/src/components/Buttons/ButtonTwoLines/index.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import type { IconType } from "react-icons/lib"
-import { Icon, Stack, Text } from "@chakra-ui/react"
-
-import Button, { type ButtonProps } from "../Button"
-import ButtonLink, { type ButtonLinkProps } from "../ButtonLink"
-
-type CommonProps = {
-  icon: IconType | typeof Icon
-  iconAlignment?: "left" | "right" | "start" | "end"
-  /**
-   * Reduced choices of the button variant.
-   *
-   * This component only accepts the `solid` or `outline` variant
-   */
-  variant?: "solid" | "outline"
-  /**
-   * Reduced choices of the button size
-   *
-   * This component only accepts the `md` or `sm` sizes
-   */
-  size?: "md" | "sm"
-  mainText: string
-  helperText: string
-  /**
-   * Should the main text be below the helper text instead of ab?
-   */
-  reverseTextOrder?: boolean
-}
-
-type OmittedTypes = "variant" | "size"
-
-type ButtonTypeProps = CommonProps &
-  Omit<ButtonProps, OmittedTypes> & {
-    href?: never
-  }
-
-type ButtonLinkTypeProps = CommonProps &
-  Omit<ButtonLinkProps, OmittedTypes> & {
-    toId?: never
-  }
-
-type ButtonTwoLinesProps = ButtonTypeProps | ButtonLinkTypeProps
-
-const hasHref = (props: ButtonTwoLinesProps): props is ButtonLinkTypeProps => {
-  return "href" in props
-}
-
-const ButtonTwoLines = (props: ButtonTwoLinesProps) => {
-  const {
-    icon: Icon,
-    iconAlignment = "start",
-    mainText,
-    helperText,
-    reverseTextOrder = false,
-    size = "md",
-    ...rest
-  } = props
-
-  const isIconLeft = ["left", "start"].includes(iconAlignment)
-
-  const vertPadding: ButtonTwoLinesProps["py"] = size === "md" ? "4" : "2"
-
-  const buttonStyles: ButtonProps = {
-    [isIconLeft ? "leftIcon" : "rightIcon"]: <Icon />,
-    textAlign: isIconLeft ? "start" : "end",
-    justifyContent: isIconLeft ? "flex-start" : "flex-end",
-  }
-
-  const Component = hasHref(props) ? ButtonLink : Button
-
-  return (
-    // TODO: fix type error
-    // @ts-expect-error incompatible prop type shapes
-    <Component
-      {...buttonStyles}
-      size={size}
-      py={vertPadding}
-      {...rest}
-      sx={{
-        ".chakra-button__icon svg": {
-          // Force icon to be the same size for both button sizes
-          fontSize: "2xl",
-        },
-      }}
-    >
-      <Stack
-        spacing="0"
-        flexDir={reverseTextOrder ? "column-reverse" : "column"}
-      >
-        <Text
-          as="span"
-          size="md"
-          fontWeight={size === "md" ? "bold" : "normal"}
-        >
-          {mainText}
-        </Text>
-        <Text
-          as="span"
-          size="xs"
-          color={
-            rest.variant === "outline" || rest.isSecondary
-              ? "body.medium"
-              : undefined
-          }
-        >
-          {helperText}
-        </Text>
-      </Stack>
-    </Component>
-  )
-}
-
-export default ButtonTwoLines
diff --git a/src/components/Buttons/index.ts b/src/components/Buttons/index.ts
index 73e0e2bcbb1..6f05838f36d 100644
--- a/src/components/Buttons/index.ts
+++ b/src/components/Buttons/index.ts
@@ -1,4 +1,3 @@
 export { default as Button, type ButtonProps, checkIsSecondary } from "./Button"
 export { default as ButtonLink, type ButtonLinkProps } from "./ButtonLink"
-export { default as ButtonTwoLines } from "./ButtonTwoLines"
 export { default as IconButton } from "./IconButton"
diff --git a/src/components/ui/__stories__/ButtonLinkTwoLines.stories.tsx b/src/components/ui/__stories__/ButtonLinkTwoLines.stories.tsx
new file mode 100644
index 00000000000..0c0ffaaf90e
--- /dev/null
+++ b/src/components/ui/__stories__/ButtonLinkTwoLines.stories.tsx
@@ -0,0 +1,35 @@
+import { BiCircle } from "react-icons/bi"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { ButtonLinkTwoLines as ButtonLinkTwoLinesComponent } from "../buttons/ButtonTwoLines"
+import { Stack } from "../flex"
+
+const meta = {
+  title: "Atoms / Form / Buttons / ButtonTwoLines",
+  component: ButtonLinkTwoLinesComponent,
+} satisfies Meta<typeof ButtonLinkTwoLinesComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const ButtonLinkTwoLines: Story = {
+  args: {
+    icon: BiCircle,
+    mainText: "Main Text",
+    helperText: "Helper Text",
+    className: "w-[300px]",
+    href: "#",
+  },
+  render: (args) => (
+    <Stack className="gap-8">
+      <ButtonLinkTwoLinesComponent {...args} />
+      <ButtonLinkTwoLinesComponent
+        {...args}
+        iconAlignment="end"
+        size="sm"
+        reverseTextOrder
+      />
+    </Stack>
+  ),
+}
diff --git a/src/components/ui/__stories__/ButtonTwoLines.stories.tsx b/src/components/ui/__stories__/ButtonTwoLines.stories.tsx
index 07606c0f1bd..dc3850cc3c9 100644
--- a/src/components/ui/__stories__/ButtonTwoLines.stories.tsx
+++ b/src/components/ui/__stories__/ButtonTwoLines.stories.tsx
@@ -1,8 +1,8 @@
 import { BiCircle } from "react-icons/bi"
-import { Stack } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import ButtonTwoLinesComponent from "../buttons/ButtonTwoLines"
+import { ButtonTwoLines as ButtonTwoLinesComponent } from "../buttons/ButtonTwoLines"
+import { Stack } from "../flex"
 
 const meta = {
   title: "Atoms / Form / Buttons / ButtonTwoLines",
@@ -15,14 +15,13 @@ type Story = StoryObj<typeof meta>
 
 export const ButtonTwoLines: Story = {
   args: {
-    componentType: "button",
     icon: BiCircle,
     mainText: "Main Text",
     helperText: "Helper Text",
     className: "w-[300px]",
   },
   render: (args) => (
-    <Stack spacing="8">
+    <Stack className="gap-8">
       <ButtonTwoLinesComponent {...args} />
       <ButtonTwoLinesComponent
         {...args}
diff --git a/src/components/ui/buttons/Button.tsx b/src/components/ui/buttons/Button.tsx
index 37c8cfbcb69..e695cf6896b 100644
--- a/src/components/ui/buttons/Button.tsx
+++ b/src/components/ui/buttons/Button.tsx
@@ -126,8 +126,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = "Button"
 
-type ButtonLinkProps = LinkProps &
+type ButtonLinkProps = Omit<LinkProps, "href"> &
   Pick<ButtonProps, "size" | "variant" | "isSecondary"> & {
+    href: string
     buttonProps?: Omit<ButtonProps, "size" | "variant">
     customEventOptions?: MatomoEventOptions
   }
diff --git a/src/components/ui/buttons/ButtonTwoLines.tsx b/src/components/ui/buttons/ButtonTwoLines.tsx
index 332290ba5bc..b2b5dcd84bf 100644
--- a/src/components/ui/buttons/ButtonTwoLines.tsx
+++ b/src/components/ui/buttons/ButtonTwoLines.tsx
@@ -36,76 +36,103 @@ type CommonProps = {
 
 type OmittedTypes = "variant" | "size" | "children"
 
-type ButtonTypeProps = CommonProps &
-  Omit<ButtonProps, OmittedTypes> & {
-    componentType: "button"
-  }
+type ButtonTwoLinesProps = Omit<ButtonProps, OmittedTypes> & CommonProps
 
-type ButtonLinkTypeProps = CommonProps &
-  Omit<ButtonLinkProps, OmittedTypes> & {
-    componentType: "link"
-  }
-
-type ButtonTwoLinesProps = ButtonTypeProps | ButtonLinkTypeProps
-
-const ButtonTwoLines = ({
-  iconAlignment = "start",
+/**
+ * Button that renders two styled lines of text
+ */
+export const ButtonTwoLines = ({
   className,
+  iconAlignment = "start",
   size = "md",
   ...props
 }: ButtonTwoLinesProps) => {
   const isIconLeft = ["left", "start"].includes(iconAlignment)
 
-  const commonClassStyles = cn(
-    isIconLeft ? "text-start justify-start" : "text-end justify-end",
-    size === "md" ? "py-4" : "py-2",
-    className
+  const [childProps, ownProps] = createSplitProps<ButtonTwoLinesProps>()(
+    { ...props, isIconLeft, size },
+    [
+      "reverseTextOrder",
+      "mainText",
+      "helperText",
+      "variant",
+      "icon",
+      "isIconLeft",
+      "isSecondary",
+      "size",
+    ]
   )
 
-  if (props.componentType === "link") {
-    const { buttonProps, ...rest } = props
-    return (
-      <ButtonLink
-        className={commonClassStyles}
-        // size={size}
-        buttonProps={buttonProps}
-        {...rest}
-      >
-        <ChildContent
-          {...rest}
-          size={size}
-          isSecondary={buttonProps?.isSecondary}
-          isIconLeft={isIconLeft}
-        />
-      </ButtonLink>
-    )
-  }
   return (
-    <Button className={commonClassStyles} size={size} {...props}>
-      <ChildContent {...props} size={size} isIconLeft={isIconLeft} />
+    <Button
+      className={cn(
+        isIconLeft ? "justify-start text-start" : "justify-end text-end",
+        size === "md" ? "py-4" : "py-2",
+        className
+      )}
+      {...ownProps}
+    >
+      <ChildContent {...childProps} />
     </Button>
   )
 }
 
-export default ButtonTwoLines
-
-const ChildContent = (
-  props: Omit<ButtonTwoLinesProps, "iconAlignment" | "buttonProps"> & {
-    isIconLeft: boolean
-    isSecondary?: boolean
-  }
-) => {
-  const {
-    reverseTextOrder = false,
-    size,
-    mainText,
-    helperText,
-    icon: Icon,
-    isIconLeft,
-    isSecondary,
-    variant,
-  } = props
+type ButtonLinkTwoLinesProps = Omit<ButtonLinkProps, OmittedTypes> & CommonProps
+
+/**
+ * ButtonLink that renders two styled lines of text
+ */
+export const ButtonLinkTwoLines = ({
+  className,
+  iconAlignment = "start",
+  size = "md",
+  ...props
+}: ButtonLinkTwoLinesProps) => {
+  const isIconLeft = ["left", "start"].includes(iconAlignment)
+
+  const [childProps, ownProps] = createSplitProps<ButtonLinkTwoLinesProps>()(
+    { ...props, isIconLeft, size },
+    [
+      "reverseTextOrder",
+      "mainText",
+      "helperText",
+      "variant",
+      "icon",
+      "isIconLeft",
+      "isSecondary",
+      "size",
+    ]
+  )
+
+  return (
+    <ButtonLink
+      className={cn(
+        isIconLeft ? "justify-start text-start" : "justify-end text-end",
+        size === "md" ? "py-4" : "py-2",
+        className
+      )}
+      {...ownProps}
+    >
+      <ChildContent {...childProps} />
+    </ButtonLink>
+  )
+}
+
+type ChildContentProps = Omit<CommonProps, "iconAlignment"> & {
+  isIconLeft: boolean
+  isSecondary?: boolean
+}
 
+const ChildContent = ({
+  helperText,
+  icon: Icon,
+  mainText,
+  reverseTextOrder = false,
+  size,
+  variant,
+  isIconLeft,
+  isSecondary,
+}: ChildContentProps) => {
   const ButtonIcon = () => (
     <Icon
       // TODO: Text size here should not be marked important after migration
@@ -141,3 +168,36 @@ const ChildContent = (
     </>
   )
 }
+
+/**
+ * Split props ripped from Ark UI and simplified:
+ * https://github.com/chakra-ui/ark/blob/main/packages/react/src/utils/create-split-props.ts
+ */
+type EnsureKeys<ExpectedKeys extends (keyof ChildContentProps)[]> =
+  keyof ChildContentProps extends ExpectedKeys[number]
+    ? unknown
+    : `Missing required keys: ${Exclude<keyof ChildContentProps, ExpectedKeys[number]> & string}`
+
+function createSplitProps<ParentProps>() {
+  return <
+    Keys extends (keyof ChildContentProps)[],
+    Props = Required<ParentProps>,
+  >(
+    props: Props,
+    keys: Keys & EnsureKeys<Keys>
+  ) =>
+    (keys as string[]).reduce<
+      [ChildContentProps, Omit<Props, Extract<(typeof keys)[number], string>>]
+    >(
+      (previousValue, currentValue) => {
+        const [target, source] = previousValue
+        const key = currentValue
+        if (source[key] !== undefined) {
+          target[key] = source[key]
+        }
+        delete source[key]
+        return [target, source]
+      },
+      [{} as ChildContentProps, { ...props }]
+    )
+}