Button
A versatile button component with multiple variants and states.
Installation
Install the component:
npx natively-ui add buttonUsage
ButtonDemo.jsx
1import { Button } from '@/components/ui/button';
2
3export default function MyComponent() {
4 return (
5 <Button
6 variant="default"
7 onPress={() => console.log('Button pressed')}
8 >
9 Click me
10 </Button>
11 );
12}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'default' | The visual style variant of the button. |
| size | 'default' | 'sm' | 'lg' | 'icon' | 'default' | The size of the button. |
| disabled | boolean | false | Whether the button is disabled. |
| isLoading | boolean | false | Shows a loading spinner and disables the button. |
| onPress | () => void | - | Function called when the button is pressed. |
| href | string | - | Navigation route. When provided, button acts as a link. |
| leftIcon | React.ReactNode | - | Icon displayed on the left side of the button text. |
| rightIcon | React.ReactNode | - | Icon displayed on the right side of the button text. |
| className | string | "" | Additional CSS classes for the button container. |
| textClassName | string | "" | Additional CSS classes for the button text. |
Features
- Multiple visual variants (default, destructive, outline, secondary, ghost, link)
- Different size options (default, sm, lg, icon)
- Loading state with spinner
- Disabled state styling
- Left and right icon support
- Navigation support with href prop
- Customizable styling with className props
- Built with Tailwind CSS and React Native
Examples
Variants
ButtonDemo.jsx
1<View style={{ gap: 8 }}>
2 <Button variant="default">Default</Button>
3 <Button variant="destructive">Destructive</Button>
4 <Button variant="outline">Outline</Button>
5 <Button variant="secondary">Secondary</Button>
6 <Button variant="ghost">Ghost</Button>
7 <Button variant="link">Link</Button>
8</View>Sizes
ButtonDemo.jsx
1<View style={{ gap: 8 }}>
2 <Button size="sm">Small</Button>
3 <Button size="default">Default</Button>
4 <Button size="lg">Large</Button>
5 <Button size="icon">
6 <Icon name="settings" size={16} />
7 </Button>
8</View>With Icons
ButtonDemo.jsx
1<View style={{ gap: 8 }}>
2 <Button leftIcon={<Icon name="plus" size={16} />}>
3 Add Item
4 </Button>
5
6 <Button rightIcon={<Icon name="arrow-right" size={16} />}>
7 Continue
8 </Button>
9
10 <Button
11 leftIcon={<Icon name="download" size={16} />}
12 rightIcon={<Icon name="external-link" size={16} />}
13 >
14 Download & Open
15 </Button>
16</View>Loading State
ButtonDemo.jsx
1const [isLoading, setIsLoading] = useState(false);
2
3<Button
4 isLoading={isLoading}
5 onPress={async () => {
6 setIsLoading(true);
7 await someAsyncOperation();
8 setIsLoading(false);
9 }}
10>
11 Save Changes
12</Button>Navigation
ButtonDemo.jsx
1<View style={{ gap: 8 }}>
2 <Button href="/profile">
3 Go to Profile
4 </Button>
5
6 <Button
7 href="/settings"
8 leftIcon={<Icon name="settings" size={16} />}
9 >
10 Settings
11 </Button>
12</View>