diff --git a/src/components/ui/__stories__/ButtonTwoLines.stories.tsx b/src/components/ui/__stories__/ButtonTwoLines.stories.tsx
index dc3850cc3c9..791db716d4a 100644
--- a/src/components/ui/__stories__/ButtonTwoLines.stories.tsx
+++ b/src/components/ui/__stories__/ButtonTwoLines.stories.tsx
@@ -2,7 +2,7 @@ import { BiCircle } from "react-icons/bi"
 import { Meta, StoryObj } from "@storybook/react"
 
 import { ButtonTwoLines as ButtonTwoLinesComponent } from "../buttons/ButtonTwoLines"
-import { Stack } from "../flex"
+import { HStack, Stack } from "../flex"
 
 const meta = {
   title: "Atoms / Form / Buttons / ButtonTwoLines",
@@ -21,14 +21,26 @@ export const ButtonTwoLines: Story = {
     className: "w-[300px]",
   },
   render: (args) => (
-    <Stack className="gap-8">
-      <ButtonTwoLinesComponent {...args} />
-      <ButtonTwoLinesComponent
-        {...args}
-        iconAlignment="end"
-        size="sm"
-        reverseTextOrder
-      />
-    </Stack>
+    <HStack className="gap-2">
+      <Stack className="gap-8">
+        <ButtonTwoLinesComponent {...args} />
+        <ButtonTwoLinesComponent
+          {...args}
+          iconAlignment="end"
+          size="sm"
+          reverseTextOrder
+        />
+      </Stack>
+      <Stack className="gap-8">
+        <ButtonTwoLinesComponent variant="outline" {...args} />
+        <ButtonTwoLinesComponent
+          variant="outline"
+          {...args}
+          iconAlignment="end"
+          size="sm"
+          reverseTextOrder
+        />
+      </Stack>
+    </HStack>
   ),
 }
diff --git a/src/components/ui/buttons/ButtonTwoLines.tsx b/src/components/ui/buttons/ButtonTwoLines.tsx
index b2b5dcd84bf..faf80c68528 100644
--- a/src/components/ui/buttons/ButtonTwoLines.tsx
+++ b/src/components/ui/buttons/ButtonTwoLines.tsx
@@ -45,12 +45,13 @@ export const ButtonTwoLines = ({
   className,
   iconAlignment = "start",
   size = "md",
+  variant,
   ...props
 }: ButtonTwoLinesProps) => {
   const isIconLeft = ["left", "start"].includes(iconAlignment)
 
   const [childProps, ownProps] = createSplitProps<ButtonTwoLinesProps>()(
-    { ...props, isIconLeft, size },
+    { ...props, isIconLeft, size, variant },
     [
       "reverseTextOrder",
       "mainText",
@@ -70,6 +71,7 @@ export const ButtonTwoLines = ({
         size === "md" ? "py-4" : "py-2",
         className
       )}
+      variant={variant}
       {...ownProps}
     >
       <ChildContent {...childProps} />
@@ -86,12 +88,13 @@ export const ButtonLinkTwoLines = ({
   className,
   iconAlignment = "start",
   size = "md",
+  variant,
   ...props
 }: ButtonLinkTwoLinesProps) => {
   const isIconLeft = ["left", "start"].includes(iconAlignment)
 
   const [childProps, ownProps] = createSplitProps<ButtonLinkTwoLinesProps>()(
-    { ...props, isIconLeft, size },
+    { ...props, isIconLeft, size, variant },
     [
       "reverseTextOrder",
       "mainText",
@@ -111,6 +114,7 @@ export const ButtonLinkTwoLines = ({
         size === "md" ? "py-4" : "py-2",
         className
       )}
+      variant={variant}
       {...ownProps}
     >
       <ChildContent {...childProps} />