Button 按钮
基础按钮组件，原生 <button> 增强。
类型
按钮类型
尺寸
五种尺寸
size 支持 xs / small / medium（默认）/ large / xl 五档；非法值回落 medium 并提示告警。
五种尺寸 · 主要按钮
五种尺寸 · 图标按钮
禁用与加载
disabled 禁用按钮；loading 进入加载态——原文字保留占位（宽度不变）、spinner 居中显示，配 loading-text 可显示加载文案。
禁用与加载态
异步自动加载
loading="auto" 时，oas-click 宿主处理返回 Promise 期间自动进入加载态，Promise resolve/reject 后自动退出。
异步提交自动 loading
禁用但可聚焦
disabled-focusable 呈现禁用外观（降饱和 + aria-disabled），但不设原生 disabled——仍可聚焦、可 hover，适合挂在 tooltip 上解释禁用原因；点击被组件拦截，不派发 oas-click。
禁用但可聚焦（配 tooltip 解释）
事件
点击事件
点击派发 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 加深。
幽灵按钮
圆形
circle 将按钮变为圆形，纯图标按钮等宽圆角合并为整圆。
圆形按钮
图标位置
icon-position 控制图标与文字的相对位置：start（默认，图标在左）或 end（图标在右）。
图标在右
双侧图标
icon 渲染文字前图标，icon-end 在文字后渲染第二个图标（均复用 oas-icon 图标集），两者可与 icon-position 并存。
双侧图标
链接按钮
设置 href 后渲染为原生链接（<a>），支持 target 指定打开方式（_blank / _self 等）；同时透传 download（文件下载）与 rel（链接关系）属性。
链接按钮
下载与 rel
朴素
plain 为低对比浅色形态（透明底 + 弱化描边与文字），在浅色背景上更柔和。
朴素按钮
形态（variant）
variant 控制按钮形态，与 type 语义色正交：solid（默认实底）/ outlined（描边）/ dashed（虚线描边）/ filled（浅底）/ text（纯文字）/ link（链接样式）。旧属性 ghost 等价 outlined、plain 等价 filled。
描边 / 虚线 / 浅底
文字 / 链接
自定义颜色
color 覆盖 type 语义色（任意色值），优先级高于 type。
配色优先级：--oas-button-bg（宿主注入 CSS 变量，可放渐变）> color 属性 > type 语义色 > 默认灰底。outlined / filled / dashed / text 形态下 color 染边框/文字/浅底；实心形态的文字色按底色亮度自动取黑/白（暗色主题同样可读）。
自定义色值按原值渲染（不自动改写），请自行确保文字与底色对比度达标（WCAG AA 4.5:1）。
自定义颜色
按下反馈
wave 开启按下反馈（轻微下沉 + 加深，默认开）；wave="false" 关闭。
按下反馈
中文间空格
auto-insert-space 在两个连续汉字间自动插入空格（中文排版优化，默认关）。
中文间自动空格
自动聚焦
autofocus 让按钮在页面加载后自动获得焦点（原生 autofocus 不穿透 Shadow DOM，组件挂载后转发聚焦到内部按钮）。
autofocus 自动聚焦
长内容换行
按钮默认单行不换行（white-space: nowrap）；显式加 wrap 后，受限宽（父容器或 width / max-width）的长文本换行显示、高度随内容增长（单行时与默认等高）。
wrap 长内容换行
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
auto-insert-space | 中文间自动空格：两个连续汉字间插入空格（排版优化，默认关） | string | — |
autofocus | 自动聚焦：挂载后聚焦内部按钮（原生 autofocus 不穿透 Shadow DOM，组件转发） | boolean | — |
block | 占满父容器宽度（块级） | boolean | — |
circle | 圆形按钮（纯图标场景，正方形 + 正圆角） | boolean | — |
color | 自定义颜色：覆盖 type 语义色（任意色值），优先级高于 type | string | — |
disabled | 禁用 | boolean | — |
disabled-focusable | 视觉禁用但保持可聚焦/可悬停（aria-disabled + 拦截点击），用于挂 tooltip 解释禁用原因 | boolean | — |
download | 链接模式（href）透传 download 属性（文件下载按钮） | string | — |
ghost | 幽灵/描边形态，透明底 + 按 type 着色描边，hover 加深 | boolean | — |
href | 链接地址：设置后渲染为原生链接 <a> | string | — |
icon | 图标名（复用 oas-icon 图标集）；无文字时等宽、以图标名兜底名称 | string | — |
icon-end | 文字后的第二个图标（iconRegistry 图标名），与 icon/icon-position 并存——「左图标+右下拉箭头」等双侧内容形态 | string | — |
icon-position | 图标位置：start（默认，图标在左）/ end（图标在右） | string | start |
loading | 加载态 | — | — |
loading-text | 加载态显示的文本（如「提交中…」），设置后 loading 时替换标签内容 | string | — |
plain | 朴素形态：低对比浅色（透明底 + 弱化描边文字），等价 variant="filled" | boolean | — |
rel | 链接模式（href）透传 rel 属性（target="_blank" 时配 noopener 安全） | string | — |
round | 胶囊圆角（--oas-radius-full / 999px） | boolean | — |
size | 尺寸：xs / small / medium（默认）/ large / xl；非法值回落 medium 并告警 | ButtonSize | medium |
target | 链接打开方式（_blank / _self 等），配合 href | string | — |
type | 类型 | ButtonType | default |
variant | 形态（与 type 正交）：solid（默认实底）/ outlined（描边）/ dashed（虚线描边）/ filled（浅底）/ text（纯文字）/ link（链接样式） | ButtonVariant | '' | — |
wave | 按下反馈：轻微下沉 + 加深（默认开）；wave="false" 关闭 | string | true |
wrap | 长文换行：默认单行不换行（nowrap）；开启后受限宽内容换行、高度随内容增长 | boolean | — |
事件
| 事件 | 说明 |
|---|---|
oas-click | 点击，detail: { originalEvent } |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | — |