The Button Group

Buttons 11

About

This is a button group component

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

Code

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

Usage.tsx

import { Grid2x2, List, MoreHorizontal, Table2 } from "lucide-react";
import { ButtonGroup } from "@/components/ui/button-group";
import { Button } from "@/components/ui/button";

export function ButtonGroupPreview() {
  return (
    <div className="mx-auto flex w-full max-w-2xl flex-col gap-10 px-2">
      <div className="space-y-3">
        <div className="space-y-1 text-left">
          <p className="font-medium text-foreground text-sm">
            Divided compact row
          </p>
          <p className="text-muted-foreground text-sm">
            Use this when each adjacent action still benefits from a visible
            split.
          </p>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <ButtonGroup>
            <Button variant="outline" size="sm" className="text-muted-foreground">
              <List className="size-4" />
              List
            </Button>
            <Button variant="outline" size="sm" className="text-muted-foreground">
              <Grid2x2 className="size-4" />
              Board
            </Button>
            <Button variant="outline" size="sm" className="text-muted-foreground">
              <Table2 className="size-4" />
              Table
            </Button>
          </ButtonGroup>

          <Button variant="outline" size="icon" className="text-muted-foreground" aria-label="More options">
            <MoreHorizontal className="size-4" />
          </Button>
        </div>
      </div>

      <div className="space-y-3">
        <div className="space-y-1 text-left">
          <p className="font-medium text-foreground text-sm">
            Quiet toolbar row
          </p>
          <p className="text-muted-foreground text-sm">
            Use this when you want a softer grouped control with less visual
            chrome.
          </p>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <ButtonGroup>
            <Button variant="ghost" size="sm" className="text-muted-foreground">
              <List className="size-4" />
              List
            </Button>
            <Button variant="ghost" size="sm" className="text-muted-foreground">
              <Grid2x2 className="size-4" />
              Board
            </Button>
            <Button variant="ghost" size="sm" className="text-muted-foreground">
              <Table2 className="size-4" />
              Table
            </Button>
          </ButtonGroup>

          <Button variant="ghost" size="icon" className="text-muted-foreground" aria-label="More options">
            <MoreHorizontal className="size-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}

export default ButtonGroupPreview;