Button group
一组相关的按钮，紧密排列、两侧斜切，斜边彼此嵌合，做法与 Tabs 相同。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/button-group示例
操作组，以及分页器
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> );}行为
无论各个 Button 设置的是哪种切角，在组内一律两侧斜切。ButtonGroupText 在行内放置一段标签，呈现为与按钮等高的黑色凹槽。