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, AlignLeft, AlignRight } from "lucide-react"
import { ButtonGroup, Button } from "@/components/ui/heroui-button-group"
export default function FullWidth() {
return (
<div className="w-[400px] space-y-3">
<ButtonGroup fullWidth>
<Button>First</Button>
<Button>
<ButtonGroup.Separator />
Second
</Button>
<Button>
<ButtonGroup.Separator />
Third
</Button>
</ButtonGroup>
<ButtonGroup fullWidth>
<Button isIconOnly>
<AlignLeft />
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<AlignCenter />
</Button>
<Button isIconOnly>
<ButtonGroup.Separator />
<AlignRight />
</Button>
</ButtonGroup>
</div>
)
}