Buttons

Button

A cross-platform pressable with size and variant APIs for primary actions, secondary actions, and icon-only controls.

SourceRegistry

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

1

Install the component

Run the registry command below to add button to your project.

watermelon add button
2

Install manual dependencies

If you are wiring the component manually, install the package dependencies shown below.

npm install @rn-primitives/slot class-variance-authority lucide-react-native react-native-svg
3

Import the component

Import Button from your local UI registry output.

Import

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

Import

Import

import { Button } from "@/components/ui/button";
import { Text } from "@/components/ui/text";

Usage

The Button component wraps a React Native Pressable and shares text styling through the registry Text primitive.

Basic Usage

Use the default button for primary actions.

Basic Usage

<Button>
<Text>Continue</Text>
</Button>

Variants

Choose from default, secondary, outline, ghost, destructive, and link.

Variants

<Button variant="default"><Text>Primary</Text></Button>
<Button variant="secondary"><Text>Secondary</Text></Button>
<Button variant="outline"><Text>Outline</Text></Button>
<Button variant="ghost"><Text>Ghost</Text></Button>
<Button variant="destructive"><Text>Delete</Text></Button>

Sizes

Match the control to the surface with sm, default, lg, or icon.

Sizes

<Button size="sm"><Text>Small</Text></Button>
<Button size="default"><Text>Default</Text></Button>
<Button size="lg"><Text>Large</Text></Button>

With Text

Because the registry shares class names with the nested Text element, icon and label compositions stay visually consistent.

Composed Button

<Button variant="outline" size="lg">
<Text>Open Preview</Text>
</Button>

API Reference

Button extends all supported props from React Native Pressable and adds design-system variants.

proptypedefaultdescription
variant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link""default"Controls the visual style of the button.
size"default" | "sm" | "lg" | "icon""default"Controls button height, padding, and icon sizing.
disabledbooleanfalseDisables interactions and lowers opacity.
classNamestring-Extends the NativeWind classes applied to the control.

Next

Text