按钮组 / Button Group

示例代码

<ButtonGroup>
  <Button variant="outline">日</Button>
  <Button variant="outline">周</Button>
  <Button variant="outline">月</Button>
</ButtonGroup>

示例代码

<ButtonGroup>
  <Button variant="outline" size="icon" aria-label="左对齐">
    <AlignLeft className="size-4" />
  </Button>
  <Button variant="outline" size="icon" aria-label="居中对齐">
    <AlignCenter className="size-4" />
  </Button>
  <Button variant="outline" size="icon" aria-label="右对齐">
    <AlignRight className="size-4" />
  </Button>
</ButtonGroup>

示例代码

<ButtonGroup>
  <ButtonGroupText>
    <PanelLeft className="size-4" />
    视图
  </ButtonGroupText>
  <ButtonGroupSeparator />
  <Button variant="outline" size="icon">...</Button>
</ButtonGroup>

示例代码

<ButtonGroup orientation="vertical">
  <Button variant="outline">概览</Button>
  <Button variant="outline">分析</Button>
  <Button variant="outline">报表</Button>
</ButtonGroup>

示例代码

const [range, setRange] = React.useState("week")

<ButtonGroup>
  <Button
    variant={range === "day" ? "default" : "outline"}
    onClick={() => setRange("day")}
  >
    日
  </Button>
</ButtonGroup>

示例代码

const [layout, setLayout] = React.useState("list")

<ButtonGroup>
  <Button
    variant={layout === "list" ? "default" : "outline"}
    size="icon"
    aria-pressed={layout === "list"}
  >
    <List className="size-4" />
  </Button>
</ButtonGroup>

示例代码

<ButtonGroup>
  <Button variant="outline" disabled>草稿</Button>
  <Button variant="outline">已发布</Button>
  <Button variant="outline" disabled>已归档</Button>
</ButtonGroup>

示例代码

<Button className="gap-2" disabled>
  <Spinner className="size-4" />
  同步中
</Button>

示例代码

<ButtonGroup>
  <InputGroup className="rounded-r-none border-r-0">
    <InputGroupAddon>
      <Search />
    </InputGroupAddon>
    <InputGroupInput placeholder="搜索产品..." />
  </InputGroup>
  <Button className="rounded-l-none">搜索</Button>
</ButtonGroup>

示例代码

<ButtonGroup>
  <select className="h-9 rounded-l-md rounded-r-none border px-3">...</select>
  <InputGroup className="rounded-none border-y border-l-0 border-r-0">
    <InputGroupInput placeholder="搜索关键词..." />
  </InputGroup>
  <Button className="rounded-l-none">搜索</Button>
</ButtonGroup>

示例代码

<ButtonGroup className="[--radius:9999rem]">
  <ButtonGroup>
    <Button variant="outline" size="icon">
      <PlusIcon />
    </Button>
  </ButtonGroup>
  <ButtonGroup className="flex-1">
    <InputGroup>
      <InputGroupInput placeholder="发送消息..." />
      <InputGroupAddon align="inline-end">
        <InputGroupButton size="icon-xs">
          <AudioLinesIcon />
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  </ButtonGroup>
</ButtonGroup>