Everything you didn't know you need to know about buttons

if you wanted to just teach html, dont put it in javascript...

not knowing button is type submit by default gave me so much headache

Wow,
thanks man 👍👍

I like the part where he says "type equals butt..."

I already knew this but learned it the hard way unfortunately. Thank you for for evangelizing this knowledge for everyone. Cheers!

Outstanding. I love the style of demonstrating the good and the bad. You saved a lot of trial and error.

Literally amazing man. One of the best tutorials I've ever seen. It's humbling because who thinks about buttons twice? But there's so mucho to know

what if you add role="button" to an anchor tag?

💪

Can you add back the subtitles like before? I really appreciate them

Great video! 👏

Why not use <Nav> ?

I think that this kind of merge of buttons and link are not good mainly because it blurs distinctions between these two tags. In real designing scenarios there should be clear styling diference between how button and how link looks like so user know what to expect. If its button it will perform some kind of action, as for link it expects routing behaviour. So in your case you would need to pass variant to your merge button. But that button variant could be applied on both elements wich will cause undesired styles for one. It is much more clear to have buttons separetad from links since in its nature they are not same html tags. Besides it would be weird from dev perspective to see button with hrf atribute. We should keep our code ease to read

Nice! That was helpful, man!

who the fuck uses a div as a button

Nice frontend tip

Quality, pure quality. Subscribe

all: unset blew my mind, can't believe this is the first time I'm hearing about it

Was watching your video and was whole time thinking, "why not just make it a web component?". Then you actually did exactly as I thought lol.

Amazing

I learned something new today thank you

Simple with good explanation. My favourite kinda Ytber.

Great content, as all other channel videos

...so no need for the clickbait face expression in thumbnails 😜

Bruh
Now we have problem
Now that is not working
Now this is broken.
Why do you touch it let it be.

Love this so much ❤ all the details people usually overlook or don’t talk about

Prefer outline-color:transparent; over outline:none; better for high contrast themes.

Looks like I have a new channel to binge

Do people actually still use the native submit functionality?

This was great Steve. Thank you 🙏🏼 I think for things with anchor tags we should probably use buttons for accessibility purposes. I love the one component you showed to render the consistent button!! Although our designers tend to have a few button variations so would be good to see that as well. Would love to have you on my channel for a collab once. Thank you again!

A lot of these things are easy to forget when you're in a hurry, which is why a11y plugins for eslint and stylelint are essential to me. Let's build a more accessible web together!

I hate that I learned so much about buttons from this video. Thanks, Steve. I hope you're happy.

Also, keep up the good work 😊

Subscribed.

If I see one more job application project where people NEST a <button> and an <a> I'll cry. W3C standards exist for many reasons. Mixing conflicting interactive elements makes my brain hurt.

Holy sheee, this is quality content. I have watched few of ur shorts before, but after this video i was 100% sure i wanna follow u constantly.

if (event.key === Space || Enter) is borked logic. Just saying

OMG. It's a gem. So concise and meaningful. Thanks a lot to the author.

You're absolutely nailing this format my guy. Keep em coming!

Another discussion is on button disabled state and the color contrast debate around it.

Another thing to remember you can’t disable links. All you can do is to hide them.

That MyButton component is actually really nice! Never thought of that. My rule of thumb is that a button is for interaction for things that happen on the current page only, anchor tags are for navigation only.

I love this, thanks Steve

Great unknowns to know for me 😀 Thanks a lot for these tricks

lol F accessibility use your div my man

The style of the code and browser window is LOVELY

You are like Matt Pocock but for javascript 😀 Great content

Also good to look into the other focus styles! There are focus-within and focus-visible. Good for other things.

instantly subscribed, best presented web dev video i’ve ever seen

Thank you for all your videos, short and so usefull !