ForgeForge

Button & Link

Button / IconButton / StyledLink — 文字按钮、图标按钮、文字链接。

Button - Variants

primary / secondary / tertiary 三种变体 × 9 色 × 3 尺寸。

Color: purple

primary
secondary
tertiary

Color: dark

primary
secondary
tertiary

Color: blue

primary
secondary
tertiary

Color: blue-dark

primary
secondary
tertiary

Color: red

primary
secondary
tertiary

Color: green

primary
secondary
tertiary

Color: yellow

primary
secondary
tertiary

Color: grey

primary
secondary
tertiary

Color: black

primary
secondary
tertiary

Button - Sizes

lg / md / sm 三种尺寸 × primary 变体（purple）。

Primary (purple)

lg
md
sm

Secondary (purple)

lg
md
sm

Tertiary (purple)

lg
md
sm

Button - With Icon

左图标 / 右图标 / 无图标，搭配 primary 变体 × 3 尺寸。

Size: lg

icon-left
icon-right
no-icon

Size: md

icon-left
icon-right
no-icon

Size: sm

icon-left
icon-right
no-icon

Button - Disabled

opacity-60 + cursor-not-allowed；每个变体都支持 disabled。

Disabled (purple)

primary
secondary
tertiary

Disabled with icon

icon-left
icon-right

Icon Button - Variants

primary / secondary / tertiary / ghost × 9 色 × 3 尺寸 × 2 shape。

Color: purple

primary
secondary
tertiary
ghost

Color: dark

primary
secondary
tertiary
ghost

Color: blue

primary
secondary
tertiary
ghost

Color: blue-dark

primary
secondary
tertiary
ghost

Color: red

primary
secondary
tertiary
ghost

Color: green

primary
secondary
tertiary
ghost

Color: yellow

primary
secondary
tertiary
ghost

Color: grey

primary
secondary
tertiary
ghost

Color: black

primary
secondary
tertiary
ghost

Icon Button - Sizes & Shape

3 尺寸 × 2 shape（circle / square）。square 用于表格 actions 列。

Circle (purple, primary)

lg
md
sm

Square (purple, primary)

lg
md
sm

Square ghost (actions 列典型用法)

sm
md
lg

Icon Button - Shape × Variant

circle / square 搭配 4 种 variant（purple, md）。

Shape: circle

primary
secondary
tertiary
ghost

Shape: square

primary
secondary
tertiary
ghost

Icon Button - Disabled

opacity-60 + 禁点击。

Disabled (purple)

primary
secondary
tertiary
ghost