目标是做一个“可配置按钮”组件：在右侧属性面板里就能切换主/次样式、尺寸、左右图标、加载态、禁用态，并确保图标/文字对齐、间距与约束稳定。全程零代码，适合做设计系统或交付给团队复用。
新建一个 Frame 作为按钮容器（建议 44px 高起步），开启 Auto Layout（横向）。内部只放 3 个子层：
关键点：Left/Right 不直接放图标，而是放一个固定尺寸的容器（例如 16x16 或 20x20），这样图标开关时，按钮高度与对齐不会抖。
在按钮容器上设置：
把 Label 的 Resizing 设为 Hug contents；按钮容器可以设为 Hug 或 Fixed，取决于你要“自适应文字”还是“固定宽度”。
把按钮组件做成 Component，然后 Duplicate 出四个基础状态：
选中这些组件，点击 Combine as variants。确保属性名简洁一致：Type、Size。不要把“颜色/圆角”写进名称里，用属性驱动。
把 Left/Right 容器里的图标做成可替换的图标组件（例如 Icon/16）。然后：
如果要“无图标”的情况：把 Left/Right 容器本身设置为可见性属性（Boolean），命名为 Has left icon、Has right icon。这样关闭时不仅隐藏图标，也能让容器本身参与布局计算（避免留下空位）。
加载态最容易导致按钮抖动，因为文字变成了 Spinner。解决方法：
Loading=true 时隐藏 Text 显示 Spinner，但 Label 容器宽度不变，按钮整体宽度保持稳定。
建议在变体里增加 State=Default/Disabled（或用 Boolean：Disabled）。禁用态除了降低对比度，还要保证可读性与可访问性：
发布前做一次“组件可用性自检”，能显著减少返工：
如果你的按钮只允许“左图标”或“右图标”二选一，可以用一个枚举属性 Icon position=None/Left/Right 来减少组合爆炸。实现思路是把 Left/Right 的可见性绑定到同一个属性值（需要组织好组件层级与默认值）。
按上面做完，你会得到一个可复用、可扩展、属性面板友好的按钮组件，后续再加 Danger、Ghost、Icon-only 也会很顺。
