Hacker News Reader

Comment by Vinnl | Hacker News Reader

That doesn't quite get you there, though. For example, it doesn't submit a form it is contained in when clicked.

There are some use cases where a <button> won't work (eg if you want to use flexbox), but even then I'd first re-evaluate how important that use case is, then reach for a properly tested library to turn another element effectively into a button [1], and only then try to implement it myself and probably forget some built-im functionality, breaking things for users and costing me lots of time.

[1] https://react-spectrum.adobe.com/react-aria/useButton.html#c...

View on HN

Flexbox not working in buttons is news to me (and I use display: flex and display: grid all the time). I just tested in both Chrome and Firefox and display: flex works just fine inside a button.

I think there was a bug in Chrome a couple of years ago where they incorrectly denied some element the ability to be flex containers (<fieldset> was a really annoying case of this) but I think that is fixed now.

The only case that I can think of where you can’t use a <button> is if you have nested interactive elements (a button within a link/button). There are sometimes ways around that (absolute positioning of the outer link/button) but sometimes there aren’t and then you need to re-implement a fake button from a <div>.

Oh hmm yeah, you're right, I must've mixed it up with another example in my mind. Ah well, replace that with your example in my comment, and the point stands :)

Indeed, I just remembered I actually have a SO answer where a “fake” button is one of the solutions ( https://stackoverflow.com/a/55155649/2444959 ). This question was about having an enabled button inside a disabled fieldset.

I actually do think that use cases are rare, and when you need a fake button, there are probably better solutions (in the SO question, the question author probably just wanted <details> and <summary>) but—though rare—these cases do exist.

> That doesn't quite get you there, though. For example, it doesn't submit a form it is contained in when clicked.

Er sorry, I meant type="button" for both. Neither submit a form or do anything other than show the default interactive styles without JS.

> There are some use cases where a <button> won't work (eg if you want to use flexbox)

I’m not sure what you mean, and having a hard time imagining what you might mean. Can you elaborate?

My example was wrong, your sibling comment [1] provided a better one.

[1] https://news.ycombinator.com/item?id=33173406

Reply on news.ycombinator.com