reflex-dev / reflex

🕸️ Web apps in pure Python 🐍

Home Page:https://reflex.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

The rx.button component does not allow user to position it's text

HongyuHansonYao opened this issue · comments

a feature like
rx.button(text="sample", align_text="left")
would be great.

Buttons automatically stretch to fit your text - so for aligning text to the right you have to manually set a larger size for the button to see the difference. Also, text is automatically set to the minimal size required, so you have to set an rx.text() element with a width of 100% (inside the button, so it will be the width of the button) - this allows the text to move (as otherwise the element is just the size of the text, so you can't see the difference):

rx.button(
  rx.text( # text element
    "Text", # text in button
    width="100%" # make the text the width of the button
  ),
  text_align="left", # text align
  width="25%" # manually making button larger
)

Buttons automatically stretch to fit your text - so for aligning text to the right you have to manually set a larger size for the button to see the difference. Also, text is automatically set to the minimal size required, so you have to set an rx.text() element with a width of 100% (inside the button, so it will be the width of the button) - this allows the text to move (as otherwise the element is just the size of the text, so you can't see the difference):

rx.button(
  rx.text( # text element
    "Text", # text in button
    width="100%" # make the text the width of the button
  ),
  text_align="left", # text align
  width="25%" # manually making button larger
)

This is exactly what I've been searching for, thanks man!!!

No problem!
@Alek99 Close pls 👌