labsUI

Button Group

Joins buttons into one strip that shares borders, corners and active states. Horizontal or vertical.

npx @kznlabs/labsui add button-group
import { 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.

  • attacheddefault true
    boolean

    Fuse borders and corners into a single connected strip (default: true).

  • orientationdefault "horizontal"
    "horizontal" | "vertical"

    "horizontal" (default) or "vertical".

PropTypeDefault
attached

Fuse borders and corners into a single connected strip (default: true).

booleantrue
orientation

"horizontal" (default) or "vertical".

"horizontal" | "vertical""horizontal"

Also accepts every <div> prop.

* required. Every component also takes className.