Buttons

Button

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

Installation

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

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

watermelon add button

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

Import Button from your local UI registry output.

Import

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

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

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

Use the default button for primary actions.

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

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

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

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

prop	type	default	description
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.
disabled	boolean	false	Disables interactions and lowers opacity.
className	string	-	Extends the NativeWind classes applied to the control.

Text