<ButtonGroup>
<ButtonGroupItem>Day</ButtonGroupItem>
<ButtonGroupItem>Week</ButtonGroupItem>
<ButtonGroupItem>Month</ButtonGroupItem>
</ButtonGroup>
npx @left4code/cosmic-ui-cli@latest add button-group
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 here - it's a plain layout wrapper with a shared border and dividers between items (divide-x), not the full Button component with its own Frame border underneath, which would clash with a shared outer border. Vue SFCs can't export multiple components from one file, so Button Group is a folder instead of a single file — copy all of it into your project.
<script setup lang="ts">
import { twMerge } from "tailwind-merge";
// See BreadcrumbRoot.vue: without this, Astro's slot="preview" prop (used
// to route this island into a named slot) falls through onto this root DOM
// node inconsistently between SSR and hydration, and Vue flags it as a
// mismatch on every demo page.
defineOptions({ inheritAttrs: false });
const { class: className } = defineProps<{ class?: string }>();
</script>
<template>
<div
role="group"
:class="twMerge(['inline-flex divide-x divide-primary/30 border border-primary/30', className])"
>
<slot />
</div>
</template>
<script setup lang="ts">
import { useAttrs } from "vue";
import { twMerge } from "tailwind-merge";
defineOptions({ inheritAttrs: false });
const rawAttrs = useAttrs() as { class?: string };
</script>
<template>
<button
v-bind="rawAttrs"
:class="
twMerge([
'px-4 py-2 hover:bg-primary/10 disabled:opacity-30 disabled:pointer-events-none',
rawAttrs.class,
])
"
>
<slot />
</button>
</template>
export { default as ButtonGroup } from "./ButtonGroup.vue";
export { default as ButtonGroupItem } from "./ButtonGroupItem.vue";
Update the import paths to match your project setup.
import { ButtonGroup, ButtonGroupItem } from "@/components/ui/button-group";
<ButtonGroup>
<ButtonGroupItem>Day</ButtonGroupItem>
<ButtonGroupItem>Week</ButtonGroupItem>
<ButtonGroupItem>Month</ButtonGroupItem>
</ButtonGroup>