Add rectangular shape to button (#9382)

src/components/Button.tsx

@@ -39,7 +39,7 @@ export type ButtonColor =
   | 'primary_subtle'
   | 'negative_subtle'
 export type ButtonSize = 'tiny' | 'small' | 'large'
-export type ButtonShape = 'round' | 'square' | 'default'
+export type ButtonShape = 'round' | 'square' | 'rectangular' | 'default'
 export type VariantProps = {
   /**
    * The style variation of the button
@@ -56,6 +56,11 @@ export type VariantProps = {
   size?: ButtonSize
   /**
    * The shape of the button
+   *
+   * - `default`: Pill shaped. Most buttons should use this shape.
+   * - `round`: Circular. For icon-only buttons.
+   * - `square`: Square. For icon-only buttons.
+   * - `rectangular`: Rectangular. Matches previous style, use when adjacent to form fields.
    */
   shape?: ButtonShape
 }
@@ -453,6 +458,29 @@ export const Button = React.forwardRef<View, ButtonProps>(
             gap: 2,
           })
         }
+      } else if (shape === 'rectangular') {
+        if (size === 'large') {
+          baseStyles.push({
+            paddingVertical: 12,
+            paddingHorizontal: 25,
+            borderRadius: 10,
+            gap: 3,
+          })
+        } else if (size === 'small') {
+          baseStyles.push({
+            paddingVertical: 8,
+            paddingHorizontal: 13,
+            borderRadius: 8,
+            gap: 3,
+          })
+        } else if (size === 'tiny') {
+          baseStyles.push({
+            paddingVertical: 5,
+            paddingHorizontal: 9,
+            borderRadius: 6,
+            gap: 2,
+          })
+        }
       } else if (shape === 'round' || shape === 'square') {
         /*
          * These sizes match the actual rendered size on screen, based on