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

[@Steve8708]

All the code examples, as well as more detail on everything discussed here, in my full article: www.builder.io/blog/buttons

[@StephenGillie]

Go team Steve!

[@dotterel]

I've been studying CSS for a couple years now and this is hands down the best video I've seen. I love how you went through each one and explain when and why we use each element. I have a lot of trouble learning when people don't explain 'what does this allow us to do and what are we not able to do without it?' You really hit the nail on the head here. I feel like I understand the reasoning behind all 3 cases after just 1 watch, that's pretty incredible.

[@rdalago]

I've been learning A LOT from you! The way your videos are short yet delivering a deep explanation is spot on for me! Thank you.

[@omersoncruz1081]

agreed. Short, concise, and full of practical knowledge.

[@Htbaa]

For accessibility try not to reinvent controls unless you really have to, but make sure you’re making it accessible! When clicking on this video I was afraid accessibility would be neglected. Happy to see it’s the focus of the video.

[@8koi245]

The style of the code and browser window is LOVELY

[@JEsterCW]

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.

[@hnccox]

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.

[@khairulhaaziq2332]

Steve your teaching method is the most comprehensible i've come accross. Please continue making these! I really hope you release some more basic stuffs also

[@nicolasguillenc]

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

[@NoName-1337]

Nice, didn't know about all:unset. Thank you!!!

[@AmxCsifier]

Just great and useful content, no filler no spam no nonsense... This is why I open youtube This channel deserves at least 1 mil subs, I hope you get there someday

[@peteryates308]

As someone who builds accessible websites, it's easiest to just stick to the intended purpose of the element. Buttons submit (or reset forms), anchors create hyperlinks. They are both accessible and understood by just about all assistive software and have worked in the same fashion for 30 years. Yeah, if you're building something fancy then adding custom functionality to role=button buttons is fair, but I see so many people starting from scratch without realising they've lost accessibility features along the way.

[@SzaboB33]

Great video, I did not know I needed this but the a vs div vs button problem was quite frequent for me and this video cleared things up

[@uscjake868]

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

[@kenfrostyypaws9113]

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

[@yangenmanuel2659]

I just discovered this channel and I need to watch all of your videos!!!

[@gnaneshwarrao174]

Thank you so much for sharing. I always was fumbled in this conundrum and now you gave a solution with your pattern. Thanks a ton!

[@umutelicabuk6834]

I usually don't comment but now I have to. Steve - your delivery is among the cleanest, most concise yet deep teaching styles I have ever come across. You definitely need some more zeros behind that sub count!

[@aPinix]

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

[@shakapaker]

Oh my god that way of explaining things it's just amazing

[@joostschuur]

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 😊

[@srkuleo]

Well this was way more useful than I thought it would be. Really nice trick with conditional.

[@re.liable]

Just starting to watch. The "rule" I try to remember is: anchor for navigation, button for interaction The styling bits are the reason why a CSS reset is necessary for me. The conditional rendering is nice I suppose

[@zombiefacesupreme]

You know someone has only coded in React when they make fun of the idea of "button"

[@mervinmarias9283]

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.

[@loia5tqd001]

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

[@tariksohan8993]

Simple with good explanation. My favourite kinda Ytber.

[@yuryitikhonoff9631]

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

[@amitse]

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.

[@sveinnthz]

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

[@mattshnoop]

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

[@dinaiswatching]

Thanks, that sure was helpful. Since I've been using qwik, it's nice to know the nitty and gritty details of some html tags

[@joemathan6101]

Wow wow wow!!! Appreciate your efforts on explaining minor details

[@cotneit]

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

[@StephenGillie]

Go the other way - use an A link with Javascript onclick. This is great for SPA page rewrites.

[@duccdefgab]

i've learned so much in just 4 minutes. Great content 👏👏👏

[@Biowulf21]

Looks like I have a new channel to binge

[@YashKadamYT]

This is so concise & useful! Thanks a lot for sharing!

