Components
iOSAndroid
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-buttonRequired Packages(1 package)
pnpm add react-native-reanimatedUsage
import { Button } from '@/components/docyrus-native/button';
<Button>Click me</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button loading>Loading...</Button>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Button content |
variant | 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'default' | Visual style variant |
size | 'sm' | 'md' | 'lg' | 'icon' | 'md' | Button size |
disabled | boolean | false | Disable interaction |
loading | boolean | false | Show loading spinner with smooth layout transition |
feedbackVariant | 'scale' | 'scale-highlight' | 'none' | 'scale-highlight' | Press feedback animation type |
onPress | () => void | — | Press handler |
onLongPress | () => void | — | Long press handler |
className | string | — | Additional CSS classes |
textClassName | string | — | Text CSS classes |
accessibilityLabel | string | — | Accessibility label |
Type Exports
| Type | Description |
|---|---|
ButtonProps | Props for Button component |
ButtonVariant | 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' |
ButtonSize | 'sm' | 'md' | 'lg' | 'icon' |