native-vibe-ui-2
v1.0.5
Published
CLI for generating UI components
Downloads
4
Readme
Custom Button Component for React Native
Overview
The Button
component is a versatile and customizable button implementation for React Native applications. It supports various features such as loading states, icons, and different styling variants, making it suitable for a wide range of use cases.
Features
- Customizable: Easily adjust styles, sizes, and variants.
- Loading State: Display a loading indicator while processing.
- Icon Support: Include icons on either side of the button text.
- Accessibility: Built-in accessibility features to enhance user experience.
Props
| Prop Name | Type | Description |
|------------------|------------------------|-----------------------------------------------------------------------------|
| children
| React.ReactNode
| Required. The content to display inside the button. |
| onPress
| () => void
| Optional. Function to call when the button is pressed. |
| disabled
| boolean
| Optional. If true, disables the button and reduces opacity. |
| className
| string
| Optional. Additional CSS classes for styling. |
| style
| object
| Optional. Inline styles for customization. |
| size
| "sm" | "md" | "lg"
| Optional. Size of the button, affecting padding. Default is "md"
. |
| loading
| boolean
| Optional. If true, shows a loading indicator instead of children. |
| loadingText
| string
| Optional. Text to display during loading state. |
| icon
| React.ReactNode
| Optional. An icon to display alongside the button text. |
| iconPosition
| "left" | "right"
| Optional. Position of the icon relative to the text. Default is "right"
.|
| variant
| "primary" | "link"
| Optional. Determines styling of the button; default is no variant. |
| activeOpacity
| number
| Optional. Controls opacity when the button is pressed. |
Installation
npm install native-vibe-ui
Usage
npx nt-vibe add button