I had a working button component that was able to override the default button for a while, however it randomly stopped working recently and I can’t work out why.
If I use it as a custom component it renders correctly when I drag it into the editor, however if I name it “Core:Button” and set override to true it does not.
Strangely, it displays the "Inside the custom button" string from the examples below inside the button but none of the styling applies nor do the inputs appear in the editor.
When overriding button component:
As a custom component:
Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.
Builder content link
Builder public api key
42af8af65aa7499b99e3c273c4769b3b
What are you trying to accomplish
Override the default button component
Code stack you are integrating Builder with
Next.js
Reproducible code example
//button component
import React from "react";
export interface ButtonProps {
variant: "black" | "red" | "green";
buttonText: string;
size: "sm" | "md" | "lg";
url?: string;
}
const Button: React.FC<ButtonProps> = ({ variant, url, size, buttonText }) => {
const buttonVariants = {
black: "bg-black text-white",
red: "bg-red-500 text-white",
green: "bg-green-500 text-white"
};
const buttonSize = {
sm: "px-4 py-2 text-sm",
md: "px-6 py-3 text-base",
lg: "px-8 py-4 text-lg"
};
const buttonVariant = buttonVariants[variant];
const buttonSizeVariant = buttonSize[size];
return (
<a href={url || ""}>
<button className={`${buttonVariant} ${buttonSizeVariant} rounded-full`}>
{buttonText}
Inside the custom button
</button>
</a>
);
};
export default Button;
builder registry
//builder-registry.ts
import dynamic from "next/dynamic";
import { builder, RegisteredComponent, withChildren } from "@builder.io/react";
export const customComponents: RegisteredComponent[] = [ {
component: dynamic(() => import("./components/Button.component")),
name: "Core:Button",
override: true,
inputs: [
{
name: "variant",
type: "string",
defaultValue: "black",
enum: [
{ label: "Black", value: "black" },
{ label: "Green", value: "green" },
{ label: "Red", value: "red" }
]
},
{
name: "size",
type: "string",
defaultValue: "lg",
enum: ["sm", "md", "lg"]
},
{
name: "buttonText",
type: "string",
defaultValue: "Click me"
},
{
name: "url",
type: "string",
}
]
}],
