Button 按钮

基础按钮组件，原生 <button> 增强。

类型

按钮类型

默认按钮主要按钮成功按钮警告按钮危险按钮文字按钮

示例代码

尺寸

五种尺寸

超小小按钮中按钮大按钮超大

示例代码

size 支持 xs / small / medium（默认）/ large / xl 五档；非法值回落 medium 并提示告警。

五种尺寸 · 主要按钮

超小小按钮中按钮大按钮超大

示例代码

五种尺寸 · 图标按钮

示例代码

禁用与加载

禁用与加载态

禁用加载中提交中

示例代码

事件

点击事件

点击我

示例代码

点击派发 oas-click CustomEvent（bubbles + composed），detail.originalEvent 为原生 MouseEvent。

图标按钮

icon 在文字前渲染图标（复用 oas-icon 图标集，IconName），图标与文字间距走 --oas-space-2。

图标 + 文字

搜索下载删除新建

示例代码

无文字时按钮自动等宽正方形，需 aria-label 提供可访问名称；未显式设置时兜底取图标名（如 icon="close" → aria-label="close"），建议显式提供中文名称。

纯图标按钮

示例代码

块级

block 使按钮占满父容器宽度。

块级按钮

块级按钮下载

示例代码

圆角

round 使用胶囊圆角（--oas-radius-full，无该 token 时回退 999px）。

圆角按钮

完成取消订阅

示例代码

幽灵

ghost 为透明底 + 描边形态，描边与文字按 type 着色，hover 加深。

幽灵按钮

默认幽灵主要幽灵成功幽灵警告幽灵危险幽灵

示例代码

API

属性

属性	说明	类型	默认值
block	占满父容器宽度（块级）	boolean	—
disabled	禁用	boolean	—
ghost	幽灵/描边形态，透明底 + 按 type 着色描边，hover 加深	boolean	—
icon	图标名（复用 oas-icon 图标集）；无文字时等宽、以图标名兜底名称	string	—
loading	加载态	boolean	—
round	胶囊圆角（--oas-radius-full / 999px）	boolean	—
size	尺寸：xs / small / medium（默认）/ large / xl；非法值回落 medium 并告警	ButtonSize	medium
type	类型	ButtonType	default

事件

事件	说明
oas-click	点击，detail: { originalEvent }

插槽

名称	说明
默认	—