Button group
Buttons that belong together, set close and cut on both sides so their slanted edges nest, like the tabs.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/button-groupExamples
Actions, and a pager
Job 3 of 12
import { Button } from "@/components/zero/button";import { ButtonGroup, ButtonGroupText } from "@/components/zero/button-group";import { ChevronLeftIcon, ChevronRightIcon } from "@/components/zero/icons";export default function ButtonGroupActions() { return ( <div className="grid justify-items-start gap-4"> <ButtonGroup> <Button>Take it</Button> <Button variant="secondary">Save</Button> <Button variant="secondary">Share</Button> </ButtonGroup> <ButtonGroup> <Button variant="secondary" aria-label="Previous job"> <ChevronLeftIcon /> </Button> <ButtonGroupText>Job 3 of 12</ButtonGroupText> <Button variant="secondary" aria-label="Next job"> <ChevronRightIcon /> </Button> </ButtonGroup> </div> );}Behaviour
Whatever cut each Button asks for, inside a group it is cut on both sides. ButtonGroupText puts a label in the row as a black well the height of the buttons.