Svelte Tutorial for Beginners #22 - Custom Button Component

Key Takeaways

or rather my friends so now I'd like to create a custom button component so that this looks a bit better than this default button right here and then we can reuse that button component wherever we need it in the future as well so we can make this button customizable and we could maybe passing some options as props maybe so let us first create this new component inside the shared folder and we'll call this button dot svelte okay so inside here we need a script because we're going to accept some props later on we also need a style tag at the bottom because we're going to style this later on and we also need some kind of template now the template itself is going to be simple it's just going to be a button and then inside we're going to render the slot and remember a slot is a way to pass data into a component so when we use the component in the future then we can pass in whatever we want to be inside that button is content now that could be icons or it could be text or it could be even HTML so we have this slot set up now and I'd like to accept also a few different props no I'm going to explain these in a second but first let me say export net type and we'll set a default value as primary so this right here is going to be the type of button so it could be primary or secondary maybe and then we can apply this as a class to the button itself and do a selector for primary and secondary and style those differently so that's the first thing we're going to except we're also going to accept a prop called flat and that is going to be a boolean either true or false so if it's true it means it's going to be a flat button if it's false it means it should be a little bit away from the screen so maybe apply a box shadow to it so we could apply a conditional class of flats to the button and style that differently dependent on this and then finally I'm going to say exports let's and inverse and set that equal to false and again a boolean true or false if it's inverse what I will do is give it maybe a white background or transparent background and a border instead of a colored background and we'll see that later on but for now let's do this thing first of all so I'm going to say that the class of this is going to be equal to the type so this is not a conditional class we're not saying class type is equal to some kind of evaluation we're saying the class is actually going to be the type that we get right here so that could be primary if we pass in primary and that's the default one as well or it could be secondary if we pass in secondary and we could then style primary and secondary different so let's do a few styles for now anyway so I'll say first of all the button is going to have a border of zero and then we'll say the cursor is going to be a pointer so a little hand and a user knows they can click on it then a border radius to soften the corners of six pixels and then we'll do a padding of eight pixels top and bottom and 12 pixels left and right and then we'll also do a font weights of bold and then we'll do a box shadow this gives it a bit of a 3d effect and we'll say one pixel to pixel three pixel rgba and it's going to be zero zero zero which is black and an alpha Channel or a positive nine point two so a faint shadow now what I'm going to do for now is import this bottom into the form so we can see what it looks like so far so let me go to the form and import it at the top so I'll say import and it's going to be button from and we want to go up a directory first of all because we're currently in components so dot dot forward slash to jump out of that directory then into shared then forward slash button dot spelt and now we can output that down here instead of this button so button like so and remember we're passing content which will be the slot right here so whatever we pass in between the opening and closing button tag will appear where the slot is right here so I'm going to say add Paul like so now if I save that and prove your we should be able to see this new a button doesn't look great at the minute and we have this random closing angle bracket which was sought in a second as well but we are gonna add styles to this as we go forward now let me now just go to the button and find the angle bracket and I can't actually see it there so let's check the form and yep it's right here okay so save that and preview again and that looks better okay so now let's style up the primary class and also maybe a secondary class so I'm gonna say the primary is going to be a background color off and it's going to be that red color from before which was d9 1b for two like so and then it's also going to have a text color of white so that's the primary one now the secondary class is going to have a background of a different hash which is 4 5 C 4 9 6 and that's a greeny color and the color of the text is also going to be white in this case so now if we have a type of primary the class is primary and we're going to style it like this and we should see a red background button with white text which we do and if we give this a class of secondary which we'll do now we're passing that as a prop so we'll say type is equal to secondary like so now we're overriding that value so type is now second ray the class is therefore secondary and we style it like this so if we preview now we can see it's green okay so we're passing in options to the bottom okay so what else can we do well we have this thing right here we're seeing flat is false and we're going to output a conditional class based on this billion so I'm going to say class and then flats is equal to flat so if this boolean right here is true then we're going to add a class of flats to this button if this is false then we're not going to add a class of flats all right so if we do have a class of flats all we're going to do is take away the box shadow so I'll say box shadow is none now by default flats is false so we won't get that class applied so it should look the same if we go to add new poll but if I now say that I want flat to be true so flat is equal to true on this button now we can see that this is flat because we apply the flat class I can open this up and inspect and we can see this flat class right here awesome okay then so back in the button let's do this final thing inverse and we're going to do exactly the same as we did here so class and then inverse so we're only going to apply this class of inverse of the inverse variable is true currently it's false so it won't apply that class but if it was true it would apply that class now the inverse class is basically it going to reverse the colors so instead of the background being this color the background would be white and the text color would be this color and also we could apply a border of this color as well now we need to apply different inverse classes for each one of these because the colors are different so let's do that I'm gonna say primary dots inverse so if we have both of those classes then the color of the text is actually going to be this thing right here which was the background before and the background oops the background this time is going to be a white and also we'll do a border and that is going to be two pixels solid and we're going to do that red color again okay so that's the primary inverse now let's do secondary dots inverse and this time the color of the text is going to be this green color right here so let's copy that dude and paste it right here and we want the background again to be white this time because we're inversing those things and then we also wants a border of two pixels of the button solid and it's going to be this green color again okay so now we shouldn't see any difference when we go to the bottom because we don't have that inverse class but if I now say over here that inverse is equal to true then it's going to inverse the colors and we should see something like this instead so we have a bit of flexibility at with our button we could pass in secondary or primary and we see different styles we can pass in inverse or flats as well and in fact I'm gonna take this off because I don't want this to be inverse I want it to be primary but I don't need to explicitly say that here because the default value is primary up here so I just want this to be flats save that preview at new pole and that looks pretty good in fact I think I'd like to make this green so let's say actually that the type is going to be equal to secondary because we're going to use the red button later on for deleting poles so we use green for adding red for deleting save that and the view again and there we go Wow looks pretty good to me so now we have our custom reusable button component and we're going to use this later on in different components as well next up we're going to add a little bit of custom form validation to our form over here when we try to submit