Button Group

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import { cn } from "@/lib/utils";
5 
6const buttonGroupVariants = cva(
7  cn(
8    "inline-flex w-fit items-stretch",
9    // Children stay full Buttons with their own glass surface and hover/press
10    // animation, so a grouped button behaves identically to a standalone one.
11    // Lifting the hovered/focused/active segment keeps its scale, border and
12    // ring above the shared seam instead of being clipped by neighbours.
13    "[&>*]:relative [&>*]:hover:z-10 [&>*]:focus-visible:z-10 [&>*]:active:z-10",
14  ),
15  {
16    variants: {
17      orientation: {
18        horizontal:
19          "flex-row [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none",
20        vertical:
21          "flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none",
22      },
23    },
24    defaultVariants: {
25      orientation: "horizontal",
26    },
27  },
28);
29 
30export interface ButtonGroupProps
31  extends React.ComponentProps<"div">,
32    VariantProps<typeof buttonGroupVariants> {
33  role?: "group";
34}
35 
36export function ButtonGroup({
37  className,
38  orientation,
39  role = "group",
40  ...props
41}: ButtonGroupProps) {
42  return (
43    <div
44      data-slot="button-group"
45      role={role}
46      className={cn(buttonGroupVariants({ orientation }), className)}
47      {...props}
48    />
49  );
50}