Button & Link

Button / IconButton 触发动作，StyledLink 用于跳转，ButtonGroup 用于分段切换。

Button

最常用的点击元素，支持 9 种颜色、3 种变体和 3 种尺寸，可附带左右图标与禁用态。

Import

import { Button, IconButton, StyledLink, ButtonGroup } from "@forge-ui/react";

Usage

默认渲染紫色实底按钮。通过 variant 切换实底 / 浅底 / 描边三种观感。

1<Button>Button</Button>
2<Button variant="secondary">Secondary</Button>
3<Button variant="tertiary">Tertiary</Button>

Sizes

通过 size 控制高度与字号，可选 sm / md / lg，默认 lg。

1<Button size="sm">Small</Button>
2<Button size="md">Medium</Button>
3<Button size="lg">Large</Button>

Colors

9 种语义色：品牌紫（默认）、深紫、蓝、深蓝、红、绿、黄、灰、黑。

1<Button color="purple">Purple</Button>
2<Button color="dark">Dark</Button>
3<Button color="blue">Blue</Button>
4<Button color="blue-dark">Blue Dark</Button>
5<Button color="red">Red</Button>
6<Button color="green">Green</Button>
7<Button color="yellow">Yellow</Button>
8<Button color="grey">Grey</Button>
9<Button color="black">Black</Button>

Variants

primary 用于主要动作，secondary 用于次级动作，tertiary 用于边缘场景。

1<Button variant="primary">Primary</Button>
2<Button variant="secondary">Secondary</Button>
3<Button variant="tertiary">Tertiary</Button>

With Icon

使用 iconLeft / iconRight 插入图标，推荐 solar-icon-set 16px 图标以匹配内边距。

1<Button iconLeft={<StarLinear size={16} />}>Star it</Button>
2<Button iconRight={<ArrowRightLinear size={16} />}>Next</Button>

Disabled

传入 disabled 后降低透明度并禁用点击。

1<Button disabled>Disabled</Button>
2<Button variant="secondary" disabled>Disabled</Button>
3<Button variant="tertiary" disabled>Disabled</Button>

API

Attribute	Type	Default	Description
`children`	`ReactNode`	`—`	按钮文案或其他内联内容。
`color`	`'purple' \| 'dark' \| 'blue' \| 'blue-dark' \| 'red' \| 'green' \| 'yellow' \| 'grey' \| 'black'`	`'purple'`	按钮主色，共 9 种。
`variant`	`'primary' \| 'secondary' \| 'tertiary'`	`'primary'`	实底 / 浅底 / 描边三种样式。
`size`	`'lg' \| 'md' \| 'sm'`	`'lg'`	按钮尺寸，影响高度与字号。
`iconLeft`	`ReactNode`	`—`	文本左侧的图标槽，建议传 solar-icon-set 16px 图标。
`iconRight`	`ReactNode`	`—`	文本右侧的图标槽。
`disabled`	`boolean`	`false`	禁用态，降低透明度并禁用点击。
`className`	`string`	`''`	额外 className，透传到 <button> 根节点。
`...props`	`ButtonHTMLAttributes<HTMLButtonElement>`	`—`	其余原生按钮属性（onClick、type、form 等）透传。

IconButton

纯图标按钮，继承 Button 的 9 色与 3 变体，额外提供 ghost 变体与 square 形状用于表格 actions。

Usage

传入任一 icon 作为 children 即可。默认 md 尺寸建议搭配 20px 图标。

1<IconButton><StarLinear size={20} /></IconButton>
2<IconButton variant="secondary"><HeartLinear size={20} /></IconButton>
3<IconButton variant="tertiary"><TrashBinTrashLinear size={20} /></IconButton>

Sizes

3 种尺寸：sm 32px / md 40px / lg 48px。

1<IconButton size="sm"><StarLinear size={16} /></IconButton>
2<IconButton size="md"><StarLinear size={20} /></IconButton>
3<IconButton size="lg"><StarLinear size={24} /></IconButton>

Colors

颜色集合与 Button 一致，共 9 种，这里示意 5 种常用色。

