用一个「按钮（Button）」组件从 0 到 1 搭出可复用结构，并让它在不同文字长度、不同尺寸、不同容器宽度下都能稳定响应。
目标：同一个组件既能做主按钮/次按钮，也能做带图标按钮，并且在换文案时不炸版。
1）新建一个 Frame，命名为 Button。
2）把文字放进 Frame 内（例如：立即购买）。
3）选中 Frame，开启 Auto layout（Shift + A）。
4）设置 Padding：左右 16，上下 10；设置 Corner radius：10；给一个明显的填充色。
按钮最常见需求是「文字多了按钮自动变宽」。因此按钮 Frame 的宽度建议设为 Hug contents。
什么时候用 Fixed？当你做的是「等宽按钮组」或「表格内按钮」，需要统一宽度，这时改成 Fixed 并配合对齐即可。
选中文字层：
- Auto layout 内的文本建议设为 Hug contents。
- 如果你把文本设成 Fill container，按钮就会被迫跟着容器逻辑走，容易出现“按钮看起来变成一整条”的问题。
把按钮内部的 Spacing（元素间距）当作一个“可调参数”。
例如图标 + 文字：Spacing 设为 8；纯文字：Spacing 可以为 0 或直接隐藏图标层。
建议做法：图标层保留，但在变体里用 Component properties 控制显示/隐藏。
当按钮内包含图标时，常见问题是“看起来图标和文字不在一条线上”。
处理方式：
1）把 Auto layout 的对齐设为 Center。
2）如果字体视觉中心偏上/偏下，优先微调图标的上下内边距，而不是改文字行高。
把按钮放进更大的容器（例如卡片或顶部栏）后，可能会被压缩。
建议给 Button Frame 设置 Min height（比如 36）以及必要时的 Min width（比如 88），保证触控/点击面积与可读性。
当你需要按钮在父容器里“拉伸占满宽度”：
1）Button Frame 宽度设为 Fill container。
2）文字层保持 Hug（不要 Fill）。
3）在 Auto layout 里把对齐设为 Center（或按产品需要设为 Left）。
这样按钮能拉伸，但文案不会被拉扯成奇怪的对齐。
1）选中 Button Frame，创建组件（Ctrl + Alt + K）。
2）做 3 个变体：Primary / Secondary / Ghost（只改颜色、描边、阴影）。
3）增加一个 Icon 属性：左图标开/关。
4）在说明文档页写清楚：默认 Padding、默认字号、最小高度，以及什么时候用 Hug/Fill。
- 文案从 2 个字换到 10 个字，按钮是否自然变宽？
- 放进窄容器，是否仍保持最小高度？
- Fill container 时，文案是否仍然居中/左对齐正确？
- 图标开关后，Spacing 是否合理？
