From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Creating button component

Creating button component - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Creating button component

“

Now, I will create the button component. So I will create the file button.jsx inside the UI folder and then I will create the function, the button itself. I will say export default function button. Now let me go to the product card component and copy the button tag and paste it over here. Now we will take the values for type, onClick, className, children in props. So let me receive the props over here. I will say type is equal to button, then onClick, className, children and props. So the props will contain the rest of the props passed as we are using the rest operators with it. Now let me import the cn function from utils and let me give the values to the button tag. I will say type is equal to type, class name is equal to cn, custom btn comma class name, on click, the on click and here I will say the rest operator and props. Let's save this file and go to the product card component and replace the buttons with a custom button component and let me remove the custom BTN class as we…

Contents