How to add varients to this?
Answered
WhyFencePost (Ping Reply) posted this in #help-forum
function MyButton({variant: "homepage" | "funnel", children}) {
return (
<div className="bg-blue-300"><h1>{children}</h1></div>
);
}This throws an error of
Identifier Expected, and I dont know how to fix that, I want a option to add a varientAnswered by riský
more like:
reactnode is imported from react, but you could use propswithchildren or just any
function MyButton({ variant = "a", children }: { variant: "a" | "b", children: ReactNode }) {
return (...)
}reactnode is imported from react, but you could use propswithchildren or just any
6 Replies
@WhyFencePost (Ping Reply) tsx
function MyButton({variant: "homepage" | "funnel", children}) {
return (
<div className="bg-blue-300"><h1>{children}</h1></div>
);
}
This throws an error of `Identifier Expected`, and I dont know how to fix that, I want a option to add a varient
{ variant }: { variant: "a" | "b" }
{ variant = "a" }: { variant: "a" | "b" } if you want a default variant
so { variant = "a" }: { variant: "a" | "b" }, children in the top?
@joulev { variant }: { variant: "a" | "b" }
I still can not get this line to work:
function MyButton({{ variant = "a" }: { variant: "a" | "b" }, children}) {I would take a look at this: https://ui.shadcn.com/docs/components/toast
Look in the installation instructions see how they set it up.
const toastVariants = cva(
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
{
variants: {
variant: {
default: "border bg-background text-foreground",
destructive:
"destructive group border-destructive bg-destructive text-destructive-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)Look in the installation instructions see how they set it up.
@WhyFencePost (Ping Reply) I still can not get this line to work:
`function MyButton({{ variant = "a" }: { variant: "a" | "b" }, children}) {`
more like:
reactnode is imported from react, but you could use propswithchildren or just any
function MyButton({ variant = "a", children }: { variant: "a" | "b", children: ReactNode }) {
return (...)
}reactnode is imported from react, but you could use propswithchildren or just any
Answer