109k
新建

按钮组

上一页下一页

一个将相关按钮进行组合并保持样式一致的容器。

Radix UIBase UI
Radix UI - shadcn/ui 组件库
"use client"

import * as React from "react"

安装

pnpm dlx shadcn@latest add button-group

用法

import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@/components/ui/button-group"
<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

可访问性

  • ButtonGroup 组件已设置 role 属性为 group。
  • 使用 Tab 在组内的按钮之间进行导航。
  • 使用 aria-label 或 aria-labelledby 来标记按钮组。
<ButtonGroup aria-label="Button group">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

ButtonGroup 与 ToggleGroup 的区别

  • 当需要组合用于执行操作的按钮时，请使用 ButtonGroup 组件。
  • 当需要组合用于切换状态的按钮时，请使用 ToggleGroup 组件。

示例

排列方向 (Orientation)

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

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

尺寸 (Size)

通过单个按钮上的 size 属性来控制按钮大小。

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

嵌套 (Nested)

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

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

分隔符

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

使用 outline 变体的按钮由于自带边框，因此不需要分隔符。对于其他变体，建议使用分隔符以增强视觉层次感。

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

分割

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

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

输入框

使用按钮包裹 Input 组件。

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

输入框组

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

"use client"

import * as React from "react"

下拉菜单

创建一个带有 DropdownMenu 组件的分割按钮组。

"use client"

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

选择器

与 Select 组件配合使用。

"use client"

import * as React from "react"

气泡卡片

与 Popover 组件配合使用。

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 配置指南。

"use client"

import * as React from "react"

API 参考

ButtonGroup

ButtonGroup 组件是一个将相关按钮进行组合并保持样式一致的容器。

属性类型默认
orientation (方向)"horizontal" (水平) | "vertical" (垂直)"horizontal"
<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

嵌套多个按钮组以创建带有间距的复杂布局。详情请参阅 嵌套 示例。

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

ButtonGroupSeparator

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

属性类型默认
orientation (方向)"horizontal" (水平) | "vertical" (垂直)"vertical" (垂直)
<ButtonGroup>
  <Button>Button 1</Button>
  <ButtonGroupSeparator />
  <Button>Button 2</Button>
</ButtonGroup>

ButtonGroupText

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

属性类型默认
asChild (作为子元素)布尔值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>
  )
}