在开始自动布局之前，先把按钮组件的输入/输出说清楚：按钮 = 容器（背景+圆角） + 文本（可替换） + 可选图标（左右任选） + 统一的内边距与间距。
建议最小标准：高度不固定（由内边距决定），左右内边距一致；文本在任何长度下都能保持居中对齐；图标存在时，图标与文本间距固定（例如 8）。
外层 Button：负责背景、圆角、描边、阴影、内边距（Padding）与整体对齐。
内层 Content：负责图标+文本的排列方向（水平/垂直）、项目间距（Spacing）与对齐。
元素 Icon / Label：图标用固定尺寸；文本用自适应宽度。
这样做的好处：外层只管“壳”，内层只管“内容排布”，状态和主题切换会更稳。
方向：按钮常用水平（Horizontal）。
Spacing：Icon 与 Label 之间固定 8（或 6/10，选一个团队常用值）。
Padding：左右 16、上下 10（示例）。小按钮可用 12/8，大按钮可用 20/12，但同一套组件里要有明确梯度。
对齐：Content 居中（Center）。
约束/拉伸：外层 Button 设置为“按内容自适应”（Hug contents）；当你需要按钮随容器拉伸时，再把 Button 的宽度改为 Fill container。
坑 A：文本被设置成固定宽度。解决：Label 用 Hug contents，或在需要换行的场景使用 Fill container + 限制最大宽度。
坑 B：外层和内层都在控制间距。解决：Padding 只放在外层，Spacing 只放在内层，别混用。
坑 C：图标没锁尺寸。解决：Icon 用固定宽高（例如 16x16），并在自动布局里保持不拉伸。
坑 D：按钮宽度 Fill 时内容不居中。解决：把 Content 的对齐设为 Center，并确认外层的对齐也为 Center。
推荐做法：用组件变体（Variants）管理状态，如 Default / Hover / Pressed / Disabled。只改颜色、描边和透明度，不要改结构。
命名建议：Type=Primary/Secondary，State=Default/Hover/Pressed/Disabled，Size=S/M/L。这样在组件面板里检索成本最低。
把按钮的核心规则写进组件属性：Padding/Spacing 固定，Icon 可显隐，Label 可替换，颜色由主题（Styles/Variables）驱动。
最后在页面里做 3 个“压力测试”：超长文本、只有图标、图标+两字文本。只要这三种都稳定，你的按钮基本就能在真实项目里扛住。
