Button | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
If you are starting a new project with NativeBase, we recommend using gluestack-ui instead.
NativeBase
3.4.x
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Disclosure
IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using gluestack-ui instead.
Explore gluestack-ui
Button
Migrating to v3 will provide a lot more design, size, color and customisation options.
Overview
Migrating Button components can broadly described in these points:
No need to wrap your text inside Text component anymore.
isDisabled prop can be used to disable the button.
Icons in Button:
leftIcon and rightIcon are the new alternative to iconLeft and iconRight respectively and they accept tsx.Element.
Colors of the Buttons:
In v3 the color is controlled by colorScheme prop. So all the color providing props [ light, info, success, warning, danger and dark ] can be passed as value (and more) to colorScheme props.
Design of the Button:
With v3 we're providing some most frequently used designs as variants [ solid, outline, ghost, link and unstyled ] and lot more customisation.
Sizes of the Button:
In v3 the size is controlled by size prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values.
Code Comparison
Colors to the Button
Besides option like light, info, success, warning, danger and dark. Now you can also provide colors like red, blue, cyan, teal and a lot more.
v2
v3
Sizes of the Button:
Besides option like light, info, success, warning, danger and dark. Now you can also provide colors like red, blue, cyan, teal and a lot more.
v2
v3
Designing the Button
With v3 you can combine variants and style props to create various designs.
v2
v3
Icon Button
With v3 iconLeft and iconRight can now accepts tsx.Element as child and render the element at the appropriate place.
v2
v3
MadeWithNativeBase