Button Group
Groups related buttons together with consistent styling.
Loading...
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
Installation
pnpmnpmyarnbun
Usage
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"<ButtonGroup>
<Button variant="outline">Left</Button>
<Button variant="outline">Center</Button>
<Button variant="outline">Right</Button>
</ButtonGroup>Examples
Vertical
Use orientation="vertical" for vertical layouts.
Loading...
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
With Icons
Loading...
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
import { Button } from "@/components/ui/button"API Reference
ButtonGroup
ButtonGroupText
A styled text element for displaying static content within button groups.
ButtonGroupSeparator
A visual separator between buttons.