Pressable buttons with five variants, three sizes, icons and a loading state.
npx shadcn@latest add @lokalhost/buttonsThe source is copied to components/ui/button.tsx — it’s yours to edit.
import { Button } from "@/components/ui/button";
<Button onPress={addToBag} loading={loading} fullWidth>
Add to bag
</Button>
<Button variant="outline">Outline</Button>
<Button
variant="destructive"
icon={<Ionicons name="trash-outline" size={18} color="#fff" />}
>
Delete account
</Button>| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | React.ReactNode | — | Button label. Strings are wrapped in a themed Text. |
variant | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "primary" | Visual style of the button. |
size | "sm" | "md" | "lg" | "md" | Height and horizontal padding: 36, 44 or 52pt. |
loading | boolean | false | Shows a spinner and blocks presses while true. |
icon | React.ReactNode | undefined | Element rendered before the label. |
fullWidth | boolean | false | Stretches the button to fill its container. |
...props | PressableProps | — | Forwarded to the underlying Pressable (onPress, disabled, …). |