54 lines
1.2 KiB
JavaScript
54 lines
1.2 KiB
JavaScript
import { Pressable, StyleSheet, Text } from 'react-native';
|
|
|
|
import { colors } from '../utils/constants';
|
|
|
|
export default function PrimaryButton({ label, onPress, disabled = false, tone = 'default' }) {
|
|
return (
|
|
<Pressable
|
|
accessibilityRole="button"
|
|
disabled={disabled}
|
|
onPress={onPress}
|
|
style={({ pressed }) => [
|
|
styles.button,
|
|
tone === 'light' ? styles.lightButton : null,
|
|
pressed ? styles.buttonPressed : null,
|
|
disabled ? styles.disabled : null
|
|
]}
|
|
>
|
|
<Text style={[styles.label, tone === 'light' ? styles.lightLabel : null, disabled ? styles.disabledLabel : null]}>{label}</Text>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
alignItems: 'center',
|
|
backgroundColor: colors.primary,
|
|
borderRadius: 14,
|
|
justifyContent: 'center',
|
|
minHeight: 50,
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 14
|
|
},
|
|
buttonPressed: {
|
|
opacity: 0.82
|
|
},
|
|
lightButton: {
|
|
backgroundColor: colors.surface
|
|
},
|
|
label: {
|
|
color: colors.surface,
|
|
fontSize: 16,
|
|
fontWeight: '800'
|
|
},
|
|
lightLabel: {
|
|
color: colors.primaryDark
|
|
},
|
|
disabled: {
|
|
backgroundColor: colors.border
|
|
},
|
|
disabledLabel: {
|
|
color: colors.muted
|
|
}
|
|
});
|