How to create reusable button component using sass and TypeScript

in this tutorial we will create reusable button component using SAS here I have created next project using typescript and opened it in my vs code before starting make sure your module resolution in TS config is not bundler or you might get errors in importing some packages if you run the project this is how it should look let's remove some of this default code I'm removing this code from page.tsx in app folder this is how it should look and to remove the default Styles open global.css and remove some of these extra code and then open page.module.css file since I have removed almost all of the code in page.tsx file I'll remove these classes also and to show my button in the center I'll add justify content Center now first install the packages we need in Dev dependencies first is SAS and other one is typescript plugin CSS modules which is optional but it is very helpful in autocomplete and giving error for wrong class names now in the app folder create a folder components usually I place components like buttons in a common folder and here create a button folder inside it create index.tsx and button.module.scss an index file create a react component name it button and then create an interface button props extend it from react.button HTML attributes HTML button element before adding props here open page.tsx file here add the button component so that we can see it on our home page make sure to import it this is how it looks and now we need to style it open index file in button component and here I'll add a button tag and since we have extended our props with this we will get all of the button default props like children and on click for this tutorial I'm only destructuring children from default props add it here like this this text is being passed in children so if I change it button title changes before adding props here I'll create some enums an app create a folder constants here create enum.ts export enum button variants here you can provide the variants you want to create then create an enum of button sizes I'll add small and large now open Button component and in props we add variant which is an optional prop and it will have one of the values from our variant enum then we have size also optional and it can be either large or small make sure to import these enums here we destruct variant and give it a default value of primary and then destruct size with default value of small these are the props we will be using for our button component now import styles from button module and in the class name we add multiple classes by using template literals first is styles.btn then we access class name from variant and size props like this by default the variant will be primary and size will be small although we have not defined these classes yet but there's no error this is because we need to add this package in our TS config file this step is completely optional but it's good as it might help avoid many errors and speed up development opents config file and in plugins add this package like this and we can see the errors as these classes are not yet defined so now open the scss file and add the BTN class outline color transparent border none cursor pointer padding 0.8 M vertically and 1.5 M horizontally border radius 4 pixels transition all 0.2 seconds now add a primary class make sure these names are same as the names we give in enums as we are using them to access the class in our button component like this here give your primary color as background color and then in color give primary text color add a hover selector to change the hover color this is how the primary button looks now we add a secondary class I'll copy this code and paste it here and change background and text color with secondary colors also change the hover color now I'll open our page.tsx file and in the button component pass the variant secondary and make sure to import the enum this is how the secondary button looks but if we see our scss file we have almost same code for both classes only the color codes are different so here we can create a mix in they allow us to Define styles that can be reused throughout our style sheet to create it we write it mix in then its name I'm naming it solid color you can name it anything it will get two arguments background color and text color copy this code and paste it here here we pass BG color and here text color for the hover color you can pass another argument but I'll use the SAS lighten function for a hover color here give BG color and here past the amount by which you want to lighten the color from primary class remove this and use include directive to include the mix in here pass your primary background and text colors if we make the button primary we can see that it's working now we'll include the mix in and secondary class as well here we pass secondary background and text colors let's add another button with secondary variant to add some space between these two I'll open page module CSS file and in justify content give space evenly now we need to create outline buttons and to do that I'll first create mix in it will take background color and text color as arguments background color transparent color BG color border 2 pixels solid BG color on Hover change background color and text color in our primary outline class we include outline mix in and past primary colors here we do the same for secondary outline class with secondary colors now in page.tsx I'll add some more buttons here give variant primary outline secondary outline now we have to add class for small here give font size one REM for large give font size 1.2 Ram add another button and in size prop pass button size dot large make sure to import these enums now I'll add a small button and for comparison provide same text and with this we have created a reusable button component now I want you to try to add other variants like rounded and share your Solutions in the comments sections Please share my video and hit the like button and subscribe to my channel thanks for watching

Channel: Esu Coding Tutorials

Views: 680

Keywords: typescript, sass, scss, react, next.js, reusable-button

Id: 51-wjfBzRLA

Length: 18min 23sec (1103 seconds)

Published: Sat Sep 30 2023