Create a Reusable Button Component with Svelte

Instructor: [0:00] We will start off with a default button component. This default button component contains a button tag with hello world as its content, has an OnClick event handler and some styling. Now, let's create another component called BlueButton.

[0:15] Inside this component we will import our default button. Let's import our BlueButton component into our app.Svelte file and create the component tag for it. Open our BlueButton component again, and let's create the style tag for this button with a background color of blue.

[0:34] Notice, this had no effect on the button at all. Our BlueButton still looked the same as the default button. If we inspect the BlueButton, we will notice only the styles from the default button are applied. This is because in this component, there are no button tags directly.

[0:51] We can change the button specifier in our style tag to :globalbutton. This will have an effect on our button, but you will also notice it has an effect on the default button component.

[1:06] However, we should note this is only true when the property we are changing in the style is not already being used in a default button component style, as this would have a more specific class assigned to it, because Svelte generates unique classes for component styles.

[1:23] Let's wrap our default button tag inside of this component with a spam tag with a class of blue-button. Now we can update our styling by adding .blue-button before the :globalbutton. As you can see, only our BlueButton component is affected by this.

[1:44] Inspecting the component in the browser's developer tool, we can see that Svelte has created a class that is more specific than the original one that default button component had before. Let's try and update the content of the button by adding some text in-between the default button tag inside of our BlueButton component.

[2:03] No change can be seen. Let's open our default button component and wrap our hello world content with a slot tag. Now, the content we entered between the default button tags in our BlueButton component is showing.

[2:17] Create the script tag inside of our default button component and let's create an exported variable called button action, which will be an arrow function with an alert. Now, let's replace the arrow function we have inside of the OnClick handler with a new button action variable.

[2:34] If we click any of the button components, we will see the same alert popup message. Let's update our BlueButton component by adding a button action property with an arrow function to the default button tag inside of this file. Now, if we click our default button, we will see the original message still available. If we click on the BlueButton, we will see a new message.