<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.
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. Or copy and paste the code below by hand.
import { twMerge } from "tailwind-merge";
function ButtonGroup({
children,
className,
}: React.PropsWithChildren<{ className?: string }>) {
return (
<div
role="group"
className={twMerge(["inline-flex divide-x divide-primary/30 border border-primary/30", className])}
>
{children}
</div>
);
}
function ButtonGroupItem({
children,
className,
...rest
}: React.ComponentProps<"button">) {
return (
<button
{...rest}
className={twMerge([
"px-4 py-2 hover:bg-primary/10 disabled:opacity-30 disabled:pointer-events-none",
className,
])}
>
{children}
</button>
);
}
export { ButtonGroup, ButtonGroupItem };
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>