通用

动作、标识和状态的基础组件。服务内容与任务，不制造额外的视觉表面。

按钮

按钮触发动作；去往新页面使用链接。不可用的原生按钮必须写 disabled，不用只改变外观的 aria-disabled。每个视图至多一个填充主按钮：真实提交、反馈收束，或应用轨明确推进当前任务的动作；其他动作按优先级退回线框或文字形式。

查看代码 · Source

<div class="wx-cluster"><button class="wx-btn" type="button">默认</button><button class="wx-btn wx-btn--primary" type="button">主操作</button><button class="wx-btn wx-btn--danger" type="button">危险</button><button class="wx-btn wx-btn--text" type="button">文字按钮 →</button><button class="wx-btn" type="button" disabled>禁用</button></div>

标签、计数与状态

状态必须带文字标签；只有颜色的状态对部分用户等于不存在。长解释放进提示块，不把标签拉成长段文案。

标签强调标签123

运行中降级已停止空闲

头像、按键与标记

仲平文心

Cmd + K 是命令搜索可采用的键位提示；只有产品实际绑定了它，才显示这组按键。文字署名可写为“文心 · 万形 ”，不要把标记当游离装饰。

分段与工具栏

分段只在少量互斥视图之间切换；工具栏只承载作用于当前内容的紧凑命令。两者都不用作页面主导航。

查看代码 · Source

<div class="wx-segmented" role="radiogroup" aria-label="内容视图">
  <button class="wx-segmented__option" type="button" role="radio" aria-checked="true">列表</button>
  <button class="wx-segmented__option" type="button" role="radio" aria-checked="false">网格</button>
</div>
<div class="wx-toolbar" role="toolbar" aria-label="文章操作" style="margin-block-start:var(--space-6)">
  <div class="wx-toolbar__group"><button class="wx-btn" type="button">编辑</button><button class="wx-btn" type="button">归档</button></div>
  <span class="wx-toolbar__spacer"></span><button class="wx-btn wx-btn--text" type="button">更多</button>
</div>

何时使用、何时不用与 API

组件	何时使用 · 不用	契约
`wx-btn`	触发动作；导航目的地用 `a`。	原生 `button`；不可用状态用 `disabled`；唯一主操作可用 `--primary`；危险动作仍需确认文案。
`wx-tag / wx-badge / wx-status`	短属性、计数、具名状态；长说明改用 note。	状态必须有文字；可点击时用 button/link，不用 span。
`wx-avatar / wx-kbd / wx-seal`	人员标识、键盘提示、品牌印记；装饰内容不喧宾夺主。	信息头像提供 alt/文本；随品牌文字出现的 seal 加 `aria-hidden`。
`wx-segmented / wx-toolbar`	少量互斥视图、上下文命令；不要替代页面导航或堆满所有动作。	segmented 用 `radiogroup` 或 `tablist`；toolbar 要有可访问名，采用者负责键盘模型。