Button Group

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5function ButtonGroup({
6  className,
7  orientation = "horizontal",
8  ...props
9}: React.ComponentProps<"div"> & { orientation?: "horizontal" | "vertical" }) {
10  return (
11    <div
12      role="group"
13      data-slot="button-group"
14      data-orientation={orientation}
15      className={cn(
16        "isolate inline-flex w-fit items-stretch [&>*]:relative [&>*]:z-0 [&>*:focus-visible]:z-10 [&>*:hover]:z-10 data-[orientation=horizontal]:[&>*:not(:first-child)]:-ml-px data-[orientation=horizontal]:[&>*:not(:first-child)]:rounded-l-none data-[orientation=horizontal]:[&>*:not(:last-child)]:rounded-r-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:[&>*:not(:first-child)]:-mt-px data-[orientation=vertical]:[&>*:not(:first-child)]:rounded-t-none data-[orientation=vertical]:[&>*:not(:last-child)]:rounded-b-none",
17        className,
18      )}
19      {...props}
20    />
21  );
22}
23 
24function ButtonGroupText({ className, ...props }: React.ComponentProps<"div">) {
25  return (
26    <div
27      data-slot="button-group-text"
28      className={cn(
29        "flex items-center justify-center border border-foreground/12 bg-foreground/[.035] px-3 text-sm font-medium text-muted-foreground",
30        className,
31      )}
32      {...props}
33    />
34  );
35}
36 
37function ButtonGroupSeparator({
38  className,
39  orientation = "vertical",
40  ...props
41}: React.ComponentProps<"div"> & { orientation?: "horizontal" | "vertical" }) {
42  return (
43    <div
44      role="separator"
45      aria-orientation={orientation}
46      data-slot="button-group-separator"
47      className={cn(
48        "z-20 self-stretch bg-foreground/12 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:w-px",
49        className,
50      )}
51      data-orientation={orientation}
52      {...props}
53    />
54  );
55}
56 
57export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };