Button | NativeBase

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

Copy
<Button success>
  <Text>Success</Text>
</Button>

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

Copy
<Button small primary>
  <Text>Default Small</Text>
</Button>

Designing the Button

With v3 you can combine variants and style props to create various designs.

v2

v3

Copy
<Button bordered success>
  <Text>Success</Text>
</Button>

Copy
<Button transparent success>
  <Text>Success</Text>
</Button>

Copy
<Button rounded success>
  <Text>Success</Text>
</Button>

Icon Button

With v3 iconLeft and iconRight can now accepts tsx.Element as child and render the element at the appropriate place.

v2

v3

Copy
<Button iconLeft dark>
  <Icon name="cog" />
  <Text>Settings</Text>
</Button>

Quick Nav

Button | next | NativeBase | Universal Components for React and React Native