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

Find all the code examples, as well as more detail on everything discussed here, in my full article: www.builder.io...
#javascript #html #css #webdev #react

[@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.

[@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.

[@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.

[@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

[@yangenmanuel2659]

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

[@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.

[@aPinix]

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

[@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

[@uscjake868]

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

[@zombiefacesupreme]

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

[@yuryitikhonoff9631]

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

[@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

[@duccdefgab]

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

[@mattshnoop]

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

[@Biowulf21]

Looks like I have a new channel to binge

[@jamiroquaiordie]

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

[@cotneit]

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

[@lamarredavy8145]

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

[@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.

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

Nice! That was helpful, man!

[@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!

[@BritainRitten]

Excellent video, thanks for explaining.

[@RicardoValero95]

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

[@webdevschool6597]

Fantastic tutorial, thanks a lot man.

[@mohamedcherif9878]

I learned something new today thank you

[@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 👏

[@berightben8318]

Quality, pure quality. Subscribe

[@JenilCalcuttawala]

Great video! 👏

[@pizzasteve-is-here]

awesome, keep going

[@nurhamsah_tech]

Wow, thanks man 👍👍

[@ShaharHarshuv]

Do people actually still use the native submit functionality?

[@arianj2863]

Why not wrap a button with an anchor tag?

[@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

[@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.

[@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.

[@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

[@kingl5519]

Subscribed.

[@6644guilherme]

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

[@vinaciotm]

all: unset !!! Wow nice 👍

[@frontend_ko]

Nice frontend tip

[@mfkfawas5157]

Amazing

[@Marcus-cf2li]

Great

[@tommy_corey]

Wow I didnt know pewdiepie knew how to code

[@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.

[@MaxFunoff]

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

[@ricko13]

💪

[@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.

[@Nodsaibot]

lol F accessibility use your div my man

[@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.

[@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

[@igigloo]

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

[@Unc3]

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

[@ivankraev4264]

You are like Matt Pocock but for javascript 😀 Great content

[@NoName-1337]

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

[@godofwar8262]

More videos please

[@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

[@lescobrandon2202]

Buttons suck.

[@anuvette]

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

[@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 😊

[@toby_cm]

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

[@tariksohan8993]

Simple with good explanation. My favourite kinda Ytber.

[@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 !

[@lukecartwright613]

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

[@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.

[@termisher5676]

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

[@shutdow88]

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

[@TheVralapa]

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

[@StephenGillie]

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

[@WabuhWabuh]

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

[@SushilKumar-ig8ls]

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

[@sveinnthz]

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

[@heyjitendra]

Wow. Amazing content Steve

[@ricko13]

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

[@youngnwadike5312]

I love this, thanks Steve

[@kittyrah2800]

Why not use ?

[@FunctionGermany]

awesome tutorial!

[@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!

[@loia5tqd001]

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

[@YashKadamYT]

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

[@joemathan6101]

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

[@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

[@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!

[@srkuleo]

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

[@kenfrostyypaws9113]

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

[@8koi245]

The style of the code and browser window is LOVELY

[@shakapaker]

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