Chakra-ui: [Button] Text alignment does not work

[kripod]

When creating a button wider than its contents (e.g. with its uncodumented isFullWidth prop or width="100%"), the textAlign="left" does nothing. I tried playing around with left and right paddings, but with no luck.

Example

<Button isFullWidth textAlign="left">
  I'm a full width button with text aligned to the left
</Button>

Current appearance

Expected appearance

Use-case

When a group of buttons contain check boxes or radios, one may want to align them together.

[lee-reinhardt]

If you look at the button's css, it's display: inline-flex. If a container is flex'd, text-align is not respected -- you should use justify-content for child alignment.

This works as expected:

<Button width="100%" justifyContent="flex-start">
  Button Text
</Button>

[kripod]

@lee-reinhardt Thanks for your quick response! Could you please add a note about it inside the docs? I'd happily close the issue afterwards.

[segunadebayo]

I'll add this to the docs. Thanks for the quick response @lee-reinhardt