Button(Props): Make the icon prop more intuitive and dynamic

Description The icon position props come with a huge surface area. The idea is to decrease the APIs surface area by introducing more functionalities.

Proposed Change Instead of iconRight and default left position of the icon, we can introduce a new prop called iconPosition. And the usage looks might look something like this ⬇️

iconPosition: = "left" | "right" | "top" | "bottom"

The following functionality can be achieved by using the flex container for the text and the icon and changing it’s the direction to row | row-reverse | column | column-reverse to achieve all the possible combinations.

[laxmy]

Hi @pranshuchittora , Can I take this up?

[flyingcircle]

I wonder if it might be simpler to or possible to have button follow the same general pattern as Card and ListItem have now. Something like:

<Button>
  <Button.Icon />
  <Button.Title />
</Button>

This leaves greater flexibility and customization for users without having to sacrifice ease of use. And it also helps prevent prop bloat.