按钮组

将按钮、工具栏和输入插件整合到一个带边框的单元中——一条粗边框、一个硬阴影、一次共同点击。

"use client"

import * as React from "react"

按钮组把相邻的按钮、输入框和文字标签熔成一个分段控件。底层没有基元——一个普通的 role="group" 容器统管新粗野主义的外框（一圈粗边框、一道硬阴影、一套共用的按下动画）；只有 ButtonGroupSeparator 用到了基元，它封装的是 Separator。

适合以下场景：

拆分按钮——一个主操作，再配一个装着备选项的 DropdownMenu：保存 / 另存为…、合并 / 压缩合并。
翻页器与工具栏——上一页/下一页、放大缩小、视图切换，全都塞进同一个外框里。
输入框附加件——搜索框和它的提交按钮、URL 前缀标签、后缀的复制按钮。

安装


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button-group.json
npx shadcn@latest add https://neobrutalism.com/r/base/button-group.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button-group.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button-group.json

安装以下依赖项：


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

将以下代码复制并粘贴到您的项目中。

components/ui/button-group.tsx

import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"
import { Separator } from "@/components/ui/separator"

const buttonGroupVariants = cva(
  cn(
    // The GROUP itself is the cohesive NeoBrutalist unit: a single bold border +
    // one hard offset shadow wrapping every segment, so it reads as ONE unit.
    // The frame animates so the whole group can press like a single Button.
    "relative inline-flex w-fit items-stretch border-2 border-foreground bg-background shadow-md transition-all duration-200",
    // Segments become flush fills — the frame owns the border, shadow and corners.
    "[&>*]:rounded-none",
    "[&>:is(button,a)]:border-0 [&>:is(button,a)]:shadow-none!",
    // Segments never translate on their own — only the whole frame moves.
    "[&>:is(button,a)]:hover:translate-y-0! [&>:is(button,a)]:active:translate-x-0! [&>:is(button,a)]:active:translate-y-0!",
    // The WHOLE group presses into its shadow like a single Button: hover sinks it
    // toward the shadow, press sits it flush (shadow gone).
    "has-[:is(button,a):hover]:translate-y-1 has-[:is(button,a):hover]:shadow",
    "has-[:is(button,a):active]:translate-y-2 has-[:is(button,a):active]:translate-x-1 has-[:is(button,a):active]:shadow-none",
    // When a group CONTAINS nested groups it becomes a plain gapped container
    // (no frame / shadow / press) so each nested sub-group is its own pressable
    // unit instead of pressing the whole outer frame.
    "has-[>[data-slot=button-group]]:gap-2 has-[>[data-slot=button-group]]:border-0 has-[>[data-slot=button-group]]:bg-transparent has-[>[data-slot=button-group]]:shadow-none! has-[>[data-slot=button-group]]:translate-x-0! has-[>[data-slot=button-group]]:translate-y-0!",
    // The hovered/pressed segment darkens in place via a full-bleed inset tint, so
    // you can still tell which segment you're acting on while the frame presses.
    "[&>:is(button,a):hover]:shadow-[inset_0_0_0_999px_#00000012]! [&>:is(button,a):active]:shadow-[inset_0_0_0_999px_#0000001f]!",

    "dark:[&>:is(button,a):hover]:shadow-[inset_0_0_0_999px_#ffffff1f]! dark:[&>:is(button,a):active]:shadow-[inset_0_0_0_999px_#ffffff33]!",
    // Solid dark segments (secondary) always lighten on hover — a dark tint would
    // be invisible on a black button in light mode.
    "[&>:is(button,a)[data-variant=secondary]:hover]:shadow-[inset_0_0_0_999px_#ffffff2b]! [&>:is(button,a)[data-variant=secondary]:active]:shadow-[inset_0_0_0_999px_#ffffff45]!",
    "[&>:is(button,a):focus-visible]:relative [&>:is(button,a):focus-visible]:z-10"
  ),
  {
    variants: {
      orientation: {
        // A single crisp seam between segments (logical side, so RTL-correct).
        horizontal:
          "flex-row [&>*:not(:first-child)]:border-s-2! [&>*:not(:first-child)]:border-foreground",
        vertical:
          "flex-col [&>*:not(:first-child)]:border-t-2! [&>*:not(:first-child)]:border-foreground",
      },
    },
    defaultVariants: {
      orientation: "horizontal",
    },
  }
)

