Button Group

Buttons 54

About

A rounded container that groups related buttons together with consistent spacing, padding and a shared surface background.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Button Group to your project and fits it to your theme.

Code

How Button Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ButtonGroup from "@/components/ui/primitive-button-group";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export default function ButtonGroupDemo() {
  return (
    <ButtonGroup>
      <Button
        variant="ghost"
        size="sm"
        className="text-[color:var(--bjork-text-muted)] hover:bg-[var(--bjork-surface-hover)] hover:text-[color:var(--bjork-text)]"
      >
        Day
      </Button>
      <Button
        size="sm"
        className={cn(
          "border border-transparent bg-[var(--bjork-field)] text-[color:var(--bjork-text)]",
          "shadow-[var(--bjork-shadow-surface)] hover:bg-[var(--bjork-surface-hover)]",
        )}
      >
        Week
      </Button>
      <Button
        variant="ghost"
        size="sm"
        className="text-[color:var(--bjork-text-muted)] hover:bg-[var(--bjork-surface-hover)] hover:text-[color:var(--bjork-text)]"
      >
        Month
      </Button>
    </ButtonGroup>
  );
}