CODEWITHSUNDEEP
react-nativenative-base
Caner
Caner

Reputation: 1498

native-base change button padding

I need to change the button padding to reduce the space between button text and the borders. I'm doing it as it's done when using css but it doesn't work. I also tried buttonPadding property without success as below.

                      <View style={{marginRight: 3}}>
                        <Button buttonPadding={1} style={{padding: 1}}  bordered small disabled={sellingDisabled} onPress={() => toggleDiscountModal()}>
                          <Text>{t('sale.discount')}</Text>
                        </Button>
                      </View>

Upvotes: 2

Views: 1397

Answers (1)

vivek sharma
vivek sharma

Reputation: 369

Here is the code to change the padding of a native base button

 <Button bg="red" p="2">Upload</Button>

the above code will give a padding of 2 in top,right,bottom and left side

for giving padding at top you can use pt as shown below:

 <Button bg="red" pt="2">Upload</Button>

Along with that you can also you px and py for giving horizontal and vertical padding respectively as shown below

<Button bg="red" px="2" py="4">Upload</Button>

Upvotes: 1

Related Questions