Button Group

Buttons 2

About

Here is Button Group component

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

"use client"

import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"

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

export default function ButtonGroupNested() {
  return (
    <ButtonGroup>
      <ButtonGroup>
        <Button variant="outline" size="sm">
          1
        </Button>
        <Button variant="outline" size="sm">
          2
        </Button>
        <Button variant="outline" size="sm">
          3
        </Button>
        <Button variant="outline" size="sm">
          4
        </Button>
        <Button variant="outline" size="sm">
          5
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button
          variant="outline"
          size="icon-sm"
          aria-label="Previous"
          className="p-1"
        >
          <ArrowLeftIcon size={14} />
        </Button>
        <Button
          variant="outline"
          size="icon-sm"
          aria-label="Next"
          className="p-1"
        >
          <ArrowRightIcon size={14} />
        </Button>
      </ButtonGroup>
    </ButtonGroup>
  )
}