For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.3.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.3.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.3.0/components/status-badge.md.
A3S UI
  • 简体中文
  • v0.3.0

      • 状态徽章

      状态徽章为运行状态提供紧凑且一致的表达，同时避免把后端状态名称直接暴露为样式 API。它适用于 Agent 执行、构建、部署、数据流与发布生命周期。

      实时预览
      已排队运行中已完成重试中失败

      用法

      由宿主应用把领域状态映射到五种语义状态。

      <span class="status-badge" data-state="active" data-indicator>运行中</span>

      参数

      API值用途
      class="status-badge"必需状态标签根元素
      data-stateneutral、active、success、warning、danger语义状态样式
      data-sizesm更紧凑的尺寸
      data-indicator标记添加装饰性状态圆点
      data-truncate标记在宽度受限时截断直接子级 <span>
      --status-badge-toneCSS 颜色可选的产品专用语义色

      状态与变体

      neutral 用于排队、未知或非活动状态；active 用于正在运行的工作；success 用于成功终态；warning 用于降级或重试；danger 用于失败、取消或阻塞。面向用户的文本仍应使用具体领域名称。

      <span class="status-badge" data-state="success">已发布</span>
<span class="status-badge" data-state="warning">等待清理</span>
<span class="status-badge" data-state="danger">已取消</span>

      状态徽章与普通 Badge 的用途不同：Badge 用于分类、计数和不可变标签；状态徽章用于会随时间变化的状态。

      可访问性

      始终提供可见状态文本，让颜色和可选圆点只作为冗余提示。不要为每个徽章都添加 role="status"；只有宿主应用确实需要播报状态变化时才使用实时区域。若状态属于某个控件或区域，其加载、错误和关联语义应保留在对应控件或区域上。