Add StackedButton component

.eslintrc.js

@@ -37,6 +37,7 @@ module.exports = {
           'Toast.Action',
           'AgeAssuranceAdmonition',
           'Span',
+          'StackedButton',
         ],
         impliedTextProps: [],
         suggestedTextWrappers: {

src/components/Button.tsx

@@ -216,8 +216,8 @@
     )
 
     const {baseStyles, hoverStyles} = React.useMemo(() => {
       const baseStyles: ViewStyle[] = []
       const hoverStyles: ViewStyle[] = []
 
       /*
        * This is the happy path for new button styles, following the
@@ -772,7 +772,7 @@
      * Copied here from icons/common.tsx so we can tweak if we need to, but
      * also so that we can calculate transforms.
      */
     const iconSize = {
       xs: 12,
       sm: 16,
       md: 18,
@@ -785,7 +785,7 @@
      * Goal here is to match rendered text size so that different size icons
      * don't increase button size
      */
     const iconContainerSize = {
       large: 20,
       small: 17,
       tiny: 15,
@@ -837,3 +837,47 @@
     </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>
+    </>
+  )
+}

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',