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.| 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. |