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