Instructor: 0:00 Let's take a look at our hardcoded buttons and try to identify common classes. Looking at the code for our first button, which is this one here, classes like the first one, rounded-md, are not likely to be common to all.

0:12 It's probably a Shape class here. Similarly, background classes are likely an Impact prop, the padding x and y, probably a Size, etc. So far looks like none of these classes are common to all buttons.

0:25 Next, we have font-semibold. To me, it looks like every single button has the same font-weight. Let me highlight that class. You can see that when I highlight one, it highlights the other instances of that. It looks like every single button, yep, has that font-semibold class. I will copy this, and in our button components, I will store in the baseClasses this first fontSemibold class.

0:52 Going back to the hardcoded buttons, text color, shadow, hover, background color seem very specific to Impact. Focus classes though, focus-visible, outline-none, and then ring-2. If we take a look at the focus styles, you can see that every button has very similar focus styles, using the ring utilities.

1:14 There's a good chance that we can grab focus-visible, outline-none to undo the default styles, and then ring-2, ring-indigo-500, ring-offset-2, at least.

1:26 Then we have these active styles and disable styles, so you can see translate-y-px, and this is the little spring effect going down by one pixel that you can see when we click or hit the space bar when focused. Again, all the buttons have that effect.

1:42 We're going to not only select all these classes, but also the active class, the disabled class, and the disabled, opacity. I will select all these classes here, and add them alongside our baseClasses. We can scroll down here, and down here on our className attribute, I want to for now pass just the baseClasses.

2:07 You can see the buttons have changed slightly. They have the semibold font weight, the little translate effect on Active, and they should have a blue ring outline when focused. Not looking great just yet, but this is a great starting point. Now we're going to start implementing the individual styles based on each variant.