HeroUI Button Group

Buttons 9

About

HeroUI v3 ButtonGroup — grouped buttons with separators, variants, sizes, orientation, icons and full-width layout.

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

Code

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

Usage.tsx

import { Globe, Plus, Trash2 } from "lucide-react"

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

export default function WithIcons() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col items-start gap-2">
        <p className="text-sm text-muted-foreground">With icons</p>
        <ButtonGroup variant="secondary">
          <Button>
            <Globe />
            Search
          </Button>
          <Button>
            <ButtonGroup.Separator />
            <Plus />
            Add
          </Button>
          <Button>
            <ButtonGroup.Separator />
            <Trash2 />
            Delete
          </Button>
        </ButtonGroup>
      </div>
      <div className="flex flex-col items-start gap-2">
        <p className="text-sm text-muted-foreground">Icon only buttons</p>
        <ButtonGroup variant="tertiary">
          <Button isIconOnly>
            <Globe />
          </Button>
          <Button isIconOnly>
            <ButtonGroup.Separator />
            <Plus />
          </Button>
          <Button isIconOnly>
            <ButtonGroup.Separator />
            <Trash2 />
          </Button>
        </ButtonGroup>
      </div>
    </div>
  )
}