<Button01>Get Started</Button01>
npx @left4code/cosmic-ui-cli@latest add button-01
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 Button01({ className, children, ...props }: React.ComponentProps<"button">) {
return (
<button
{...props}
className={twMerge([
"px-6 py-2.5 font-medium cursor-pointer border border-primary text-primary bg-transparent transition-colors",
"hover:bg-primary hover:text-primary-foreground",
"disabled:opacity-40 disabled:pointer-events-none",
className,
])}
>
{children}
</button>
);
}
export { Button01 };
Update the import paths to match your project setup.
import { Button01 } from "@/components/ui/button-01";
<Button01>Get Started</Button01>