@@ -1,9 +1,10 @@
+import { RequestActionButton } from "./RequestActionButton";
 import type {
   ApprovalRequestId,
   ProviderApprovalDecision,
   ProviderApprovalOption,
 } from "@t3tools/contracts";
-import { Pressable, View } from "react-native";
+import { View } from "react-native";
 
 import { AppText as Text } from "../../components/AppText";
 import type { PendingApproval } from "../../lib/threadActivity";
@@ -47,30 +48,19 @@ export function PendingApprovalCard(props: PendingApprovalCardProps) {
       ) : null}
       <View className="flex-row flex-wrap gap-2.5">
         {options.map((option) => (
-          <Pressable
+          <RequestActionButton
             key={option.decision}
-            className={`items-center justify-center rounded-[14px] px-3.5 py-3 ${
+            label={option.label}
+            tone={
               option.decision === "accept"
-                ? "bg-primary"
+                ? "primary"
                 : option.decision === "decline"
-                  ? "bg-danger"
-                  : "bg-subtle-strong"
-            }`}
+                  ? "danger"
+                  : "secondary"
+            }
             disabled={props.respondingApprovalId === props.approval.requestId}
             onPress={() => void props.onRespond(props.approval.requestId, option.decision)}
-          >
-            <Text
-              className={`text-sm ${
-                option.decision === "accept"
-                  ? "font-t3-extrabold text-primary-foreground"
-                  : option.decision === "decline"
-                    ? "font-t3-bold text-danger-foreground"
-                    : "font-t3-bold text-foreground"
-              }`}
-            >
-              {option.label}
-            </Text>
-          </Pressable>
+          />
         ))}
       </View>
     </View>
 
@@ -1,3 +1,4 @@
+import { RequestActionButton } from "./RequestActionButton";
 import { QuestionAttachments } from "./QuestionAttachments";
 import type { ApprovalRequestId, UserInputQuestion } from "@t3tools/contracts";
 import { useCallback, useRef } from "react";
@@ -321,25 +322,15 @@ export function PendingUserInputCard(props: PendingUserInputCardProps) {
           );
         })}
       </ScrollView>
-      <Pressable
-        className={cn(
-          "items-center justify-center rounded-2xl px-4 py-3.5",
-          props.answers ? "bg-primary" : "bg-subtle-strong",
-        )}
+      <RequestActionButton
+        label="Submit answers"
+        size="large"
+        tone={props.answers ? "primary" : "secondary"}
         disabled={
           props.answers === null || props.respondingUserInputId === props.pendingUserInput.requestId
         }
         onPress={() => void props.onSubmit()}
-      >
-        <Text
-          className={cn(
-            "font-t3-extrabold text-sm",
-            props.answers ? "text-primary-foreground" : "text-foreground-muted",
-          )}
-        >
-          Submit answers
-        </Text>
-      </Pressable>
+      />
       {props.pendingUserInput.dismissible ? (
         <Pressable
           accessibilityRole="button"
 
@@ -0,0 +1,45 @@
+import type { ComponentProps } from "react";
+import { Pressable } from "react-native";
+
+import { AppText as Text } from "../../components/AppText";
+import { cn } from "../../lib/cn";
+
+/** Primary actions in the cards that replace the thread composer. */
+export function RequestActionButton({
+  label,
+  tone = "primary",
+  size = "default",
+  disabled,
+  ...props
+}: Omit<ComponentProps<typeof Pressable>, "children" | "className" | "style"> & {
+  label: string;
+  tone?: "primary" | "secondary" | "danger";
+  size?: "default" | "large";
+}) {
+  return (
+    <Pressable
+      {...props}
+      accessibilityRole="button"
+      accessibilityState={{ ...props.accessibilityState, disabled: Boolean(disabled) }}
+      disabled={disabled}
+      className={cn(
+        "items-center justify-center active:opacity-70 disabled:opacity-50",
+        size === "large" ? "rounded-2xl px-4 py-3.5" : "rounded-[14px] px-3.5 py-3",
+        tone === "primary" ? "bg-primary" : tone === "danger" ? "bg-danger" : "bg-subtle-strong",
+      )}
+    >
+      <Text
+        className={cn(
+          "text-sm",
+          tone === "primary"
+            ? "font-t3-extrabold text-primary-foreground"
+            : tone === "danger"
+              ? "font-t3-bold text-danger-foreground"
+              : "font-t3-bold text-foreground",
+        )}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
@@ -1,4 +1,5 @@
-import { Pressable, View } from "react-native";
+import { RequestActionButton } from "./RequestActionButton";
+import { View } from "react-native";
 
 import { AppText as Text } from "../../components/AppText";
 
@@ -23,13 +24,7 @@ export function ThreadCreationFailedCard(props: {
         Your prompt was kept in the project draft.
       </Text>
       <View className="flex-row">
-        <Pressable
-          accessibilityRole="button"
-          className="items-center justify-center rounded-[14px] bg-blue-500 px-3.5 py-3"
-          onPress={props.onEditTask}
-        >
-          <Text className="text-sm font-t3-extrabold text-white">Edit task</Text>
-        </Pressable>
+        <RequestActionButton label="Edit task" onPress={props.onEditTask} />
       </View>
     </View>
   );