基础 · 1 / 21
Button st-button
四种按钮形态同属一个包：普通按钮、按钮组、分裂按钮、图标按钮。语义只由 variant / color / disabled / loading 表达，尺寸与材质直接写原生 CSS。
三种 variant
M3 的 filled / outlined / text 是语义类型，不是外观预设。它们共享同一套高度、内边距与圆角，只改变填充和描边。
LIVE
st-button示例代码
<st-button>Filled</st-button>
<st-button variant="outlined">Outlined</st-button>
<st-button variant="text">Text</st-button>状态：disabled 与 loading
loading 会自动禁用点击并显示随字号缩放的 spinner；异步任务只需把 loading 绑到 data，不需要手动叠 disabled。
LIVE
disabled / loading示例代码（异步提交）
<st-button attr:loading="busy" on:click="submit">
{{busy ? '提交中…' : '提交表单'}}
</st-button>
<script>
export default async () => ({
data: { busy: false },
proto: {
async submit() {
this.busy = true;
await fetch('/api/save', { method: 'POST' });
this.busy = false;
},
},
});
</script>color 语义换色
color 接受 M3 角色名或 color 工具里的自定义变量名，并与三种 variant 自由组合。切换种子色 / error / success 时全站按钮一起变化，不需要改组件样式。
LIVE
color + variant
primary
Primary
Primary
error
Delete
Delete
Delete
success
保存
已保存
secondary / tertiary
Secondary
Tertiary
示例代码
<st-button color="error">Delete</st-button>
<st-button color="error" variant="outlined">Delete</st-button>
<st-button color="success">保存</st-button>
<!-- 自定义变量需先在 color 工具中定义 -->
<st-button color="brand">Brand</st-button>图标插槽与尺寸
prefix / suffix 放图标；尺寸类默认值全部用 em，只改 font-size 就能整体等比缩放，也可以用原生 CSS 单独覆写高度、圆角或背景。
LIVE
slot / font-size示例代码
<st-button><iconify-icon slot="prefix" icon="mdi:magnify"></iconify-icon>Search</st-button>
<st-button variant="outlined">Settings<iconify-icon slot="suffix" icon="mdi:cog"></iconify-icon></st-button>
<st-button style="font-size: 12px;">12px</st-button>
<st-button style="height: 32px; border-radius: 8px; font-size: 12px;">Compact</st-button>按钮组
st-button-group 负责首尾圆角与间距。connected 连体，full-width 等分整行；也可以直接用 attr:variant 把按钮组当分段选择器。
LIVE
st-button-group示例代码（连体按钮组）
<st-button-group connected>
<st-button>新建</st-button>
<st-button variant="outlined">编辑</st-button>
<st-button color="error" variant="outlined">删除</st-button>
</st-button-group>分裂按钮
主操作区与菜单箭头分开：点主区触发 click，点箭头展开 menu 插槽。open 是运行时状态，ofa 页面里用 sync:open 双向绑定。
LIVE
st-split-button示例代码
<st-split-button on:click="send">
发送
<st-menu-item slot="menu" on:click="sendTo('email')">发送到邮箱</st-menu-item>
<st-menu-item slot="menu" on:click="sendTo('cloud')">发送到云盘</st-menu-item>
</st-split-button>图标按钮
standard / filled / tonal / outlined 四种类型，同样支持 color 与 disabled。没有文字，务必用 title 或 aria-label 提供无障碍名称。
LIVE
st-icon-button示例代码
<st-icon-button title="收藏"><iconify-icon icon="mdi:star-outline"></iconify-icon></st-icon-button>
<st-icon-button variant="filled" title="确认">✅</st-icon-button>
<st-icon-button variant="tonal" color="error" title="删除">🗑</st-icon-button>属性
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
variant | "filled" | "outlined" | "text" | "filled" | 普通按钮三种类型 |
color | M3 角色名 / 自定义变量名 | 无 | 与 variant 自由组合的语义换色 |
disabled | boolean | 无 | 0.38 透明度并阻断点击 |
loading | boolean | 无 | 显示 spinner，自动阻断点击 |
type | "button" | "submit" | "reset" | "button" | 转发给内部原生 button |
插槽 / 事件 / 同包组件
- 插槽：默认文字；
prefix/suffix放图标。 - 事件：
click直接在宿主监听；Tab 聚焦、Enter / Space 激活由内部原生 button 提供。 st-button-group：connected连体、full-width等分。st-split-button：主区 click + menu 插槽，open是运行时状态。st-icon-button：standard / filled / tonal / outlined。