Components
Loading preview...
HeroUI v3 ButtonGroup — grouped buttons with separators, variants, sizes, orientation, icons and full-width layout.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-button-groupimport { 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>
)
}