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 { AlignCenter, AlignJustify, AlignLeft, AlignRight } from "lucide-react"
import { ButtonGroup, Button } from "@/components/ui/heroui-button-group"
export default function Orientation() {
return (
<div className="flex items-start gap-8">
<div className="flex flex-col gap-2">
<span className="text-sm text-muted-foreground">Horizontal</span>
<ButtonGroup orientation="horizontal" variant="tertiary">
<Button isIconOnly>
<AlignLeft />
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<AlignCenter />
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<AlignRight />
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<AlignJustify />
</Button>
</ButtonGroup>
</div>
<div className="flex flex-col gap-2">
<span className="text-sm text-muted-foreground">Vertical</span>
<ButtonGroup orientation="vertical" variant="tertiary">
<Button isIconOnly>
<AlignLeft />
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<AlignCenter />
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<AlignRight />
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<AlignJustify />
</Button>
</ButtonGroup>
</div>
</div>
)
}