目标是做一套“拿来就能用”的按钮组件：支持 3 个尺寸、主/次/危险 3 种样式、默认/悬停/按下/禁用/加载 5 种状态，并允许左/右图标。最后把它发布到组件库（Library）里，团队可以一键复用。
1）新建 Frame，命名为 Button/ 。
2）给 Frame 开启 Auto layout（水平），设置：Padding 12/16（上下/左右），Item spacing 8，Align center。
3）内部放 3 个层：Icon/Left、Label、Icon/Right。先把两个 Icon 设为 16x16 的占位（后面会替换为真实图标组件）。
4）让 Label 文字使用你项目的主字体样式（如 14/Medium）。注意：按钮的高度来自 padding + 文本行高，不要手动拉高。
复制 三份，分别命名：Button/Sm、Button/Md、Button/Lg。
建议尺寸配置（可按品牌调整）：
- Sm：Padding 8/12，文字 12/Medium，Icon 14
- Md：Padding 10/16，文字 14/Medium，Icon 16
- Lg：Padding 12/20，文字 16/Medium，Icon 18
关键点：Icon 的尺寸也要跟着 size 走，否则会显得“头重脚轻”。
每个尺寸再复制为 3 个“外观”：Primary / Secondary / Danger。
建议样式：Primary 用实心背景；Secondary 用描边 + 透明背景；Danger 用红色系并保持对比度。
把颜色定义为变量（Variables）或使用色板样式（Color Styles），避免日后改色时全局替换出错。
为每个 type 做：Default / Hover / Pressed / Disabled / Loading。
- Hover：背景稍提亮（或描边更明显）
- Pressed：背景略压暗，必要时加轻微 inset 阴影
- Disabled：降低对比度并锁定交互（颜色灰化，描边变浅）
- Loading：用 Spinner 替换 Label 或放在 Label 左侧，并把按钮设为不可点击状态（视觉同 Disabled 或单独 Loading 方案）
提示：不要在 Disabled 时把文字淡到看不清，保证可读性与无障碍对比度。
选中所有按钮状态，点击 Combine as variants。
创建 4 个属性（Properties）：
- type：primary / secondary / danger
- size：sm / md / lg
- state：default / hover / pressed / disabled / loading
- icon：none / left / right / both
命名规范建议：组件名 Button，变体名由属性自动组合即可，避免手写冗长名称。
方式 A（推荐）：把 Icon/Left 与 Icon/Right 设置为 Visibility 属性，配合 Variants 控制开关。
方式 B：用 Boolean property（如 showLeftIcon / showRightIcon）来切换可见性，组合更清晰。
注意：隐藏 Icon 时，不要留下占位宽度；确保 Auto layout 会自动收缩间距。
Loading 不只是“放个圈”。你需要决定：
- 是否保留按钮宽度（推荐保留，避免布局抖动）
- Spinner 颜色是否跟随 type（primary 用白色，secondary 用品牌色）
- Loading 时是否禁用 hover/pressed（推荐禁用）
做法：在 Loading 变体中，把 Label 透明度设为 0 或替换为“Loading…”，同时添加 Spinner 图标。
把组件放到组件库页面，写一段“怎么用”的说明：
- 何时用 primary/secondary/danger
- 默认 size 选 md，移动端可用 sm
- 禁用与 loading 的交互规则
最后启用 Library 发布。团队成员在 Assets 面板即可搜索 Button 并复用。
- 文本被挤压：检查 Label 是否设置为 Hug contents，且 Auto layout 没被手动改为固定宽度。
- 图标对不齐：确认 Icon 与文本都在同一条基线居中，并统一行高。
- 颜色不统一：把色值改成变量/样式，不要在每个变体里手动填色。
- 组件太重：能用属性解决的，不要用过多独立组件层级。
完成后，你会得到一套可扩展的按钮体系：后续只要新增 type 或 size，就能自动复用既有结构与规范。建议把同一套方法复制到 Input、Tag、Chip 等基础组件上，快速搭建你的设计系统。
