Button
触发即时操作的按钮，最基础的交互原子（严格对齐 Semi Button）。
如何引入
import { Button, ButtonGroup, SplitButtonGroup } from '@chenzy-design/svelte';按钮类型
支持 primary / secondary / tertiary / warning / danger 五种语义类型。
关于类型字体色值
每种 type 的语义色都是 CSS 变量，可直接用于自定义元素：--cd-color-primary（主要）、--cd-color-secondary（次要）、--cd-color-tertiary（第三）、--cd-color-warning（警告）、--cd-color-danger（危险）。
按钮主题
目前可用的主题（theme）为：light（浅色背景）、solid（深色背景）、borderless（无背景）、outline（边框模式），与类型正交组合。默认主题为 light。
浅色背景
theme="light"：浅色语义底 + 语义文字，适合次级/常规操作。
深色背景
theme="solid"：语义实心底 + 反相文字，视觉最强，适合主操作。
无背景
theme="borderless"：透明底 + 语义文字，无边框，最轻量。
边框模式
theme="outline"：透明底 + 语义边框 + 语义文字，介于 light 与 borderless 之间。
尺寸
提供 large / default / small 三种尺寸。
块级按钮
block 让按钮撑满容器宽度，常用于表单/移动端主操作。
图标按钮
可定义按钮的图标：通过 icon snippet 传入，iconPosition 控制左右；纯图标按钮（无文字）自动收成方形，需提供 ariaLabel。
链接按钮
链接型文字按钮推荐用 Typography 的 link prop 实现（而非 Button），支持 href / target / underline，具体用法详见 Typography
禁用状态
disabled 在各主题下用禁用底灰 + 灰字表现，并禁止交互；disabled 优先级高于 loading（对齐 Semi）。
加载状态
设置 loading 为 true 即进入加载态，自动带旋转图标并禁止点击；可受控切换，注意 loading 时按钮不可点击。
AI 风格 - 多彩按钮
colorful 在所有主题下用品牌蓝→紫渐变，营造 AI 风格；type 仅 primary/tertiary。
组合尺寸
ButtonGroup 横向拼接多个 Button；组级 size 经 context 透传，组内按钮统一尺寸。
组合禁用
组级 disabled 透传，整组按钮一并禁用。
组合类型
组级 type 经 context 透传统一语义类型，组内单个按钮仍可单独覆盖。
分裂按钮组合
SplitButtonGroup 是纯容器（对齐 Semi）：内部放 Button + Dropdown（含箭头 Button），为首/末按钮补圆角并添加按钮间隔。
API 参考
Button
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | 语义类型 | 'primary'|'secondary'|'tertiary'|'warning'|'danger' | primary |
theme | 视觉变体：有背景/无背景/浅背景/边框 | 'solid'|'borderless'|'light'|'outline' | light |
size | 尺寸 | 'small'|'default'|'large' | default |
block | 撑满容器宽度 | boolean | false |
disabled | 禁用状态（底灰 + 灰字，优先级高于 loading） | boolean | false |
loading | 加载态（带旋转图标，禁用点击） | boolean | false |
colorful | AI 多彩按钮：type 仅 primary/tertiary 有意义（对齐 Semi） | boolean | false |
circle | 圆形按钮（border-radius:50%），配合 icon-only 呈正圆 | boolean | false |
htmlType | 原生 button 的 type 值 | 'button'|'submit'|'reset' | button |
icon | 图标插槽；纯图标按钮需提供 ariaLabel | Snippet | undefined |
iconPosition | 图标相对文字位置 | 'left'|'right' | left |
noHorizontalPadding | 仅设置 icon 时去单/双侧水平内距（inline padding） | boolean|'left'|'right'|('left'|'right')[] | false |
ariaLabel | 无障碍名（透传 aria-label）；纯图标按钮必填 | string | undefined |
class | 根元素自定义类名 | string | undefined |
style | 根元素自定义内联样式 | string | undefined |
contentClassName | 内容区（.cd-button-content）自定义类名 | string | undefined |
...rest | 其余原生属性透传到根 button：data-*/name/value/form/title/tabindex/aria-controls/aria-expanded 等 | HTMLButtonAttributes | - |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onclick | MouseEvent | disabled/loading 时不触发（原生 disabled 阻断） |
onmousedown | MouseEvent | 鼠标按下 |
onmouseenter | MouseEvent | 鼠标移入 |
onmouseleave | MouseEvent | 鼠标移出 |
Slots
| 名称 | 说明 |
|---|---|
children | 按钮文本 |
icon | 图标 |
ButtonGroup
横向拼接多个 Button；组级 size/type/theme/disabled/colorful 经 context 透传，组内 Button 显式 prop 始终优先。相邻按钮间以 1px 分隔条区隔（outline 主题走 border 叠边）。
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | 组级语义类型 | 'primary'|'secondary'|'tertiary'|'warning'|'danger' | undefined |
theme | 组级视觉变体 | 'solid'|'borderless'|'light'|'outline' | undefined |
size | 组级尺寸 | 'small'|'default'|'large' | undefined |
disabled | 组级禁用，整组一并禁用 | boolean | undefined |
colorful | 组级多彩，透传给组内 Button | boolean | undefined |
ariaLabel | 按钮组语义标签（aria-label） | string | undefined |
class | 根元素自定义类名 | string | undefined |
style | 根元素自定义内联样式 | string | undefined |
SplitButtonGroup
分裂按钮：纯 role=group 容器，为内部首/末 button 加圆角并添加按钮间隔。典型用法为左侧主 Button + 右侧 Dropdown 触发的箭头 Button。
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
ariaLabel | 分裂按钮组语义标签（root aria-label） | string | undefined |
class | 根元素自定义类名 | string | undefined |
style | 根元素自定义内联样式 | string | undefined |
children | 分裂按钮内容（Button + Dropdown 等） | Snippet | undefined |
Accessibility
| ARIA role | button |
| 键盘交互 | EnterSpace |
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-animation-duration-button-icon-custom-loading | 1600ms | 自定义指示器旋转一周时长（对齐 Semi 1600ms） |
--cd-animation-duration-button-icon-loading | 600ms | 加载图标容器旋转一周时长（对齐 Semi 600ms） |
--cd-transition-delay-button-borderless-bg | var(--cd-motion-delay-none) | 无边框按钮-背景色-延迟时间 |
--cd-transition-delay-button-danger-bg | var(--cd-motion-delay-none) | 危险按钮-背景色-延迟时间 |
--cd-transition-delay-button-danger-border | var(--cd-motion-delay-none) | 危险按钮-边框-延迟时间 |
--cd-transition-delay-button-light-bg | var(--cd-motion-delay-none) | 浅色按钮-背景色-延迟时间 |
--cd-transition-delay-button-light-border | var(--cd-motion-delay-none) | 浅色按钮-边框-延迟时间 |
--cd-transition-delay-button-primary-bg | var(--cd-motion-delay-none) | 主要按钮-背景色-延迟时间 |
--cd-transition-delay-button-primary-border | var(--cd-motion-delay-none) | 主要按钮-边框-延迟时间 |
--cd-transition-delay-button-secondary-bg | var(--cd-motion-delay-none) | 次要按钮-背景色-延迟时间 |