Button Group
Joins buttons into one strip that shares borders, corners and active states. Horizontal or vertical.
npx @kznlabs/labsui add button-groupimport { Button } from "@/components/ui/button";import { ButtonGroup } from "@/components/ui/button-group";export function SegmentedActions() { return ( <ButtonGroup> <Button variant="outline" size="sm"> Years </Button> <Button variant="outline" size="sm"> Months </Button> <Button variant="default" size="sm"> Days </Button> </ButtonGroup> );}<ButtonGroup>
Groups related buttons together into a connected control or toolbar.
attacheddefaulttruebooleanFuse borders and corners into a single connected strip (default: true).
orientationdefault"horizontal""horizontal" | "vertical""horizontal" (default) or "vertical".
| Prop | Type | Default |
|---|---|---|
attachedFuse borders and corners into a single connected strip (default: true). | boolean | true |
orientation"horizontal" (default) or "vertical". | "horizontal" | "vertical" | "horizontal" |
Also accepts every <div> prop.
* required. Every component also takes className.