Button Group

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"

<ButtonGroup>
  <Button variant="outline">Previous</Button>
  <Button variant="outline">Today</Button>
  <Button variant="outline">Next</Button>
</ButtonGroup>

<ButtonGroup>
  <Button variant="outline" size="icon"><Bold /></Button>
  <Button variant="outline" size="icon"><Italic /></Button>
  <Button variant="outline" size="icon"><Underline /></Button>
</ButtonGroup>

<ButtonGroup>
  <Button variant="ghost"><AlignLeft /> Left</Button>
  <Button variant="ghost"><AlignCenter /> Center</Button>
  <Button variant="ghost"><AlignRight /> Right</Button>
</ButtonGroup>

<ButtonGroup orientation="vertical">
  <Button variant="outline">Top</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Bottom</Button>
</ButtonGroup>

npx shadcn@latest add https://solar-ui.com/r/button-group.json

import * as React from "react"
import { cn } from "@/lib/utils"
 
function ButtonGroup({
  className,
  orientation = "horizontal",
  ...props
}: React.ComponentProps<"div"> & {
  orientation?: "horizontal" | "vertical"
}) {
  return (
    <div
      data-slot="button-group"
      data-orientation={orientation}
      className={cn(
        "inline-flex items-center rounded-lg",
        orientation === "horizontal" && [
          "[&>*:not(:first-child)]:-ml-px",
          "[&>*:not(:last-child)]:rounded-r-none",
          "[&>*:not(:first-child)]:rounded-l-none",
        ],
        orientation === "vertical" && [
          "flex-col",
          "[&>*:not(:first-child)]:-mt-px",
          "[&>*:not(:last-child)]:rounded-b-none",
          "[&>*:not(:first-child)]:rounded-t-none",
        ],
        className
      )}
      {...props}
    />
  )
}
 
export { ButtonGroup }