Tab

页签组件家族：TabBar 用于页面主导航，ButtonGroup 用于小范围切换视图。

TabBar

顶部页签导航，对应 Figma 「Page Tab」。3 种主色，可选 badge。

Import

import { TabBar, ButtonGroup } from "@forge-ui/react";

Usage

通过 tabs 数组声明页签，active: true 标记当前选中项。

1<TabBar
2  tabs={[
3    { label: "Overview", active: true, badge: 3 },
4    { label: "Analytics", badge: 12 },
5    { label: "Reports" },
6    { label: "Settings" },
7  ]}
8/>

Colors

3 种主色：purple（默认）/ blue / black。

1<TabBar color="purple" tabs={tabs} />
2<TabBar color="blue" tabs={tabs} />
3<TabBar color="black" tabs={tabs} />

With Badge

每个 tab 可单独传入 badge 数字，适合展示未读 / 计数。

1<TabBar
2  tabs={[
3    { label: "All", active: true, badge: 128 },
4    { label: "Active", badge: 32 },
5    { label: "Closed", badge: 96 },
6  ]}
7/>

API

Attribute	Type	Default	Description
`tabs`	`{ label: string; active?: boolean; badge?: number }[]`	`—`	页签列表，active 为 true 的项高亮，badge 显示右上角数字。
`color`	`'purple' \| 'blue' \| 'black'`	`'purple'`	选中态主色。
`onChange`	`(index: number) => void`	`—`	切换页签回调，参数为下标。
`className`	`string`	`—`	额外 className。

ButtonGroup

分段控制器，对应 Figma 「In Group」。用于切换过滤维度或视图模式。

Usage

通过 items 传入标签数组，activeIndex 指定选中项。

1<ButtonGroup
2  activeIndex={1}
3  items={[
4    { label: "Day" },
5    { label: "Week" },
6    { label: "Month" },
7  ]}
8/>

Colors

3 种选中态：purple / blue / black。

1<ButtonGroup color="purple" activeIndex={0} items={items} />
2<ButtonGroup color="blue" activeIndex={1} items={items} />
3<ButtonGroup color="black" activeIndex={2} items={items} />

Shape

圆角矩形或胶囊，通过 shape 切换。

1<ButtonGroup shape="rounded" activeIndex={1} items={items} />
2<ButtonGroup shape="pill" activeIndex={1} items={items} />

API

Attribute	Type	Default	Description
`items`	`{ label: string }[]`	`—`	分段按钮列表。
`activeIndex`	`number`	`0`	当前选中分段下标。
`color`	`'purple' \| 'blue' \| 'black'`	`'purple'`	选中态主色。
`shape`	`'rounded' \| 'pill'`	`'rounded'`	圆角矩形或胶囊。
`onChange`	`(index: number) => void`	`—`	切换回调。

看所有变体 →