GeekyAnts / GeekyAnts/NativeBase

Solid and outline buttons have different heights

Open
#4,938 3 comments 0 reactions 1 assignee Claimed by @mayank-96 View on GitHub
bug stale triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

Not sure if this is a bug or intentional. Solid and outline buttons currently differ slightly in height. This can be an annoyance if you want a row of buttons that all have the same height.

### CodeSandbox/Snack link

https://snack.expo.dev/@srmagura/nativebase-outline-button-size-341

### Steps to reproduce

1. Open the Snack I linked.

**Expected behavior:** Buttons have the same height regardless of `variant`.

**Actual behavior:** Outline buttons are slightly taller than solid buttons.

Screenshot from Android:
![image](https://user-images.githubusercontent.com/801549/163733593-f35e6db9-ec3f-435d-91af-23e43b514d4a.png)

### NativeBase Version

3.4.1

### Platform

- [X] Android
- [ ] CRA
- [X] Expo
- [X] iOS
- [ ] Next

### Other Platform

Web (visible in the web preview pane of the Snack)

### Additional Information

You can probably fix this by adding a border to the solid buttons that is the same color as the background color.

As a reference point, the Bootstrap button component is the same height regardless of whether it is a normal (solid) button or an outline button.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.