<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 (it detects Vue automatically).
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.
<script setup lang="ts">
import { twMerge } from "tailwind-merge";
defineOptions({ inheritAttrs: false });
const { class: className } = defineProps<{ class?: string }>();
</script>
<template>
<button
v-bind="$attrs"
:class="
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,
])
"
>
<slot />
</button>
</template>
Update the import paths to match your project setup.
import Button01 from "@/components/ui/button-01.vue";
<Button01>Get Started</Button01>