Title: MciButton 文案、图标与状态
Canonical: https://microi.net/doc/system-engine/mci-button-states.html
Page-Modified: 2026-11-12T13:02:58.000Z
Source: published HTML document body; page revision is not a capability verification date.

# MciButton 文案、图标与状态

本页说明 Web MciButton 的内容、交互状态与主题对比度契约，便于在桌面和手机页面中保持文字可读、图标对齐和提交状态明确。

## 文案与图标

Web MciButton 的内容层使用 inline-flex、双向居中、8px 间距和 min-width:0。原 default slot 保留；可选 #icon 槽位用于装饰图标，继承前景色且默认 aria-hidden=true。只图标按钮仍应由使用方提供可访问名称。无需安装新图标库。

## 状态与可访问性

状态	|	交互与展示要求	|

普通可点击	|	文案清晰，保持原有交互	|

加载中	|	原生按钮禁用，保留可见文案并标记 aria-busy=true	|

普通禁用	|	使用原生 disabled 与既有 opacity，不能只把按钮变透明	|

只显示图标	|	由使用方提供可访问名称	|

加载时原生 button 禁用并标记 aria-busy=true，spinner 对辅助技术隐藏；可见文案仍保留。普通禁用态继续沿用原 opacity 与原生 disabled，不能仅把按钮变透明而仍允许重复提交。

## 主题与文字对比度

默认红色主渐变采用可读末色，冷色渐变末色使用深青；暗色主题在未显式选择 palette 时也提供可读链接色。显式九色主题、五个变体的 default/hover/focus-visible/active 共用成对语义 token。普通按钮文字按 4.5:1 检查；inactive disabled 的对比度豁免不能推广到 loading、普通文字或可点击按钮。

## 验收边界

本地 SFC SSR 与 CSS token 计算能发现模板、slots、状态及颜色配对问题，但不是浏览器 computed style 或截图验收。上线仍需在真实宿主检查明暗主题、非默认主题、键盘焦点、1440px 桌面与约390px手机，确认文字未遮挡、图标居中、原交互和触控可用。装饰动效不能负责文案可见性。