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