Introduction
Components
- Accordion
- Action Sheet
- Alert
- Audio Player
- Audio Recorder
- Audio Waveform
- Avatar
- AvoidKeyboard
- Badge
- BottomSheet
- Button
- Camera
- Camera Preview
- Card
- Carousel
- Checkbox
- Collapsible
- Color Picker
- Combobox
- Date Picker
- File Picker
- Gallery
- Hello Wave
- Icon
- Image
- Input
- Input OTP
- Link
- MediaPicker
- Mode Toggle
- Onboarding
- ParallaxScrollView
- Picker
- Popover
- Progress
- Radio
- ScrollView
- SearchBar
- Separator
- Share
- Sheet
- Skeleton
- Spinner
- Switch
- Table
- Tabs
- Text
- Toast
- Toggle
- Video
- View
Charts
Installation
pnpm dlx bna-ui add button
Usage
import { Button } from '@/components/ui/button';<Button onPress={() => console.log('Button pressed!')}>Click me</Button>Examples
Default
Variants
Sizes
With Icons
Icon Only
Loading States
Disabled States
Custom Styling
Animation Control
API Reference
Button
A pressable button component with multiple variants and states.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The button content (text or custom elements). |
onPress | () => void | - | Function called when the button is pressed. |
variant | ButtonVariant | 'default' | The visual style variant of the button. |
size | ButtonSize | 'default' | The size of the button. |
disabled | boolean | false | Whether the button is disabled. |
loading | boolean | false | Whether the button is in loading state. |
loadingVariant | SpinnerVariant | 'default' | The variant of the loading spinner. |
animation | boolean | true | Whether to enable press animations. |
icon | ComponentType<LucideProps> | - | Icon component to display before the text. |
style | ViewStyle | ViewStyle[] | - | Additional styles for the button container. |
textStyle | TextStyle | - | Additional styles for the button text. |
ButtonVariant
The available button variants:
'default'- Primary button with solid background'destructive'- Red button for destructive actions'success'- Green button for success actions'outline'- Button with border and transparent background'secondary'- Secondary button with muted colors'ghost'- Button with no background'link'- Text-only button with underline
ButtonSize
The available button sizes:
'default'- Standard button size (48px height)'sm'- Small button size (44px height)'lg'- Large button size (54px height)'icon'- Square button for icons only (48x48px)
Animations
The Button component features a liquid glass animation effect by default:
- Press Animation: Scales up to 1.04x with a bouncy spring animation
- Brightness Effect: Subtle brightness increase for a glass-like effect
- Smooth Transitions: Uses
react-native-reanimatedfor 60fps animations - Customizable: Can be disabled by setting
animation={false}
Accessibility
The Button component is built with accessibility in mind:
- Proper touch target size (minimum 44px)
- Disabled state prevents interaction and reduces opacity
- Loading state shows spinner with appropriate color contrast
- Supports screen readers with proper accessibility labels
- Responsive to system accessibility settings
Best Practices
- Use
'default'variant for primary actions - Use
'outline'or'secondary'for secondary actions - Use
'destructive'for delete or dangerous actions - Use
'ghost'for subtle actions or in dense layouts - Always provide meaningful
onPresshandlers - Use loading states for async operations
- Ensure sufficient color contrast for text and backgrounds