function ButtonGroup({
  className,
  orientation,
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
  return (
    <div
      role="group"
      data-slot="button-group"
      data-orientation={orientation ?? "horizontal"}
      className={cn(buttonGroupVariants({ orientation }), className)}
      {...props}
    />
  )
}

function ButtonGroupText({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<"div"> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot.Root : "div"

  return (
    <Comp
      data-slot="button-group-text"
      className={cn(
        "inline-flex items-center gap-2 bg-muted px-3 font-head text-sm font-medium text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
}

function ButtonGroupSeparator({
  className,
  orientation = "vertical",
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="button-group-separator"
      orientation={orientation}
      className={cn(
        "relative z-10 self-stretch bg-border data-horizontal:h-0.5 data-horizontal:w-auto data-vertical:h-auto data-vertical:w-0.5",
        className
      )}
      {...props}
    />
  )
}

export {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
  buttonGroupVariants,
}

更新导入路径以匹配您的项目设置。

用法

import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@/components/ui/button-group"

<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

组合

使用以下组合来构建 ButtonGroup：

ButtonGroup
├── Button or Input
├── ButtonGroupSeparator
└── ButtonGroupText

ButtonGroup vs ToggleGroup

当您想将执行某个操作的按钮组合在一起时，使用 ButtonGroup 组件。
当您想将切换某个状态的按钮组合在一起时，使用 ToggleGroup 组件。

示例

方向

设置 orientation 属性来改变按钮组的布局。

import { MinusIcon, PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

尺寸

在各个按钮上使用 size 属性来控制按钮的尺寸。

import { PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

嵌套

嵌套 <ButtonGroup> 组件可以创建带间距的按钮组。

import { AudioLinesIcon, PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

分隔符

ButtonGroupSeparator 组件在视觉上分隔组内的按钮。

outline 变体的按钮因为已有边框，所以不需要分隔符。对于其他变体，建议使用分隔符以改善视觉层次。

import { Button } from "@/components/ui/button"
import {
  ButtonGroup,

拆分

通过添加由 ButtonGroupSeparator 分隔的两个按钮，创建拆分按钮组。

import { IconPlus } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"

Input

用按钮包裹一个 Input 组件。

import { SearchIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

Input Group

包裹一个 InputGroup 组件以创建复杂的输入布局。

"use client"

import * as React from "react"

使用 DropdownMenu 组件创建拆分按钮组。

"use client"

import {

Select

与 Select 组件搭配使用。

"use client"

import * as React from "react"

与 Popover 组件一起使用。

import { BotIcon, ChevronDownIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

RTL

要在 Neobrutalism 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

无障碍

ButtonGroup 渲染 role="group"，它告诉辅助技术这些按钮属于同一组，同时不改变键盘行为——每个按钮各自保留自己的 Tab 停靠点，以及原生的 Enter / Space 激活方式。请用 aria-label 或 aria-labelledby 给这一组命名，让屏幕阅读器能播报出它的语境：

<ButtonGroup aria-label="Pagination">
  <Button>Previous</Button>
  <Button>Next</Button>
</ButtonGroup>

ButtonGroupSeparator 封装的是 Base UI 的 Separator，它渲染 role="separator" 并带上相应的 aria-orientation——会被播报为一条分隔线，且永远不可聚焦。如果您需要的是「只有一个 Tab 停靠点、按钮之间用方向键切换」，那属于 WAI-ARIA Toolbar 模式——本组件有意保留普通的 Tab 顺序。

API 参考

ButtonGroup

ButtonGroup 组件是一个将相关按钮以一致样式组合在一起的容器。

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`

<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

嵌套多个按钮组可以创建带间距的复杂布局。更多细节请参阅嵌套示例。

<ButtonGroup>
  <ButtonGroup />
  <ButtonGroup />
</ButtonGroup>

ButtonGroupSeparator

ButtonGroupSeparator 组件在视觉上分隔组内的按钮。

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`

<ButtonGroup>
  <Button>Button 1</Button>
  <ButtonGroupSeparator />
  <Button>Button 2</Button>
</ButtonGroup>

ButtonGroupText

使用此组件在按钮组中显示文本。

Prop	Type	Default
`asChild`	`boolean`	`false`

<ButtonGroup>
  <ButtonGroupText>Text</ButtonGroupText>
  <Button>Button</Button>
</ButtonGroup>

使用 asChild 属性可以将自定义组件（例如标签）渲染为文本。

import { ButtonGroupText } from "@/components/ui/button-group"
import { Label } from "@/components/ui/label"
 
export function ButtonGroupTextDemo() {
  return (
    <ButtonGroup>
      <ButtonGroupText asChild>
        <Label htmlFor="name">Text</Label>
      </ButtonGroupText>
      <Input placeholder="Type something here..." id="name" />
    </ButtonGroup>
  )
}