The answer, of course, is yes. So let's do that now. I'll create a new file. And this will be our app component. And I'll paste that in. And instead of saving it to a variable, we will export it. Okay, but now don't forget, we need to import AppButton here. Import AppButton. And I'll add the extension. Great.

So for example, maybe I could have a primary button. And that would be, say, blue. All right. Let's see how we can do that. The first step is to visit our component. And we can declare which props can be passed in by using the props object. We call that propType. And it should be a string. So this is where we specify the data type. Because remember, if you want, we could accept an object or an array or a boolean.

But they are different things. OK. So the type is string. And the default value for it is primary. That's how we can handle this. So if I come back and refresh, now the type is primary. But if I switch back, and this time we set a type of, how about secondary? Well, it should override the default. And it does, as you see there. Cool.

And it does, as you see there. Cool. So now our component is accepting data from the outside world. That's how I think of it. Now, let's use it. And it's very simple. And I'll show you a little trick. When you're setting class bindings, you can use a string, you could use an array, or you could use an object. Let's take the object approach.

could use an object. Let's take the object approach. So I will cut all of this out, replace it with an object. And now the key of the object will be the class names. So I could paste all of those in there. And then the value would be a Boolean. And if that Boolean is true, we add the classes to the element. If the Boolean is false, we do not. So for example, if I set true here, have a look. If I come back and refresh, I should still see my gray button.

Or, of course, if we don't pass in any type, it will still default to blue. Okay, so now if you want, you could set the state of the button from the outside world. Right now, we had processing as a simple data prop. But in real life, you might pass that in like this. I will now make processing a boolean. So we'll say type of boolean, default of false. By default, it's not processing. But what I do want you to notice is that in your template, nothing changes here. If you need to access a prop, reference the name. Or if you need to instead access a data property, again, just reference the name.

If you need to access a prop, reference the name. Or if you need to instead access a data property, again, just reference the name. It's the exact same system. So let's do this. Let's add a class of isLoading if the button is currently processing. Okay, so now we'll switch back to our template here. And I will set processing to true. And again, you can imagine binding this to the result of some kind of Ajax call. Okay, so if I switch back and give this a refresh, we should see a class of isLoading. And we do.

Okay, so if I switch back and give this a refresh, we should see a class of isLoading. And we do. But if I set this to false, then we will not see that class. And just to drive this home, let's see if we can quickly find a CSS loading spinner. So I will Google that. How about this one from Steven Wagner? Okay, yeah, something like that. So let's grab all of that. And I'll just put it in line here. And it looks like we need a class of, well, let's change this to isLoading.

And I'll just put it in line here. And it looks like we need a class of, well, let's change this to isLoading. Okay, so now let's set it in a state of processing. Cross our fingers and give it a refresh. And there we go. Okay, cool. So now the only remaining step is to hide the text when it's processing. So I could say up here isLoading. Let's just set the color to transparent. That would be one way to deal with it.