Skip to content

Buttons with only icon have different padding than buttons with text #1427

@apaatsio

Description

@apaatsio

Explain what you did
I tried to create multiple buttons of which some have text and some have only icon.

Expected behaviour
I expected all buttons to have the same padding. It would be great if all the buttons had the same padding out of the box without having to write custom styles.

Describe the bug
Buttons with only icon have smaller padding (no padding?) and it makes them different size than other buttons.

To Reproduce
Relevant part of code:

<Button title='' icon={{ name: 'minus', type: 'font-awesome' }} />
<Button title='RESET' />
<Button title='' icon={{ name: 'plus', type: 'font-awesome' }} />
<Button title='ADD' icon={{ name: 'plus', type: 'font-awesome' }} />

https://snack.expo.io/@apaatsio/petrified-chip

Possible Solution
Add padding to buttons that have only icon.

Screenshots
react-native-elements icon buttons size diff

Your Environment (please complete the following information):

software version
react-native-elements 1.0.0-beta5
expo 30.0.0
npm 5.6.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions