Button Group

Preview

Left Middle Right

Source

---
import Button from '@bejamas/ui/components/Button.astro';
import ButtonGroup from '@bejamas/ui/components/ButtonGroup.astro';
---

<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

Installation

CLI

bun

 bunx bejamas add button-group

npm

 npx bejamas add button-group

pnpm

 pnpm dlx bejamas add button-group

yarn

 yarn dlx bejamas add button-group

Manual

---
/**
 * @component ButtonGroup
 * @title Button Group
 * @description A set of related buttons grouped together, with support for horizontal or vertical layouts.
 *
 * @preview
 *
 * <ButtonGroup>
 *   <Button variant="outline">Left</Button>
 *   <Button variant="outline">Middle</Button>
 *   <Button variant="outline">Right</Button>
 * </ButtonGroup>
 *
 * @usage
 *
 * ```astro
 * ---
 * import ButtonGroup from '@/components/ui/ButtonGroup.astro';
 * import Button from '@/components/ui/Button.astro';
 * ---
 * <ButtonGroup>
 *   <Button>One</Button>
 *   <Button>Two</Button>
 *   <Button>Three</Button>
 * </ButtonGroup>
 * ```
 *
 * @props
 * - orientation?: "horizontal" | "vertical" — Default: "horizontal".
 * - class?: string — Additional classes for the container.
 *
 * @examples
 *
 * ### Orientation
 *
 * <ButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit">
 *   <Button variant="outline" size="icon">
 *     <PlusIcon />
 *   </Button>
 *   <Button variant="outline" size="icon">
 *     <MinusIcon />
 *   </Button>
 * </ButtonGroup>
 *
 * ### Size
 *
 * <div className="flex flex-col items-start gap-8">
 *   <ButtonGroup>
 *     <Button variant="outline" size="sm">
 *       Small
 *     </Button>
 *     <Button variant="outline" size="sm">
 *       Button
 *     </Button>
 *     <Button variant="outline" size="sm">
 *       Group
 *     </Button>
 *     <Button variant="outline" size="icon-sm">
 *       <PlusIcon />
 *      </Button>
 *   </ButtonGroup>
 *   <ButtonGroup>
 *     <Button variant="outline">Default</Button>
 *     <Button variant="outline">Button</Button>
 *     <Button variant="outline">Group</Button>
 *     <Button variant="outline" size="icon">
 *       <PlusIcon />
 *     </Button>
 *   </ButtonGroup>
 *   <ButtonGroup>
 *     <Button variant="outline" size="lg">
 *       Large
 *     </Button>
 *     <Button variant="outline" size="lg">
 *       Button
 *     </Button>
 *     <Button variant="outline" size="lg">
 *       Group
 *     </Button>
 *     <Button variant="outline" size="icon-lg">
 *       <PlusIcon />
 *     </Button>
 *   </ButtonGroup>
 * </div>
 */

import { cva } from "class-variance-authority";
import { cn } from "@bejamas/ui/lib/utils";

interface Props extends Astro.ComponentProps<"div"> {
  orientation?: "horizontal" | "vertical";
  class?: string;
}

const {
  orientation = "horizontal",
  class: className = "",
  ...props
} = Astro.props as Props;

const buttonGroupVariants = cva(
  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
  {
    variants: {
      orientation: {
        horizontal:
          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
        vertical:
          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
      },
    },
    defaultVariants: {
      orientation: "horizontal",
    },
  },
);
---

<div
  role="group"
  data-slot="button-group"
  data-orientation={orientation}
  class={cn(buttonGroupVariants({ orientation }), className)}
  {...props}
>
  <slot />
</div>

Usage

---
import ButtonGroup from '@/components/ui/ButtonGroup.astro';
import Button from '@/components/ui/Button.astro';
---
<ButtonGroup>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Props

Prop	Type	Default
orientation	"horizontal" | "vertical"	"horizontal"
class	string	""

Examples

Orientation

Preview

Source

---
import { MinusIcon, PlusIcon } from '@lucide/astro';

import Button from '@bejamas/ui/components/Button.astro';
import ButtonGroup from '@bejamas/ui/components/ButtonGroup.astro';
---

<ButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit">
  <Button variant="outline" size="icon">
    <PlusIcon />
  </Button>
  <Button variant="outline" size="icon">
    <MinusIcon />
  </Button>
</ButtonGroup>

Size

Preview

Small Button Group

Default Button Group

Large Button Group

Source

---
import { PlusIcon } from '@lucide/astro';

import Button from '@bejamas/ui/components/Button.astro';
import ButtonGroup from '@bejamas/ui/components/ButtonGroup.astro';
---

<div className="flex flex-col items-start gap-8">
  <ButtonGroup>
    <Button variant="outline" size="sm">
      Small
    </Button>
    <Button variant="outline" size="sm">
      Button
    </Button>
    <Button variant="outline" size="sm">
      Group
    </Button>
    <Button variant="outline" size="icon-sm">
      <PlusIcon />
     </Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline">Default</Button>
    <Button variant="outline">Button</Button>
    <Button variant="outline">Group</Button>
    <Button variant="outline" size="icon">
      <PlusIcon />
    </Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline" size="lg">
      Large
    </Button>
    <Button variant="outline" size="lg">
      Button
    </Button>
    <Button variant="outline" size="lg">
      Group
    </Button>
    <Button variant="outline" size="icon-lg">
      <PlusIcon />
    </Button>
  </ButtonGroup>
</div>