reactnatively

Button

A fully-featured button with solid, outline, ghost, glass, tinted, and destructive variants. Supports icons, loading states, full-width layout, and semantic color tokens out of the box.

Import

typescript

import { Button } from 'reactnatively';

Interactive preview

ActionsRow.tsx

1import { View, StyleSheet } from 'react-native';2import { Button } from 'reactnatively';34export function ActionsRow() {5  return (6    <View style={styles.row}>7      <Button variant="solid" color="primary" onPress={handleStart}>8        Solid9      </Button>10      <Button variant="outline" color="primary" onPress={handleOutline}>11        Outline12      </Button>13      <Button variant="ghost" color="primary" onPress={handleGhost}>14        Ghost15      </Button>16      <Button variant="glass" onPress={handleGlass}>17        Glass18      </Button>19      <Button variant="tinted" color="primary" onPress={handleTinted}>20        Tinted21      </Button>22      <Button variant="destructive" onPress={handleDelete}>23        Destructive24      </Button>25    </View>26  );27}2829const styles = StyleSheet.create({30  row: { flexDirection: 'row', flexWrap: 'wrap', gap: 12, padding: 20 },31});

Props

Prop	Type	Default	Description
variant	'solid' \| 'outline' \| 'ghost' \| 'glass' \| 'tinted' \| 'destructive'	"solid"	Visual style of the button.
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	"md"	Controls padding and font size.
color	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'danger' \| 'neutral'	"primary"	Semantic color token applied to the button.
label	string	undefined	Convenience prop for string children — equivalent to passing a string child.
children	ReactNode	undefined	Content rendered inside the button.
leftIcon	ReactNode	undefined	Icon placed to the left of the label.
rightIcon	ReactNode	undefined	Icon placed to the right of the label.
loading	boolean	false	Shows a spinner and disables interaction.
disabled	boolean	false	Disables the button and reduces opacity.
fullWidth	boolean	false	Stretches the button to fill its container.
flex	number	undefined	Sets the flex value on the outer container.
glass	GlassButtonConfig	undefined	Glass-specific config. Only used when variant="glass".
style	StyleProp<ViewStyle>	undefined	Style applied to the outer container.
textStyle	StyleProp<TextStyle>	undefined	Style applied to the label text.
pressedStyle	StyleProp<ViewStyle>	undefined	Style applied while the button is pressed.
accessibilityLabel	string	undefined	Screen-reader label for the button.
accessibilityHint	string	undefined	Screen-reader hint describing the action.