<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 (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-transparent text-foreground bg-transparent transition-colors',
'hover:bg-foreground/10',
'disabled:opacity-40 disabled:pointer-events-none',
className,
])
"
>
<slot />
</button>
</template>
Update the import paths to match your project setup.
import Button02 from "@/components/ui/button-02.vue";
<Button02>Get Started</Button02>