The problem with using <button>, especially the <input> button types, is that it comes with a LOT of baggage. Safari on iOS, for example, will override styles regardless of what they are with iOS button styles resulting in a less than attractive UI/UX. One could even argue that iOS buttons are downright ugly. a tags, on the other hand, can be styled however the designer wants. But even a tags also have baggage in that preventDefault() has to be called in Javascript (or return false; for the lazy) when handling the click action directly. Failing to do so causes the browser to add # to the URL and push the current page to the browser history back stack.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
The problem with using
<button>, especially the<input>button types, is that it comes with a LOT of baggage. Safari on iOS, for example, will override styles regardless of what they are with iOS button styles resulting in a less than attractive UI/UX. One could even argue that iOS buttons are downright ugly.atags, on the other hand, can be styled however the designer wants. But evenatags also have baggage in thatpreventDefault()has to be called in Javascript (orreturn false;for the lazy) when handling the click action directly. Failing to do so causes the browser to add#to the URL and push the current page to the browser history back stack.And problem solved there and it has good support.
If this has been stopping you from using a
<button>when you should then please start using them now.Please read this article on why you must use a button as I would hope it will stop you using a pattern we haven't needed for a long time!
😂 I like this guy!
You solved it like "There's your answer, no more excuses"
Take no prisoners! 🤣