Customizable Button component with variants, sizes, loading state, and icon support.

Button

ScaleRocket Mobile includes a flexible Button component that replaces the default React Native TouchableOpacity with consistent styling and built-in loading states.

Basic Usage

import { Button } from "@/components/ui/Button";

export default function MyScreen() {
  return (
    <Button title="Get Started" onPress={() => console.log("pressed")} />
  );
}

Variants

The Button supports multiple visual variants:

<Button title="Primary" variant="primary" onPress={handlePress} />
<Button title="Secondary" variant="secondary" onPress={handlePress} />
<Button title="Outline" variant="outline" onPress={handlePress} />
<Button title="Ghost" variant="ghost" onPress={handlePress} />
<Button title="Destructive" variant="destructive" onPress={handlePress} />

Variant	Use Case
`primary`	Main actions (submit, continue)
`secondary`	Secondary actions (cancel, back)
`outline`	Tertiary actions with border
`ghost`	Minimal style for inline actions
`destructive`	Dangerous actions (delete, remove)

Sizes

Three built-in sizes control padding and font size:

<Button title="Small" size="sm" onPress={handlePress} />
<Button title="Medium" size="md" onPress={handlePress} />
<Button title="Large" size="lg" onPress={handlePress} />

Loading State

Pass loading={true} to show a spinner and disable interaction:

const [loading, setLoading] = useState(false);

<Button
  title="Save"
  loading={loading}
  onPress={async () => {
    setLoading(true);
    await saveData();
    setLoading(false);
  }}
/>

When loading, the button automatically:

Replaces text with an ActivityIndicator
Disables touch events
Reduces opacity

Icon Buttons

Add an icon before or after the label:

import { Ionicons } from "@expo/vector-icons";

<Button
  title="Add Item"
  icon={<Ionicons name="add" size={18} color="white" />}
  onPress={handlePress}
/>

<Button
  title="Next"
  iconRight={<Ionicons name="arrow-forward" size={18} color="white" />}
  onPress={handlePress}
/>

Full Width

By default buttons are auto-width. Set fullWidth for form actions:

<Button title="Sign In" fullWidth onPress={handleSignIn} />

Customization

Override styles via the style and textStyle props:

<Button
  title="Custom"
  style={{ backgroundColor: "#8B5CF6", borderRadius: 12 }}
  textStyle={{ fontWeight: "700", fontSize: 16 }}
  onPress={handlePress}
/>

Disabled State

<Button title="Submit" disabled={!isValid} onPress={handleSubmit} />

The disabled state reduces opacity to 0.5 and prevents touch events.

Component Props

Prop	Type	Default	Description
`title`	`string`	required	Button label
`variant`	`string`	`"primary"`	Visual variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Button size
`loading`	`boolean`	`false`	Show loading spinner
`disabled`	`boolean`	`false`	Disable interaction
`fullWidth`	`boolean`	`false`	Stretch to container width
`icon`	`ReactNode`	—	Left icon element
`iconRight`	`ReactNode`	—	Right icon element

Button

On this page