Button vs Link with role=button

[pachacamac]

I found that a button has a margin bottom but a link with role=button does not.

e.g.

<button>I have margin bottom</button>

<a href="#" role="button">I have no margin bottom</a>

Is this wanted or a bug?

[lucaslarroche]

Hi @pachacamac,

TL;DR: It's a feature, not a bug.

Actually both <button> and <a> are inline elements.
As both can be inside a <p>, we should not really define a margin-bottom.

But Pico is sometimes slightly opinionated 🙂.

I considered that:

• Links are most likely inside a <p> and don't need to have a margin.
• Buttons are most likely outside of a <p> and therefore need a margin-bottom in the context of a form.

I'm open to suggestions.

[pachacamac]

Hey @lucaslarroche,

Thanks for the explanation. Even though personally I would probably still prefer no difference, it makes sense from that point of view.

I would just add it to the docs because there it sounds like they're 100% interchangeable:

Buttons are width: 100%; by default. Use <a role="button"> if you need an inline element.

[speg]

Yaaaaaas 🙌🏼 I came here for this and am happy to see it already exists.

I had two buttons and an anchor in a grid, under a textarea. It looked so silly because the one anchor had such a larger height. I had to use an anchor because I wanted to make use of target=_blank.

To work around this, I needed up converting it to a button and using onlick=window.open...

Reading the explanation here, I think it makes sense – but like @pachacamac said adding it to the docs to explain it would give that reasoning before trying to fight with it.