Skip to main content

Button button component

Effect demonstration​

1. Default effect​

<Button title="Button" onPress={() => Alert.alert('hello, Button')} />

2. type='secondary'​

<Button title="Button" type="secondary" onPress={() => Alert.alert('hello, Button')} />

3. Loading state (does not respond to click events)​

<Button title="Button" loading onPress={() => Alert.alert('hello, Button')} />
Button-1

4. Disable button​

<Button title="button" disabled onPress={() => Alert.alert('hello, Button')} />

5. Set button width​

<Button title="Button" width="80%" onPress={() => Alert.alert('hello, Button')} />

6. Set the button fillet size​

<Button title="Button" borderRadius={20} onPress={() => Alert.alert('hello, Button')} />

API​

Component properties inherit SpacingProps, and the remaining properties are as follows:

PropertiesRequiredDescriptionTypeDefault Value
titletrueButton text contentReactNode
typefalseButton display typeprimary | secondaryprimary
disabledfalseWhether it is disabledbooleanfalse
loadingfalseWhether loadingboolean
onPresstrueButton click event() => void
widthfalsebutton widthnumber | string100%
borderRadiusfalseCorner sizenumberpx(4)
borderlessfalseDo not show bordersbooleanfalse
sizefalsebutton sizedefault | small | largedefault
stylefalseCustom styleViewStyle