按钮组

"use client"

import * as React from "react"

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add button-group
Copy

用法

🌐 Usage

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

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

可访问性

🌐 Accessibility

• ButtonGroup 组件的 role 属性设置为 group。
• 使用 Tab 在组中的按钮之间导航。
• 使用 aria-label 或 aria-labelledby 来标记按钮组。

Copy<ButtonGroup aria-label="Button group">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

按钮组 vs 切换组

🌐 ButtonGroup vs ToggleGroup

• 当你想要将执行操作的按钮分组时，请使用 ButtonGroup 组件。
• 当你想要分组切换状态的按钮时，使用 ToggleGroup 组件。

示例

🌐 Examples

方向

🌐 Orientation

设置 orientation 属性以更改按钮组布局。

🌐 Set the orientation prop to change the button group layout.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { MinusIcon, PlusIcon } from "lucide-react"

大小

🌐 Size

使用单个按钮上的 size 属性来控制按钮的大小。

🌐 Control the size of buttons using the size prop on individual buttons.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { PlusIcon } from "lucide-react"

嵌套

🌐 Nested

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

🌐 Nest <ButtonGroup> components to create button groups with spacing.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Input } from "@/components/ui/input"

分隔符

🌐 Separator

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

🌐 The ButtonGroupSeparator component visually divides buttons within a group.

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

🌐 Buttons with variant outline do not need a separator since they have a border. For other variants, a separator is recommended to improve the visual hierarchy.

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

分开

🌐 Split

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

🌐 Create a split button group by adding two buttons separated by a ButtonGroupSeparator.

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

输入

🌐 Input

用按钮封装一个 Input 组件。

🌐 Wrap an Input component with buttons.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Input } from "@/components/ui/input"

输入组

🌐 Input Group

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

🌐 Wrap an InputGroup component to create complex input layouts.

"use client"

import * as React from "react"

下拉菜单

🌐 Dropdown Menu

使用 DropdownMenu 组件创建一个分割按钮组。

🌐 Create a split button group with a DropdownMenu component.

"use client"

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

选择

🌐 Select

与 Select 组件配对。

🌐 Pair with a Select component.

"use client"

import * as React from "react"

弹出窗口

🌐 Popover

与 Popover 组件一起使用。

🌐 Use with a Popover component.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

ButtonGroup

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

🌐 The ButtonGroup component is a container that groups related buttons together with consistent styling.

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

嵌套多个按钮组以创建带间距的复杂布局。有关更多详细信息，请参阅 嵌套 示例。

🌐 Nest multiple button groups to create complex layouts with spacing. See the nested example for more details.

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

ButtonGroupSeparator

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

🌐 The ButtonGroupSeparator component visually divides buttons within a group.

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

ButtonGroupText

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

🌐 Use this component to display text within a button group.

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

使用 asChild 属性将自定义组件作为文本渲染，例如一个标签。

🌐 Use the asChild prop to render a custom component as the text, for example a label.

Copyimport { 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>
  )
}