Version: 3.1.0

Button

Migrating Button 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 mostly 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.

Button/Screenshot_2021-01-22_at_12.29.32_PM.png

<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.

Button/Screenshot_2021-01-22_at_2.37.09_PM.png

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

Designing the Button#

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

Button/Screenshot_2021-01-22_at_1.16.25_PM.png

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

Button/Screenshot_2021-01-22_at_1.23.42_PM.png

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

Button/Screenshot_2021-01-22_at_1.17.11_PM.png

<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.

Button/Screenshot_2021-01-22_at_1.32.47_PM.png

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