From 381feacd262230cb1c61d683f749de9a5879b9d2 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 30 Sep 2025 16:18:36 -0500
Subject: [PATCH] Add StackedButton component (#9086)

---
 .eslintrc.js                           |  1 +
 src/components/Button.tsx              | 44 ++++++++++++++++++++++++++
 src/view/screens/Storybook/Buttons.tsx | 25 +++++++++++++++
 3 files changed, 70 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 04914bde64..fa2c74d9e9 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -37,6 +37,7 @@ module.exports = {
           'Toast.Action',
           'AgeAssuranceAdmonition',
           'Span',
+          'StackedButton',
         ],
         impliedTextProps: [],
         suggestedTextWrappers: {
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 5e78c40e2b..ad55e16ca2 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -837,3 +837,47 @@ export function ButtonIcon({
     </View>
   )
 }
+
+export type StackedButtonProps = Omit<
+  ButtonProps,
+  keyof VariantProps | 'children'
+> &
+  Pick<VariantProps, 'color'> & {
+    children: React.ReactNode
+    icon: React.ComponentType<SVGIconProps>
+  }
+
+export function StackedButton({children, ...props}: StackedButtonProps) {
+  return (
+    <Button
+      {...props}
+      size="tiny"
+      style={[
+        a.flex_col,
+        {
+          height: 72,
+          paddingHorizontal: 16,
+          borderRadius: 20,
+          gap: 4,
+        },
+        props.style,
+      ]}>
+      <StackedButtonInnerText icon={props.icon}>
+        {children}
+      </StackedButtonInnerText>
+    </Button>
+  )
+}
+
+function StackedButtonInnerText({
+  children,
+  icon: Icon,
+}: Pick<StackedButtonProps, 'icon' | 'children'>) {
+  const textStyles = useSharedButtonTextStyles()
+  return (
+    <>
+      <Icon width={24} fill={textStyles.color} />
+      <ButtonText>{children}</ButtonText>
+    </>
+  )
+}
diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx
index eebb6f8924..f6a2c36a0b 100644
--- a/src/view/screens/Storybook/Buttons.tsx
+++ b/src/view/screens/Storybook/Buttons.tsx
@@ -8,6 +8,7 @@ import {
   ButtonIcon,
   type ButtonSize,
   ButtonText,
+  StackedButton,
 } from '#/components/Button'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
@@ -18,6 +19,30 @@ export function Buttons() {
     <View style={[a.gap_md]}>
       <Text style={[a.font_bold, a.text_5xl]}>Buttons</Text>
 
+      <View style={[a.flex_row, a.gap_md, a.align_start, {maxWidth: 350}]}>
+        <StackedButton
+          label="stacked"
+          icon={Globe}
+          color="secondary"
+          style={[a.flex_1]}>
+          Bop it
+        </StackedButton>
+        <StackedButton
+          label="stacked"
+          icon={Globe}
+          color="negative_subtle"
+          style={[a.flex_1]}>
+          Twist it
+        </StackedButton>
+        <StackedButton
+          label="stacked"
+          icon={Globe}
+          color="primary"
+          style={[a.flex_1]}>
+          Pull it
+        </StackedButton>
+      </View>
+
       {[
         'primary',
         'secondary',