跳转到内容
天空之翼
EN

Button 按钮

按钮组件——六种变体、三种尺寸、链接或原生按钮。

button() 构建按钮：variant 切换 Solid / Subtle / Surface / Outline / Ghost / Plain，size 切换 sm / md / lg。传入 href 时渲染 <a>，否则渲染原生 <button type="button">。

变体

Section titled “变体”
全部变体
button({ label: 'Solid', variant: 'solid' });
button({ label: 'Subtle', variant: 'subtle' });
button({ label: 'Surface', variant: 'surface' });
button({ label: 'Outline', variant: 'outline' });
button({ label: 'Ghost', variant: 'ghost' });
button({ label: 'Plain', variant: 'plain' });

尺寸

Section titled “尺寸”
sm / md / lg
button({ label: '小号', size: 'sm', variant: 'outline' });
button({ label: '中号', size: 'md', variant: 'outline' });
button({ label: '大号', size: 'lg', variant: 'outline' });

图标

Section titled “图标”

图标渲染在文本前；任意内联 SVG 字符串均可。

图标 + solid
button({
  label: '联系我们',
  variant: 'solid',
  icon: '<svg …>…</svg>', // 任意内联 SVG 字符串
});

作为链接

Section titled “作为链接”

传入 href 时按钮渲染为 <a>；external 在新标签页打开。

链接形态
开始使用
button({ label: '开始使用', href: '/guides/example/', variant: 'solid' });

颜色

Section titled “颜色”

color 从 Kit 语义色令牌选取色板 （primary / info / success / warning / error / idea）。solid 以该颜色为底、 白色文字。

solid 色板
button({ label: 'Info', variant: 'solid', color: 'info' });
button({ label: 'Success', variant: 'solid', color: 'success' });
button({ label: 'Warning', variant: 'solid', color: 'warning' });
button({ label: 'Error', variant: 'solid', color: 'error' });
button({ label: 'Idea', variant: 'solid', color: 'idea' });

outline 沿用同一色板：

outline 色板
button({ label: 'Info', variant: 'outline', color: 'info' });

参数

Section titled “参数”
参数类型默认值说明
labelstring—按钮文本（必填）。
hrefstring—目标地址——渲染 <a> 而非 <button>。
variant'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain''solid'视觉风格。
size'sm' | 'md' | 'lg''md'高度与内边距（2rem / 2.5rem / 3rem）。
color'primary' | 'info' | 'success' | 'warning' | 'error' | 'idea''primary'色板，来自 Kit 语义色令牌。
iconstring''置于文本前的原始 SVG 字符串。
externalbooleanfalse配合 href：在新标签页打开链接。
attrsRecord<string, string>—附加 HTML 属性（如 data-cpd-drawer-trigger）。

注意

Section titled “注意”
  • 浅色 hover 压暗、深色 hover 提亮（color-mix）； focus 显示 2px ring（--cpd-ring）；disabled 半透明。
  • 圆角 0.375rem；字重 600；line-height: 1。