ForgeForge

Badge

Badge 家族：NotificationBadge 计数徽章、Label 文字标签、CircleIcon 圆形图标、ArtisticIcon 装饰图标。

NotificationBadge

右上角计数小徽章，6 种颜色。

Import

import { NotificationBadge, Label, CircleIcon, ArtisticIcon } from "@forge-ui/react";

Usage

通过 children 传数字或极短文字，color 切换主色。

99+5NEW
1<NotificationBadge>99+</NotificationBadge>
2<NotificationBadge color="orange">5</NotificationBadge>
3<NotificationBadge color="green">NEW</NotificationBadge>

Colors

6 种颜色：purple / orange / green / yellow / cyan / black。

99+99+99+99+99+99+
1<NotificationBadge color="purple">99+</NotificationBadge>
2<NotificationBadge color="orange">99+</NotificationBadge>
3<NotificationBadge color="green">99+</NotificationBadge>
4<NotificationBadge color="yellow">99+</NotificationBadge>
5<NotificationBadge color="cyan">99+</NotificationBadge>
6<NotificationBadge color="black">99+</NotificationBadge>

API

AttributeTypeDefaultDescription
childrenReactNode—徽章内容，通常是数字或极短文字。
color'purple' | 'orange' | 'green' | 'yellow' | 'cyan' | 'black''purple'主色，共 6 种。
classNamestring—额外 className。

Label

文字标签，7 色 × 3 尺寸 × outline/solid，适合 Status、Tag、Category 场景。

Usage

通过 color / variant / size 三维控制。

DefaultOutlineSolid
1<Label>Default</Label>
2<Label color="blue" variant="outline">Outline</Label>
3<Label color="green" variant="solid">Solid</Label>

Colors

7 种主色：purple / blue / cyan / green / red / yellow / gray。

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

Sizes

3 种尺寸：lg / md / sm。

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

Variant

outline 浅底描边（默认），solid 实底强调。

OutlineSolidOutlineSolid
1<Label variant="outline">Outline</Label>
2<Label variant="solid">Solid</Label>

API

AttributeTypeDefaultDescription
childrenReactNode—标签内容。
color'purple' | 'blue' | 'cyan' | 'green' | 'red' | 'yellow' | 'gray''purple'主色，共 7 种。
size'lg' | 'md' | 'sm''md'标签尺寸。
variant'outline' | 'solid''outline'描边或实底样式。
classNamestring—额外 className。

CircleIcon

圆形图标容器，8 色 × 3 变体 × 4 尺寸，常用于 List / Card 的头像位。

Usage

以 children 传入 solar-icon-set 图标即可，尺寸随 size 自动协调。

1<CircleIcon color="purple" variant="solid">
2  <BellBoldDuotone size={18} />
3</CircleIcon>

Variants

solid 实底，light 浅底，neutral 中性灰底。

1<CircleIcon variant="solid"><BellBoldDuotone size={18} /></CircleIcon>
2<CircleIcon variant="light"><BellBoldDuotone size={18} /></CircleIcon>
3<CircleIcon variant="neutral"><BellBoldDuotone size={18} /></CircleIcon>

Sizes

4 种尺寸：lg / md / sm / xs，图标大小需手动协调。

1<CircleIcon size="lg"><BellBoldDuotone size={24} /></CircleIcon>
2<CircleIcon size="md"><BellBoldDuotone size={18} /></CircleIcon>
3<CircleIcon size="sm"><BellBoldDuotone size={16} /></CircleIcon>
4<CircleIcon size="xs"><BellBoldDuotone size={12} /></CircleIcon>

Colors

8 种主色，示例为 solid 变体。

1<CircleIcon color="purple">...</CircleIcon>
2<CircleIcon color="blue">...</CircleIcon>
3<CircleIcon color="green">...</CircleIcon>
4<CircleIcon color="red">...</CircleIcon>
5<CircleIcon color="yellow">...</CircleIcon>

API

AttributeTypeDefaultDescription
childrenReactNode—内嵌图标，推荐 solar-icon-set BoldDuotone。
color'purple' | 'blue' | 'red' | 'orange' | 'green' | 'yellow' | 'cyan' | 'black''purple'主色，共 8 种。
variant'solid' | 'light' | 'neutral''solid'实底 / 浅底 / 中性灰底。
size'lg' | 'md' | 'sm' | 'xs''md'圆形直径，分别对应 40/32/28/20 px。

ArtisticIcon

48px 带渐变/光球装饰的图标容器，7 色 × 2 变体，用于强调入口（Feature Highlight）。

Usage

body 传入 24px 图标，variant 切换渐变或光球。

1<ArtisticIcon color="purple" variant="gradient">
2  <BellBoldDuotone size={24} />
3</ArtisticIcon>

Variants

gradient 平滑渐变底；orbs 附加浮动高光球。

1<ArtisticIcon variant="gradient"><BellBoldDuotone size={24} /></ArtisticIcon>
2<ArtisticIcon variant="orbs"><BellBoldDuotone size={24} /></ArtisticIcon>

Colors

7 种主色。

1<ArtisticIcon color="black">...</ArtisticIcon>
2<ArtisticIcon color="blue">...</ArtisticIcon>
3<ArtisticIcon color="purple">...</ArtisticIcon>
4<ArtisticIcon color="green">...</ArtisticIcon>
5<ArtisticIcon color="red">...</ArtisticIcon>
6<ArtisticIcon color="yellow">...</ArtisticIcon>
7<ArtisticIcon color="cyan">...</ArtisticIcon>

API

AttributeTypeDefaultDescription
childrenReactNode—内嵌图标，推荐 solar-icon-set 24px BoldDuotone。
color'black' | 'blue' | 'purple' | 'green' | 'red' | 'yellow' | 'cyan''purple'主色，共 7 种。
variant'gradient' | 'orbs''gradient'渐变底 或 浮光球装饰。
看所有变体 →