1<IconButton color="purple"><StarLinear size={20} /></IconButton>
2<IconButton color="blue"><StarLinear size={20} /></IconButton>
3<IconButton color="red"><StarLinear size={20} /></IconButton>
4<IconButton color="green"><StarLinear size={20} /></IconButton>
5<IconButton color="yellow"><StarLinear size={20} /></IconButton>

Shape

circle（默认）和 square，后者常用于表格 actions 列。

1<IconButton shape="circle"><StarLinear size={20} /></IconButton>
2<IconButton shape="square"><StarLinear size={20} /></IconButton>

Ghost

variant="ghost" 透明底 + 灰图标 + hover 浅灰，适合列表尾部静默按钮。

1<IconButton variant="ghost"><StarLinear size={20} /></IconButton>
2<IconButton variant="ghost" shape="square"><HeartLinear size={20} /></IconButton>

API

Attribute	Type	Default	Description
`children`	`ReactNode`	`—`	图标节点，建议 solar-icon-set 20px 以匹配 md 尺寸。
`color`	`'purple' \| 'dark' \| 'blue' \| 'blue-dark' \| 'red' \| 'green' \| 'yellow' \| 'grey' \| 'black'`	`'purple'`	主色，与 Button 的颜色集合完全一致。
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'ghost'`	`'primary'`	实底 / 浅底 / 描边 / 透明四种观感，ghost 常用于表格 actions。
`size`	`'lg' \| 'md' \| 'sm'`	`'md'`	按钮尺寸。
`shape`	`'circle' \| 'square'`	`'circle'`	圆形或圆角方形，square 常用于表格 actions 列。
`disabled`	`boolean`	`false`	禁用态。
`...props`	`ButtonHTMLAttributes<HTMLButtonElement>`	`—`	其余原生按钮属性透传。

StyledLink

文字链接，9 种颜色，支持左右图标与禁用态，内部使用 next/link 跳转。

Usage

href 必填，通过 color 控制文字颜色。

Link Blue Link Green Link

1<StyledLink href="#">Link</StyledLink>
2<StyledLink href="#" color="blue">Blue Link</StyledLink>
3<StyledLink href="#" color="green">Green Link</StyledLink>

Colors

9 种颜色：purple / dark / blue / green / red / orange / yellow / cyan / gray。

Purple Blue Green Red Yellow Cyan Gray

1<StyledLink href="#" color="purple">Purple</StyledLink>
2<StyledLink href="#" color="blue">Blue</StyledLink>
3<StyledLink href="#" color="green">Green</StyledLink>
4<StyledLink href="#" color="red">Red</StyledLink>
5<StyledLink href="#" color="yellow">Yellow</StyledLink>
6<StyledLink href="#" color="cyan">Cyan</StyledLink>
7<StyledLink href="#" color="gray">Gray</StyledLink>

With Icon

iconLeft / iconRight 支持插槽，推荐 16px 图标。

Disabled

disabled 渲染为 span，降低透明度且无 hover。

Disabled

1<StyledLink href="#" disabled>Disabled</StyledLink>

API

Attribute	Type	Default	Description
`href`	`string`	`—`	链接地址，内部走 next/link。
`children`	`ReactNode`	`—`	链接文案。
`color`	`'purple' \| 'dark' \| 'blue' \| 'green' \| 'red' \| 'orange' \| 'yellow' \| 'cyan' \| 'gray'`	`'purple'`	文字颜色，9 种预设。
`iconLeft`	`ReactNode`	`—`	文字左侧图标槽。
`iconRight`	`ReactNode`	`—`	文字右侧图标槽。
`disabled`	`boolean`	`false`	禁用时不渲染 <a>，降低透明度且无 hover。
`className`	`string`	`''`	额外 className。

ButtonGroup

分段控制器，3 色 × 2 形状，受控组件通过 activeIndex + onChange 使用。

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

rounded（圆角矩形）或 pill（胶囊）。

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`	`—`	切换分段回调。
`className`	`string`	`—`	额外 className。

看所有变体 →