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

      • 徽章

      徽章用一小段文字标记类别、版本、数量或需要注意的静态属性，帮助用户扫读信息；它不替代状态说明，也不承担主要操作。

      实时预览
      当前版本TypeScript草稿2 个阻塞项

      用法

      引入 CSS

      导入 Tailwind 和完整样式包。

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      也可以只导入基础样式、徽章组件和一个样式包。

      @import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/badge.css";
@import "@a3s-lab/ui/styles/a3s.css";

      添加徽章 HTML

      默认使用 <span>。只有徽章本身确实导航到另一个地址时，才使用带 href 的 <a>。

      <span class="badge" data-variant="secondary">TypeScript</span>
<a class="badge" data-variant="outline" href="/releases/0.4.0">
  查看 0.4.0 版本
</a>

      参数

      API取值用途
      根元素<span>、<a href>静态标签或真实导航
      class="badge"必填稳定根类名
      data-variantprimary、secondary、outline、ghost、link、destructive表达强调层级或风险语义
      data-iconinline-start、inline-end校正内联图标的尺寸和间距

      状态与变体

      默认变体只用于当前上下文中最需要被识别的一项，例如“当前版本”。secondary 适合技术类别，outline 适合低强调元数据，destructive 只标记明确的问题或阻塞。ghost 与 link 主要服务可导航徽章，不能把静态文本伪装成可点击控件。

      实时预览
      已验证稳定通道12 项变更

      查看发布说明

      徽章不提供任意颜色 API。类别颜色必须来自产品中稳定、可解释的分类体系；成功、运行中、失败等动态生命周期优先使用状态徽章，等待过程使用进度或加载指示器。

      长句、错误原因和恢复操作不应塞进徽章。文本超过一个短语时，改用普通元数据、警报或说明区域。

      可访问性

      徽章的含义必须由可见文字表达，颜色和图标只能辅助识别。装饰图标设置 aria-hidden="true"；只有图标承载额外信息时才提供独立文本。数量应写成“12 项变更”或在可访问名称中补足单位，不能只显示无法解释的“12”。静态徽章不应获得焦点；可交互徽章必须使用真实链接或按钮语义，并具备清晰动作名称和触控目标。动态状态更新若需要播报，应由拥有状态的区域提供实时语义，而不是给每个徽章都添加 role="status"。