<Button02>Get Started</Button02>
npx @left4code/cosmic-ui-cli@latest add button-02
This writes the component and everything it imports, then installs the packages it needs. Run npx @left4code/cosmic-ui-cli@latest initfirst if you haven't already.
No state machine, no Frame - this is a plain styled button element, deliberately a different visual language from the default Button rather than another shape/color combination of it. Or copy and paste the code below by hand.
import { twMerge } from "tailwind-merge";
function Button02({ className, children, ...props }: React.ComponentProps<"button">) {
return (
<button
{...props}
className={twMerge([
"px-6 py-2.5 font-medium cursor-pointer border border-transparent text-foreground bg-transparent transition-colors",
"hover:bg-foreground/10",
"disabled:opacity-40 disabled:pointer-events-none",
className,
])}
>
{children}
</button>
);
}
export { Button02 };
Update the import paths to match your project setup.
import { Button02 } from "@/components/ui/button-02";
<Button02>Get Started</Button02>