 We might have a danger button for buttons with heinous consequences. So for now, let's just copy and paste this button that we already have. And rename it danger or danger button. I'm going to run down here and change this class to danger and we're good to go. Maybe give a better message like don't touch this. Now this is starting to look really nice on the usage side. We have a primary button and a danger button, which we can use directly without having to know all of the underlying implementation details. But we're starting to see a lot of duplication. So both of them are buttons. They both have this type attribute of button. And they both have this base class of button or btn. As we make more and more buttons, it'd be nice to isolate this duplication into one spot. Let's try that now. We'll take this danger button again, copy and paste it. And we're just going to call this button. Now for the sake of keeping things simple, we'll worry about this duplication later. And right now we'll just cut that whole class name and accept it in our spread props. Now we can change both the danger and the primary button to use our button component. And both cases remove this type attribute, which was duplicated. Now if we inspect these buttons, we should still see that type attribute added. Here we are. Because both of our specific buttons, primary and danger, are rendering out our generic button component here, which does apply that attribute. Along with everything else that we send along. So these class names. And then again up here with the children. We're composing these components to be concerned with only one part of this rendering. Now if we want, we can still use this component directly and add all of the attributes when we author. So we'll use that button component. We'll give it a class name of button, button info.