Struggling with making a button behave | Astro Lounge | Page 1

gentle field Aug 16, 2023, 1:45 PM

#

I'm trying to make a button with an icon on the right, but using flex does not give the intended effect. Attaching a sample of what I'm trying to achieve below.

#

This is what I'm trying to recreate

#

Goes without saying I'm an absolute beginner at coding

spare turret Aug 16, 2023, 1:57 PM

#

This is how I'd personally do it:

                  <a href="/" class="flex flex-auto">
                        <button class="border border-gray-300 rounded-lg py-2 px-4 w-max flex items-center">
                              <span class="mr-2">title</span>
                              <AiFillPlusCircle />
                        </button>
                  </a>

Obviously update the href, title and icon (replace my <AiFillPlusCircle /> with your svg)

TLDR is a flex flex-auto on the parent should help

#

I'd personally set rounded-xl instead of rounded-lg too if I was trying to get a better match on roundness but obviously personal preference

gentle field Aug 16, 2023, 2:04 PM

#

Hey @spare turret , just copied your code and somehow I'm getting the same issue

spare turret Aug 16, 2023, 2:09 PM

#

well it's not really the same issue, it's beside it now rather than below. The issue now is that your svg is too large so it's squishing the other content. You'll need to scale it down a bit which is something I wouldn't be too familiar with as I never use svg's but use React-Icons or other means to import graphics. A quick google on how to modify the size of SVGs would help, or even attempt to add a class via tailwind to see if that helps

#

If you wanna share the svg code with me I can take a crack at it

gentle field Aug 16, 2023, 2:25 PM

#

            <svg width="100%" height="1em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="var(--token-cdc990fc-1a39-492b-80a6-e13af03045cf, rgb(25, 25, 26)) /* {&quot;name&quot;:&quot;Black&quot;} */" style="width: 100%; height: 100%;">
                <path d="M6 12h12.5m0 0l-6-6m6 6l-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>

#

I was able to resize the svg using "transform" but the text won't flow in a single line

unkempt bridge Aug 16, 2023, 3:45 PM

#

The problem is that your button is using 100% of the width. Just define a width of 1-2 rem, and height the same (or aspect-ratio of 1)
And for the text, since it's inline, you need to do white-space: nowrap, since text's default behavior is to wrap when a word is going to cut (or enlarge the button's horizontal (inline) padding) for it to fit

outer osprey Aug 16, 2023, 3:48 PM

#

I think buttons inside anchors, or anchors inside buttons are not valid HTML, you could style both and make it work, buuut...

#

If you put everything inside a <button> or a <a> with all the style classes, it will probably work

#

unkempt bridge Aug 16, 2023, 3:52 PM

#

yeah what said porfirio is correct, even more so, you don't need to make a button to style an anchor, just style the anchor, they both have default HTML behaviors

gentle field Aug 16, 2023, 4:13 PM

#

@outer osprey @unkempt bridge hey thanks guys, I tried the same code but I still had the same issue. Strangely what fixed it for me was the "style" parameter inside the svg.

#

Now it's behaving as intended.

#

Looks like it was over-riding the style somehow, I got rid of it and still have the same result. 😅

#Struggling with making a button behave