[@lukecartwright613]

Super explanation video! This was brilliant! Thank you for sharing

[@lamarredavy8145]

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

[@ivankraev4264]

You are like Matt Pocock but for javascript 😀 Great content

[@jamiroquaiordie]

May I just discovered my new favourite full-stack dev youtuber? I guess I did

[@godofwar8262]

More videos please

[@thedigitalceo]

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!

[@webdevschool6597]

Fantastic tutorial, thanks a lot man.

[@SushilKumar-ig8ls]

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

[@jitxhere]

Wow. Amazing content Steve

[@BritainRitten]

Excellent video, thanks for explaining.

[@RicardoValero95]

This is great Still I’d love to see the div button fully reimplemented

[@berightben8318]

Quality, pure quality. Subscribe

[@ГерриПитт]

Nice! That was helpful, man!

[@Ismail-hq8cq]

Is this a coincidence, or does the youtube algorithm know what is in my mind ? I wanted to learn how to make a text clickable, and this video is the first video in my feed.

[@youngnwadike5312]

I love this, thanks Steve

[@mohamedcherif9878]

I learned something new today thank you

[@FunctionGermany]

awesome tutorial!

[@EthanStandel]

I think it would have been worth it to note that you probably want :focus-visible and not just :focus styles.

[@Steve8708]

Ah yes! Just learned about this after posting the vid, but updated the blog post to use focus-visible

[@EthanStandel]

@@Steve8708 nice! Otherwise, this was excellent and something that everyone building a component library should watch just to see the base considerations of things you might want to call "simple"

[@Noam-Bahar]

Incredible video 👏

[@JenilCalcuttawala]

Great video! 👏

[@tounsoo]

Typescript version of this is super messy. You have to use polymorphic methods to get the correct type inferred and its a pain. After experiencing, I now like to separate them into and for better and cleaner type.

[@pizzasteve-is-here]

awesome, keep going

[@mahadevovnl]

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

[@igigloo]

what about input type=button? is there any difference with a normal button type=button?

[@nurhamsah_tech]

Wow, thanks man 👍👍

[@TheVralapa]

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

[@kittyrah2800]

Why not use ?

[@ricko13]

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

[@TheBaca91]

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

[@vinaciotm]

all: unset !!! Wow nice 👍

[@frontend_ko]

Nice frontend tip

[@kingl5519]

Subscribed.

[@ShaharHarshuv]

Do people actually still use the native submit functionality?

[@arianj2863]

Why not wrap a button with an anchor tag?

[@6644guilherme]

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

[@mfkfawas5157]

Amazing

[@toby_cm]

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

[@ricko13]

💪

[@Marcus-cf2li]

Great

[@p0358]

It’s a good video, but in a few places at the beginning your audio was cut a bit badly, some of the words you spoke were cut off in the middle, making it a bit awkward to listen to

[@tommy_corey]

Wow I didnt know pewdiepie knew how to code

[@shutdow88]

Great content, as all other channel videos ...so no need for the clickbait face expression in thumbnails 😜

[@edwardmacnab354]

you guys always end up making things way more complicated than it needs to be . I don't mean YOU as a teacher , I mean the designers of this crap !

[@jeramymorrill2729]

Switching the tag type behind the component is much to magic. Unless you work totally alone, you have created a scenario where someone using your component will think they are getting a button and may be getting an anchor. Components should be simple, pure and never contain magic.

[@anuvette]

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

[@Unc3]

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

[@MaxFunoff]

MyButton component like this example is an unnecessary abstraction...

[@unifiedcodetheory8406]

All of the issues you mentioned with using the button tag are actually non-issues. Especially since you're using react, you would never just use a button tag anyway. You should make your own button components for coupling styles and functionality.

[@termisher5676]

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

[@Nodsaibot]

lol F accessibility use your div my man

[@lescobrandon2202]

Buttons suck.

[@WabuhWabuh]

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